vue中使用cesium 加载shp文件-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中使用cesium 加载shp文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在cesium中加载shp文件，将shp文件打包为zip，直接加载zip文件，shp文件中需包含这四个文件

cesium加载shp,cesium,3d,javascript,前端

加载代码

var base = "/modeldata/demo.zip";
      shp(base).then(function (data) {
        let shpData = Cesium.GeoJsonDataSource.load(data);

        shpData.then(function (dataSource) {
          _viewer.dataSources.add(dataSource).then((res) => {
            shpEntity = res;
          });
          var entities = dataSource.entities.values;
          var colorHash = {};
          _viewer._cesiumWidget._creditContainer.style.display = "none";
          for (var i = 0; i < entities.length; i++) {
            var entity = entities[i];
            var name = entity.name;
            var color = colorHash[name];
            if (!color) {
              color = Cesium.Color.fromRandom({
                alpha: 1,
              });
              colorHash[name] = color;
            }
          
            entity.polygon.classificationType =
              Cesium.ClassificationType.TERRAIN;
          

            entity.polygon.material = Cesium.Color.fromRandom({
              red: 0.1,
              maximumGreen: 0.5,
              minimumBlue: 1,
              alpha: 1,
            });

            entity.polygon.outline = true;
            entity.polygon.outlineColor = Cesium.Color.LIGHTGREEN.withAlpha(1);
            entity.polygon.outlineWidth = 15;
            //设置高度
            entity.polygon.extrudedHeight = 5;
            //计算生成polygon的中心位置
            var polyPositions = entity.polygon.hierarchy.getValue(
              Cesium.JulianDate.now()
            ).positions;
            var polyCenter =
              Cesium.BoundingSphere.fromPoints(polyPositions).center;
            polyCenter =
              Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
            entity.position = polyCenter;
            
          }
        });
        _viewer.flyTo(shpData);
      });

文章来源地址https://www.toymoban.com/news/detail-517603.html

到了这里，关于vue中使用cesium 加载shp文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！