0、数据输入为类似Geojson的压缩文件和纹理图片，基于DrawCommand命令绘制；
1、自定义建筑几何，包括顶点、法线、纹理等；
2、自定义纹理贴图，包括按建筑高度贴图、mipmap多级纹理；
3、自定义批处理表，支持显示控制和鼠标交互。
效果
部分代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>北京建筑</title><script src="./js/config.js"></script><script src="./scripts/vue.min.js"></script><link rel="stylesheet" href="./css/common.css" /><script type="text/javascript" src="../anov-gis-sdk/index.js"></script><link rel="stylesheet" href="../anov-gis-sdk/index.css" /><script type="text/javascript" src="./scripts/element.index.js"></script><link rel="stylesheet" href="./scripts/element.index.css"><!-- <script src="https://cdn.jsdelivr.net/npm/pbf"></script> -->
</head><body><div id="global"></div><script type="module">import CustomPrimitive from './html/performance/CustomPrimitive.js';import CustomTexture from './html/performance/CustomTexture.js';import CustomWallGeometry from './html/performance/CustomWallGeometry.js';import { showLoading, hideLoading, setText } from './html/performance/loadingUtil.js';new Vue({el: "#global",template: `<div id="cesiumContainer"></div>`,mounted() {this.init3D();this.addTestPrimitive();setTimeout(() => {showLoading();this.creatWall();}, 1000);setTimeout(() => {console.log('viewer.scene.frameState.commandList', viewer.scene.frameState.commandList);}, 5000);},methods: {init3D() {window.viewer = new ANOVGIS.Viewer("cesiumContainer", {contextOptions: {id: "cesiumCanvas",webgl: {preserveDrawingBuffer: false,},showRenderLoopErrors: true,},geocoderType: ANOVGIS.GeocoderType.TIANDITU,vrButton: false,baseLayerPicker: true,fullscreenButton: true,homeButton: true,sceneModePicker: true,navigationHelpButton: true,copyRight: false,showMapInfo: true,drillPick: false,});top.viewer = window.viewer;viewer.setOptions({enableFxaa: true,});viewer.nativeObjCesium.shadowMap.maximumDistance = 1300;let time = 0;setInterval(() => {// 改变时间设置光照效果let date = new Date().getTime() + timelet utc = Cesium.JulianDate.fromDate(new Date(date))//北京时间viewer.nativeObjCesium.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 8, new Cesium.JulianDate())time = time + 5000 * 60}, 100)},locate() {ANOVGIS.LocateUtil.flyToPosition(viewer, '116.4244631,39.8453427', 0, -35, 5000, 2, null);},creatWall() {this.addBuildingWallsToViwer(0, datasArr);},async addBuildingWallsToViwer(indexB, arr) {// 模拟异步操作},getFile(path, callback) {return fetch(path, {responseType: 'arraybuffer'}).then(res => {return res.arrayBuffer();}).then(data => {let geojson = geobuf.decode(new Pbf(data))callback(geojson);})},addWallPrimitive(buildingMaterial) {const buildsArr = buildingMaterial.buildingdatas;const customWallGeometry = new CustomWallGeometry({buildsArr,textureWidth: buildingMaterial.textureWidth});const geometryCombined = customWallGeometry.createGeometry(buildsArr);const attributeLocations = {position3DHigh: 0,position3DLow: 1,normal: 2,st: 3};let texture;const customTexture = new CustomTexture();customTexture.getMipmapTexture(viewer.scene.context, '../modelData/building/' + buildingMaterial.material[0], (t) => {texture = t;});const customPrimitive = new CustomPrimitive({geometry: geometryCombined,attributeLocations: attributeLocations,receiveShadows: true,castShadows: true,})return viewer.scene.primitives.add(customPrimitive);},addBuildTops(buildingMaterial) {const buildsArr = buildingMaterial.buildingdatas;const topsInstancesArr = [];for (let index = 0; index < buildsArr.length; index++) {const element = buildsArr[index];const positionsCartesian3 = element.positions;const buildingHeight = element.height;const topInstance = new Cesium.GeometryInstance({geometry: Cesium.PolygonGeometry.createGeometry(new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(positionsCartesian3),height: buildingHeight}))});topsInstancesArr.push(topInstance);}const geometryCombined = Cesium.GeometryPipeline.combineInstances(topsInstancesArr)[0];const attributeLocations = {position3DHigh: 0,position3DLow: 1,normal: 2,st: 3};let texture;const customTexture = new CustomTexture();customTexture.getMipmapTexture(viewer.scene.context, '../modelData/building/' + buildingMaterial.topMaterial[0], (t) => {texture = t;})const topsPrimitive = new CustomPrimitive({geometry: geometryCombined,attributeLocations: attributeLocations,receiveShadows: true,castShadows: false,uniformMap: {myImage: () => {if (Cesium.defined(texture)) {return texture;} else {return viewer.scene.context.defaultTexture;}}},})return viewer.scene.primitives.add(topsPrimitive);},}})</script>
</body></html>
![[OJ]平均串问题,存在超时问题未解决](https://i-blog.csdnimg.cn/blog_migrate/7dc7555f7defc05f3ac8c1decb45b743.png)
