vue与cesium结合,并且展示图层等基本信息

忘れられたくない
1、环境构建

npm install -S cesium (必须加-S参数,否则出现引用错误)

2、引入文件

2.1首先将/node_modules/cesium/Build/Cesium 文件夹复制到 /public/static目录下 与下述buildModuleUrl 相结合,否则静态文件不会显示(比如图片等)

2.2文件引入

  1. import buildModuleUrl from "cesium/Source/Core/buildModuleUrl";
  2. import { Viewer } from "cesium/Source/Cesium";
  3. import * as Cesium from "cesium/Source/Cesium";
  4. import "cesium/Source/Widgets/widgets.css";
  5. buildModuleUrl.setBaseUrl("static/");
上述:
1和5为引入buildModuleUrl 并且设置cesium静态文件路径
2为引入cesium使用的核心类
3为cesium库
4为cesium的样式文件(必须引用)
3引入3D球体
     this.viewer = new Viewer("cesiumContainer", {
        //   需要进行可视化的数据源的集合
        animation: false, //是否显示动画控件
        shouldAnimate: true,
        homeButton: true, //是否显示Home按钮
        fullscreenButton: false, //是否显示全屏按钮
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        requestRenderMode: true, //启用请求渲染模式
        scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "gis2d/terrain/{z}/{x}/{y}.jpg"//地图瓦片
        })
      });
    this.viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权信息

image

4、设置相机缩放范围
//相机的高度的最小值
this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 250000; 
//相机高度的最大值
this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 12000000; 
// 设置相机缩小时的速率
this.viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; 
//设置相机放大时的速率
this.viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; 
5、定位
     this.viewer.camera.setView({
        // Cesium的坐标是以地心为原点,一向指向南美洲,一向指向亚洲,一向指向北极州
        // fromDegrees()方法,将经纬度和高程转换为世界坐标
        destination: Cesium.Cartesian3.fromDegrees(108.78, 31.04, 9000000)
        orientation: {
           // 指向
           heading: Cesium.Math.toRadians(90, 0),
           // 视角
           pitch: Cesium.Math.toRadians(-90),
           roll: 0.0
         }
      });  
6、添加中国地图,并以五大战区进行划分,用不同的颜色进行显示
   //使用GeoJsonDataSource加载json格式的数据
   var geojsonOptions = {
      clampToGround : true,//必须添加,否则添加实体对象会被覆盖
   };
   var dataSource = Cesium.GeoJsonDataSource.load("json/province.json",geojsonOptions );
      dataSource.then(data => {
        this.viewer.dataSources.add(data);
        var entities = data.entities.values;
        var colorHash = {};
        for (var i = 0; i < entities.length; i++) {
          var entity = entities[i];
          //通过theater判断属于哪个区块并且附上颜色
          var theater = entity.properties._theater._value;
          var name = entity.name;
          var color = colorHash[name];
          if (!color) {
            color =
              theater == "east"
                ? Cesium.Color.fromCssColorString("rgba(240,221,15,0.5)")
                : theater == "west"
                ? Cesium.Color.fromCssColorString("rgba(155,41,143,0.5)")
                : theater == "north"
                ? Cesium.Color.fromCssColorString("rgba(0,161,255,0.5)")
                : theater == "south"
                ? Cesium.Color.fromCssColorString("rgba(6,64,229,0.5)")
                : theater == "middle"
                ? Cesium.Color.fromCssColorString("rgba(42,171,25,0.5)")
                : Cesium.Color.fromCssColorString("rgba(241,3,24,0.5)");
            entity.polygon.material = color;
          }
        }
      });

image

7、添加实体类,显示名称及图标
   //请求获取要添加的实体数据
        this.$http.get("/json/assetsAll.json", {}).then(res => {
        res.data.forEach(item => {
          let labelInfo = this.viewer.entities.add(new Cesium.Entity());//添加实体类
          labelInfo.position = Cesium.Cartesian3.fromDegrees(//实体的位置
            parseInt(item.X),
            parseInt(item.Y),
            -100
          );
          labelInfo.label = {//实体展示的文字
            show: true,
            showBackground: false,//是否展示背景色
            fillColor: Cesium.Color.fromCssColorString("#000"),//设置字体颜色
            // backgroundColor: Cesium.Color.fromCssColorString("#000"),//设置字体背景色
            scale: 0.5, //这里非常巧妙的先将字体大小放大一倍在缩小一倍
            font: "normal 28px MicroSoft YaHei",
            text: item.stationName,
            pixelOffset: new Cesium.Cartesian2(-40, 25),//偏移量
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT
          };
          labelInfo.billboard = {//实体图标
            image: item.hasFaultAsset
              ? require("@/assets/img/location-blue-sm.png")
              : item.hasTask
              ? require("@/assets/img/location-red-sm.png")
              : require("@/assets/img/flag-red-sm.png"),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
          };
        });
      });
8、更换图层
this.viewer.imageryLayers.remove(this.viewer.imageryLayers.get(0));
this.viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: this.themeInfo.tilesUrl
    })
);
9、删除实体
//删除全部
this.viewer.entities.removeAll()
//id为添加实体时的id名称
let entID = viewer.entities.getById('id')
viewer.entities.remove(entID);
//获取所有实体
this.viewer.entities.values
阅读 1.4k
26 声望
4 粉丝
0 条评论
你知道吗?

26 声望
4 粉丝
文章目录
宣传栏