提交

src/components/supermap-2.5d.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="cesium-container" style="width: 100%; height: 100%;background: none;">
+    <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;">
 
     </div>
 
@@ -11,17 +11,20 @@
 	export default {
 		name: 'sookaSuperMap',
 		data() {
-			return {
+      return {
         viewer:null,
         scene:null,
         handler:null,
-
         pick:null,
         back_position:null,
         content:null,
-        stkTerrainProvider:null,
-
-        aac:null,//定时
+        mvtMap0:null,
+        shuixi_name:null,
+        mvtMap1:null,
+        mvtMap2:null,
+        mvtMap3:null,
+        road_name:null,
+        layer_xiangzhenjie_name:null,
         /*************************原地图属性*********************/
         isEditableLayers: false, //绘图控件
 
@@ -31,42 +34,109 @@
 		watch: {
     },
 		mounted() {
-      this.viewer = new Cesium.Viewer('cesium-container')
-      //添加SuperMap iServer发布的影像服务
-      // var layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
-      //   url: 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace'
-      // }));
-      // //添加SuperMap iServer发布的影像服务
-      // var layer1 = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
-      //   url: 'http://121.36.228.94:8090/iserver/services/map-spyx4326/rest/maps/dem'
-      // }));
-
-      this.scene = this.viewer.scene;
-      this.scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
-      var urlStr = 'http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace';
-      this.scene.open(urlStr);
-
-      //将三维球定位到指定位置，camera是相机，是当前视野范围相机
-      //destination是相机的目标位置，参数是经度、纬度、高度
-      //orientation是相机朝向
-      //    heading-代表镜头左右方向,正值为右,负值为左
-      //    pitch-代表镜头上下方向,正值为上,负值为下.
-      //    roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
-      this.viewer.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(124.5465087890625, 43.0869197845459, 25000),
-        orientation: {
-          heading :  Cesium.Math.toRadians(348.4202942851978),
-          pitch : Cesium.Math.toRadians(-30.74026687972041),
-          roll : Cesium.Math.toRadians(0)
-        },
-        complete:function callback() {
-          // 定位完成之后的回调函数
-
-        }
-      });
+      this.onload();
     },
 		props: {},
 		methods: {
+      onload() {
+        let that = this;
+        //1.添加地形数据
+        that.viewer = new Cesium.Viewer('cesiumContainer', {
+          //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
+          terrainProvider: new Cesium.CesiumTerrainProvider({
+            url: "http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace/datas/dem%40spyx4326",
+            //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
+            invisibility: true
+          }),
+          infoBox: true
+        }, {
+          contextOptions: {
+            msaaLevel: 4,
+            requestWebgl2: true
+          },
+          orderIndependentTranslucency: false
+        });
+        that.viewer.cesiumWidget.creditContainer.style.display = "none" // 去掉超图logo水印
+        this.scene = this.viewer.scene;
+        //2.添加SuperMap iServer发布的影像服务
+        let layer = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+          url: "http://121.36.228.94:8090/iserver/services/3D-sipingchangjing/rest/realspace/datas/siping_2m@spyx4326",
+        }));
+        //3.添加县界
+        // let layer_xianjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+        //   url : "http://121.36.228.94:8090/iserver/services/map-SIPING/rest/maps/XianJie",
+        // }));
+        //4.添加乡镇界
+        let layer_xiangzhenjie = that.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+          url: "http://121.36.228.94:8090/iserver/services/map-SIPING/rest/maps/XiangZhenJie",
+        }));
+        // //5.水系
+        // let shuixi = "http://121.36.228.94:8090/iserver/services/map-mvt-shuixiMian/restjsr/v1/vectortile/maps/shuixi_Mian";
+        // this.mvtMap0 = this.scene.addVectorTilesMap({
+        //   url: shuixi,
+        //   canvasWidth: 512,
+        //   name: 'mvt_map0',
+        //   viewer: this.viewer,
+        //   // show: true,
+        //   // selectedColor: new Cesium.Color(6, 169, 254, 0.5)
+        // });
+        // //6.林地
+        // let lindi = "http://121.36.228.94:8090/iserver/services/map-mvt-lindi/restjsr/v1/vectortile/maps/lindi";
+        // this.mvtMap1 = this.scene.addVectorTilesMap({
+        //   url: lindi,
+        //   canvasWidth: 512,
+        //   name: 'mvt_map1',
+        //   viewer: this.viewer,
+        //   show:true,
+        //   selectedColor:new Cesium.Color(6,169,254,0.5)
+        // });
+        // //7.农田
+        // let nongtian = "http://121.36.228.94:8090/iserver/services/map-mvt-nongtian/restjsr/v1/vectortile/maps/nongtian";
+        // this.mvtMap2 = this.scene.addVectorTilesMap({
+        //   url: nongtian,
+        //   canvasWidth: 512,
+        //   name: 'mvt_map2',
+        //   viewer: this.viewer,
+        //   show:true,
+        //   selectedColor:new Cesium.Color(6,169,254,0.5)
+        // });
+        // //8.路网
+        // let road = "http://121.36.228.94:8090/iserver/services/map-mvt-roadXian/restjsr/v1/vectortile/maps/road_Xian";
+        // this.mvtMap3 = this.scene.addVectorTilesMap({
+        //   url: road,
+        //   canvasWidth: 512,
+        //   name: 'mvt_map3',
+        //   viewer: this.viewer,
+        //   show:true,
+        //   selectedColor:new Cesium.Color(6,169,254,0.5)
+        // });
+        // //9.添加路网NAME
+        // this.road_name = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+        //   url : "http://121.36.228.94:8090/iserver/services/map-SIPING/rest/maps/road_Name",
+        //   show : false
+        // }));
+        // // 10.添加水系NAME
+        // this.shuixi_name = this.viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+        //   url: "http://121.36.228.94:8090/iserver/services/map-SIPING/rest/maps/shuixi_Name",
+        //   show: false
+        // }));
+
+        //11.添加乡镇界名称
+        let layer_xiangzhenjie_name = 'http://121.36.228.94:8090/iserver/services/3D-XiangZhenJie_Name/rest/realspace';
+        this.scene.open(layer_xiangzhenjie_name);
+
+        //    heading-代表镜头左右方向,正值为右,负值为左
+        //    pitch-代表镜头上下方向,正值为上,负值为下.
+        //    roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
+        that.viewer.camera.setView({
+          destination: Cesium.Cartesian3.fromDegrees(124.49980650138238, 43.428263986216815, 350000),
+          orientation: {
+            // heading :  Cesium.Math.toRadians(346.4202942851978),
+            // pitch : Cesium.Math.toRadians(-16.74026687972041),
+            // roll : Cesium.Math.toRadians(0)
+          }
+        });
+      },
       //移除之前添加的点
       clearM(){
         this.viewer.entities.removeAll();
@@ -106,25 +176,6 @@
       createLeftClickDescription() {
         let that = this;
         that.handler.setInputAction(function (movement) {
-          let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(movement.position).primitive.id);
-          if("传感器" == id._type){
-            that.aac = setInterval(function (){
-              let color = "green";
-              let value = Math.random();
-              let up = "▲";
-              let down = "▼";
-              if(value>0.5){
-                color = "red";
-                value = value +""+ up;
-              }else{
-                value = value +""+ down;
-              }
-              let html = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
-              window.parent.frames[0].document.querySelector(".cesium-infoBox-description").innerHTML = html;
-            },1000);
-          }else{
-            clearInterval(that.aac);
-          }
         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
       },
       /**
@@ -133,6 +184,7 @@
       setMarkers_cgq(makerList){
         let that = this;
         that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
+
         for (let i in makerList) {
           let longitude = makerList[i].lng;
           let latitude = makerList[i].lat;
@@ -149,11 +201,33 @@
             description: makerList[i].bindPopupHtml,
             click: makerList[i].click,
             parameter: makerList[i].parameter,
-            type:"传感器",
           });
         }
         that.viewer.scene.globe.depthTestAgainstTerrain=false;
-        that.createLeftClickDescription();
+        that.createLeftClickDescription_cgq();
+      },
+      /**
+       *鼠标左击事件是原来的气泡(传感器)
+       */
+      createLeftClickDescription_cgq() {
+        let that = this;
+        clearInterval(that.aac);
+        that.handler.setInputAction(function (movement) {
+          that.aac = setInterval(function (){
+            let color = "green";
+            let value = Math.random();
+            let up = "▲";
+            let down = "▼";
+            if(value>0.5){
+              color = "red";
+              value = value +""+ up;
+            }else{
+              value = value +""+ down;
+            }
+            let html = "<span style='color:"+color+"'>当前传感器数值:"+value+"</span>";
+            window.parent.frames[0].document.querySelector(".cesium-infoBox-description").innerHTML = html;
+          },1000);
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
       },
       /**
        *鼠标右击事件是原来的点击
@@ -185,4 +259,5 @@
 <style lang="scss" scoped>
 	@import '@/assets/styles/base.scss';
 
+
 </style>

src/views/forest.vue

@@ -839,8 +839,8 @@
         //左侧获取部门信息
         getBaseInfo().then(res => {
           if (res.code == 200) {
-            if (res.msg == '未找到部门信息') {
-              this.forestInfo = '未找到部门信息!'
+            if (res.msg == '未找到特色信息') {
+              this.forestInfo = '未找到特色信息!'
             } else {
               this.forestInfo = res.data.baseinfo //基本情况
             }