提交

src/components/supermap-2.5d.vue

@@ -1,7 +1,8 @@
 <template>
-    <div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;">
+    <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;">
 
     </div>
+
 </template>
 <script>
   import {
@@ -10,66 +11,132 @@
 	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, //绘图控件
-        mapDivId: 'cesium-container',
+
         /*************************原地图属性*********************/
       }
 		},
 		watch: {
     },
 		mounted() {
-      let that = this
-      that.mapDivId = that.mapDiv == null ? 'cesium-container':that.mapDiv;
-      that.viewer = new Cesium.Viewer(that.mapDivId)
-      //添加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'
-      // }));
-
-      that.scene = that.viewer.scene;
-      that.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';
-      that.scene.open(urlStr);
-
-      //将三维球定位到指定位置，camera是相机，是当前视野范围相机
-      //destination是相机的目标位置，参数是经度、纬度、高度
-      //orientation是相机朝向
-      //    heading-代表镜头左右方向,正值为右,负值为左
-      //    pitch-代表镜头上下方向,正值为上,负值为下.
-      //    roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜
-      that.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() {
-          // 定位完成之后的回调函数
-
-        }
-      });
-    },
-		props: {
-      mapDiv:null
+      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();
@@ -79,10 +146,9 @@
        */
       setMarkers(makerList){
         let that = this;
-        that.handler = new Cesium.ScreenSpaceEventHandler(that.scene.canvas);
+        that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
         clearInterval(that.aac);
         for (let i in makerList) {
-
           let longitude = makerList[i].lng;
           let latitude = makerList[i].lat;
           that.viewer.entities.add({
@@ -105,105 +171,6 @@
         that.createRightClickDescription();
       },
       /**
-       * 地图落点
-       */
-      setMarkersRadius(makerList){
-        let that = this;
-        that.handler = new Cesium.ScreenSpaceEventHandler(this.scene.canvas);
-        clearInterval(that.aac);
-        that.scene = that.viewer.scene;
-       //  let carmodel1;
-        let carmodel=[];
-       //
-       //  let carmodel2;
-       //  let carmodel3;
-       //
-       //  console.log("tianjia")
-       //
-       // carmodel1 =that.viewer.entities.add({
-       //    position: Cesium.Cartesian3.fromDegrees(123.853741,43.469578),
-       //    ellipse: {
-       //      semiMinorAxis:3000,
-       //      semiMajorAxis: 3000,
-       //      height: 0.0,
-       //      material: Cesium.Color.RED.withAlpha(0.5),
-       //      outline: true,
-       //      outlineColor: Cesium.Color.BLUE.withAlpha(1),
-       //      outlineWidth: 10,
-       //      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-       //    },
-       //
-       //  });
-       //
-       //   carmodel2= that.viewer.entities.add({
-       //    position: Cesium.Cartesian3.fromDegrees(124.461389, 43.026945),
-       //    ellipse: {
-       //      semiMinorAxis:6000,
-       //      semiMajorAxis:6000,
-       //      material: Cesium.Color.GREEN.withAlpha(1),
-       //      outline: true,
-       //      outlineColor: Cesium.Color.BLUE.withAlpha(1),
-       //      outlineWidth: 10,
-       //      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-       //    },
-       //
-       //  });
-       //
-       //  carmodel3= that.viewer.entities.add({
-       //    position: Cesium.Cartesian3.fromDegrees(123.805063, 43.720459),
-       //    ellipse: {
-       //      semiMinorAxis: 9000,
-       //      semiMajorAxis:9000,
-       //      material: Cesium.Color.BLACK.withAlpha(1),
-       //      outline: true,
-       //      outlineColor: Cesium.Color.BLUE.withAlpha(1),
-       //      outlineWidth: 10,
-       //      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-       //    },
-       //
-       //  });
-       //
-       //  console.log( carmodel2)
-
-
-        for (let i in makerList) {
-          let longitude = makerList[i].lng;
-          let latitude = makerList[i].lat;
-          console.log(longitude)
-          console.log(latitude)
-          carmodel[i] = that.viewer.entities.add({
-            position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
-            billboard: {
-              image: iconList[makerList[i].icon],
-              width: 48,
-              height: 48,
-              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-              disableDepthTestDistance:Number.POSITIVE_INFINITY
-            },
-            ellipse:{
-              show: true,
-              semiMinorAxis:makerList[i].radius,
-              semiMajorAxis: makerList[i].radius,
-              height: 2.0,
-              material: Cesium.Color.RED.withAlpha(0),
-              outline: true,
-              outlineColor: Cesium.Color.BLUE.withAlpha(0.5),
-              outlineWidth: 2,
-              // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-            },
-            description: makerList[i].bindPopupHtml,
-            click: makerList[i].click,
-            parameter: makerList[i].parameter,
-          });
-        }
-
-
-
-        that.viewer.scene.globe.depthTestAgainstTerrain=false;
-        that.createLeftClickDescription();
-        that.createRightClickDescription();
-      },
-      /**
        *鼠标左击事件是原来的气泡
        */
       createLeftClickDescription() {
@@ -292,87 +259,5 @@
 <style lang="scss" scoped>
 	@import '@/assets/styles/base.scss';
 
-  input[type=checkbox] {
-    margin: 0px 4px 0 0px;
-  }
-
-  label {
-    display: inline-block;
-  }
-
-  .param-container {
-    border: none;
-  }
-
-  .titleBox {
-    margin-bottom: 0px;
-  }
-
-  .sm-div-graphic {
-    position: absolute;
-    color: #fff;
-    font-size: 14px;
-  }
-
-  #test .divpoint {
-    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
-    background-size: cover;
-    width: 128px;
-    height: 216px;
-  }
-
-  #test3 .divpoint {
-    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
-    background-size: cover;
-    width: 230px;
-    height: 150px;
-  }
-
-  #test .label-wrap {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    height: 50px;
-  }
-
-  #test3 .label-wrap {
-    padding-left: 100px;
-    padding-top: 8px;
-    box-sizing: border-box;
-  }
-
-  #test .pop-title {
-    color: #fff;
-    margin-top: 11px;
-    margin-bottom: 4px;
-    display: flex;
-    align-items: center;
-    font-size: 18px;
-  }
-
-
-  #test .data-li {
-    font-size: 14px;
-    margin-top: 15px;
-    margin-bottom: 5px;
-  }
-
-  #test3 .data-li {
-    font-size: 14px;
-    margin-top: 6px;
-  }
-
-  #test2 .divpoint {
-    background: url(../../public/SuperMap3D/examples/webgl/images/qipao1.png) no-repeat;
-    background-size: cover;
-    width: 116px;
-    height: 120px;
-  }
-
-  #test2 .label-wrap {
-    box-sizing: border-box;
-    padding-top: 10px;
-    padding-left: 51px;
-  }
 
 </style>

