vue2中CesiumV1.113.0加载离线地形数据

 离线地形数据可以放在vue项目下的public/data/sjzTerrain文件下 
vue2中CesiumV1.113.0加载离线地形数据_第1张图片 由于地形离线数据数量太大,在vue项目编译时会报如下错误:

 ERROR in EMFILE: too many open files, open 'D:\test_project\vue_cesium_demo\public\data\sjzTerrain\.tmp\14\26787\11669.hm'

vue2中CesiumV1.113.0加载离线地形数据_第2张图片

这时,我们可以把离线地形数据放在本机的iis上 

vue2中CesiumV1.113.0加载离线地形数据_第3张图片

vue2中CesiumV1.113.0加载离线地形数据_第4张图片

然后运行项目,不会报上面的错误了

vue2中CesiumV1.113.0加载离线地形数据_第5张图片 

   // 加载地形数据
        viewer.terrainProvider = await Cesium.createWorldTerrainAsync({
          url: "https://[ t0-t7 ].tianditu.gov.cn/mapservice/swdx?tk=天地图token", //"data/sjzTerrain/", //"http://192.168.1.143:8963/",// Cesium.IonResource.fromAssetId(1), 
          requestWaterMask: true, // 控制水的流动效果
          requestVertexNormals: true, //请求地形照明数据
        });
        viewer.scene.globe.enableLighting = true;
     new Promise(async (resolve, reject) => {
        this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
          selectionIndicator: false,
          infoBox: false,
          contextOptions: {
            // 硬件反走样,默认值为 1
            msaaLevel: 8,
            requestWebgl2: true,
          },
          animation: false,
          timeline: false, // 底部时间线
          fullscreenButton: false, // 全屏
          vrButton: false, // VR
          sceneModePicker: false, // 选择视角的模式(球体、平铺、斜视平铺)
          baseLayerPicker: false, // 图层选择器(地形影像服务)
          navigationHelpButton: false, // 导航帮助(手势,鼠标)
          geocoder: false, // 位置查找工具
          homeButton: false, // 视角返回初始位置
        });
        this.viewer.scene.globe.baseColor = Cesium.Color.BLACK; // 设置地球颜色
        this.viewer.cesiumWidget.creditContainer.style.display = "none"; // 去除logo
        window.viewer = this.viewer;
        // 加载地形数据
        viewer.terrainProvider = await Cesium.createWorldTerrainAsync({
          url: "https://[ t0-t7 ].tianditu.gov.cn/mapservice/swdx?tk=175171c959b6f72e789fb3c45a266d55", //"data/sjzTerrain/", //"http://192.168.1.143:8963/",// Cesium.IonResource.fromAssetId(1), //"http://192.168.1.143:8963/"
          requestWaterMask: true, // 控制水的流动效果
          requestVertexNormals: true, //请求地形照明数据
        });
        viewer.scene.globe.enableLighting = true;
        resolve(viewer);
      }).then(() => {
       
      });
加载地形数据后,可以根据经纬度获取高程
const positions = [
          Cesium.Cartographic.fromDegrees(
            114.22268842439114,
            38.134979272096594
          ),
          Cesium.Cartographic.fromDegrees(114.5199580178976, 38.1139391070047),
        ];
        const updatedPositions = await Cesium.sampleTerrainMostDetailed(
          viewer.terrainProvider,
          positions
        );
        console.log(`updatedPositions`, updatedPositions);
        try {
          const updatedPositions2 = await Cesium.sampleTerrainMostDetailed(
            viewer.terrainProvider,
            positions,
            true
          );
          console.log(`updatedPositions2`, updatedPositions2);
        } catch (error) {
          // A tile request error occurred.
        }

        const updatedPositions3 = await Cesium.sampleTerrain(
          viewer.terrainProvider,
          10,
          positions
        );
        console.log(`updatedPositions3`, updatedPositions3);
        try {
          const updatedPositions4 = await Cesium.sampleTerrain(
            viewer.terrainProvider,
            10,
            positions,
            true
          );
          console.log(`updatedPositions4`, updatedPositions4);
        } catch (error) {
          // A tile request error occurred.
        }
 完整代码




你可能感兴趣的:(vue.js,javascript,前端)