cesium笔记-vue渲染地图_bigemap能渲染矢量瓦片-优快云博客

1.安装 cesiumLab，用来发布地图瓦片服务, Cesium实验室官网，完成后进入http://localhost:9003 ，浏览器访问。

2.安装bigemap，用来下载地图瓦片，BIGEMAP_卫星影像地图处理_高清卫星地图_航拍影像地图_矢量数据_专题地图制作。

打开bigemap，选择行政区域，下载拼接的地图文件，

在 cesiumLab进行影像切片，存储类型为散列。

完成后在分发服务，常规影像可以找到已分发的瓦片服务。

使用的cesium版本，1.71.0，vue-cli3

使用vue-cli-plugin-cesium 插件构建cesium环境，

https://www.npmjs.com/package/vue-cli-plugin-cesium，

添加地图区域

  <div class="map-box">
    <div id="cesiumContainer"></div>
  </div>

初始化地图


        this.viewer = new Cesium.Viewer('cesiumContainer', {
          animation: false,//是否显示动画控件
          baseLayerPicker: true,//是否显示图层选择控件
          geocoder: true,
          timeline: false,
          sceneModePicker: true,
          navigationHelpButton: false,
          infoBox: true,
          imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: 'http://localhost:9003/image/wmts/H90VLwHy/{z}/{x}/{y}',
            fileExtension: 'png'
          })
        });

定位初始化位置和高度

        this.viewer.camera.setView({
          // fromDegrees()方法，将经纬度和高程转换为世界坐标
          destination:Cesium.Cartesian3.fromDegrees(lng, lat, 15000.0),
          orientation:{
          }
        });

其他：点击获取经纬度使用


        let scene = this.viewer.scene;
        let ellipsoid = scene.globe.ellipsoid;
        let entity = this.viewer.entities.add({
          label : {
            show : false
          }
        });
        let longitudeString = null;
        let latitudeString = null;
        let height = null;
        let cartesian = null;
        let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
        let that=this
        handler.setInputAction(function(movement) {
          cartesian = that.viewer.camera.pickEllipsoid(movement.position, ellipsoid);
          if (cartesian) {
            let cartographic = ellipsoid.cartesianToCartographic(cartesian);
            longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
            latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
            console.log( longitudeString + ', ' + latitudeString)
          }else {
            entity.label.show = false;
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

渲染地形

this.viewer =  new Cesium.Viewer('cesiumContainer',{terrainProvider:Cesium.createWorldTerrain() })

也渲染使用cesiumLab发布的地形服务

        const terrainProvider = new Cesium.CesiumTerrainProvider({
          url: "http://localhost:9003/terrain/qHvAwLAx/"
        });

        this.viewer =  new Cesium.Viewer('cesiumContainer', {
          animation: false,//是否显示动画控件
          baseLayerPicker: true,//是否显示图层选择控件
          geocoder: true,
          timeline: false,
          sceneModePicker: true,
          navigationHelpButton: false,
          infoBox: true,
          terrainProvider:terrainProvider,
          imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: 'http://localhost:9003/image/wmts/H90VLwHy/{z}/{x}/{y}',
            fileExtension: 'png'
          }),
        })

加载3D模型

        let scene = this.viewer.scene;
        let modelMatrix=Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(this.lng, this.lat, 100))
        let model = scene.primitives.add(Cesium.Model.fromGltf({
          url : '../../models/dog.glb',
          modelMatrix : modelMatrix,
          scale : 10000000
        }));