src/views/forest.vue

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

src/views/leader.vue

@@ -16,9 +16,9 @@
             <div class="i-list-con h-25">
               <div id="personnel-chart" style="width: 100%;height:12vh;"></div>
               <div class="d-l-con-icon">
-                <div class="icon-con w-50" :class="{on:iconCurrentIndex1==item.jobValue}"
+                <div class="icon-con w-50" :class="{on:iconCurrentIndex1==item.dict_sort}"
                      v-for="(item,index) in visuForestCloudRYBO"
-                     @click="getRyListByJob(item.jobValue)">
+                     @click="getRyListByJob(item.dict_sort,item.dictType)">
                   <div class="icon icon-mid el-icon-user"></div>
                   <div class="icon-text">
                     <h5>{{ item.job }}</h5>
@@ -78,7 +78,7 @@
           <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
             <div class="this-title">
-              <span>巡林任务</span>
+              <span>巡护任务</span>
               <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
             </div>
             <div class="i-list-con h-73">
@@ -172,7 +172,7 @@ export default {
   },
   data() {
     return {
-      iconCurrentIndex1: '1',
+      iconCurrentIndex1: '',
       listCurrentIndex1: '',
       listCurrentIndex2: '',
       //左右缩进
@@ -291,7 +291,7 @@ export default {
     // 获取人员信息（河长、路长、田长）
     getRyList() {
       let that = this
-      that.iconCurrentIndex1 = '1'
+      that.iconCurrentIndex1 = ''
       that.listCurrentIndex1 = ''
       that.listCurrentIndex2 = ''
       getRyList({leadType: "6"}).then(function (response) {
@@ -301,7 +301,7 @@ export default {
         that.personnelChart()
       })
     },
-    getRyListByJob(jobValue) {
+    getRyListByJob(jobValue,jobType) {
       let that = this
       that.listCurrentIndex1 = ''
       that.listCurrentIndex2 = ''
@@ -309,7 +309,7 @@ export default {
       that.name = ''
       that.peopleList = []
       that.peopleList2 = []
-      getRyListByJob({leadType: "6", dictType: jobValue}).then(function (response) {
+      getRyListByJob({leadType: "6", dictType: jobType}).then(function (response) {
         // console.log(JSON.stringify(response.data));
         that.peopleList = response.data
         that.peopleList2 = response.data
@@ -348,6 +348,7 @@ export default {
     },
     //点击左侧人员列表获取 巡林计划
     getPlanList(personId) {
+      this.listCurrentIndex1 = personId;
       if (this.personId == personId) {//当前人员已经被点击一次 不再重复加载
         return;
       }