.

src/components/supermap-2.5d.vue

@@ -1,39 +1,29 @@
 <template>
-  <div id="cesiumContainer" style="width: 100%; height: 100%;background: none;" />
-</template>
+    <div id="cesium-container" style="width: 100%; height: 100%;background: none;">
+
+    </div>
 
+</template>
 <script>
-import {
-  iconList,
-  getDeviceList
-} from '@/api/components/supermap.js'
-import Cookies from 'js-cookie'
-import { getConfigKey } from "@/api/system/config";
-export default {
-  name: 'supermap-2.5d',
-  data() {
-    return {
-      superMapRootUrl:null,
-      viewer:null,
-      scene:null,
-      handler:null,
-      pick:null,
-      back_position:null,
-      content:null,
-      mvtMap0:null,
-      shuixi_name:null,
-      mvtMap1:null,
-      mvtMap2:null,
-      mvtMap3:null,
-      road_name:null,
-      layer_xiangzhenjie_name:null,
-      markerboxEntity: [],//地图落点实体
-      connectBoxEntity: null,//地图线实体
-      graphicsBoxEntity: null,//地图面实体
-      markerboxEntityRadius: [],//地图落点实体
-      connectBoxEntityTwo: null,//地图线实体
-      /*************************原地图属性*********************/
-      isEditableLayers: false, //绘图控件
+  import {
+    iconList,
+  } from '@/api/components/supermap.js'
+	export default {
+		name: 'sookaSuperMap',
+		data() {
+			return {
+        viewer:null,
+        scene:null,
+        handler:null,
+
+        pick:null,
+        back_position:null,
+        content:null,
+        stkTerrainProvider:null,
+
+        aac:null,//定时
+        /*************************原地图属性*********************/
+        isEditableLayers: false, //绘图控件
 
       /*************************原地图属性*********************/
       aac:null,
@@ -167,7 +157,7 @@ export default {
           //isSct : false,//地形服务源自SuperMap iServer发布时需设置isSct为true
           invisibility:true
         }),
-        infoBox:true,
+        infoBox:false,
         navigation: false
       }, {
         contextOptions: {
@@ -356,92 +346,161 @@ export default {
       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;
-        that.viewer.entities.add({
-          name:"",
-          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
-          },
-          description: makerList[i].bindPopupHtml,
-          click: makerList[i].click,
-          parameter: makerList[i].parameter,
-        });
-      }
-      that.viewer.scene.globe.depthTestAgainstTerrain=false;
-      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);
-    },
-    /**
-     * 落点定位
-     */
-    dropLocation(lat, lng) {
-      this.viewer.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
-      });
-    },
-    /**
-     * 地图画线(贴地)
-     */
-    setConnectList(connectList,color,withAlpha) {
-      let that = this
-      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
-      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
-      that.connectBoxEntity = that.viewer.entities.add({
-        Type: 'Polyline',
-        polyline: {
-          positions: Cesium.Cartesian3.fromDegreesArray(connectList),
-          clampToGround: true,//贴地 true,不贴地  false
-          width: 5,
-          material: material
-        }
-      })
-    },
-    /**
-     * 地图图形(贴地)
-     */
-    setGraphicsList(graphicsList,color,withAlpha) {
-      let that = this
-      //Cesium.Color.fromCssColorString('#67ADDF')   16进制颜色设置
-
-      let material = Cesium.Color.fromCssColorString(color).withAlpha(withAlpha);
-      that.graphicsBoxEntity = that.viewer.entities.add({
-        polygon: {
-          hierarchy: Cesium.Cartesian3.fromDegreesArray(graphicsList),
-          clampToGround: true,//贴地 true,不贴地  false
-          width: 5,
-          material: material
+        for (let i in makerList) {
+          let longitude = makerList[i].lng;
+          let latitude = makerList[i].lat;
+          that.viewer.entities.add({
+            name:"",
+            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
+            },
+            description: makerList[i].bindPopupHtml,
+            click: makerList[i].click,
+            parameter: makerList[i].parameter,
+          });
         }
-      })
+        that.viewer.scene.globe.depthTestAgainstTerrain=false;
+        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);
+      },
+      /**
+       *鼠标右击事件是原来的点击
+       */
+      createRightClickDescription() {
+        let that = this;
+        that.handler.setInputAction(function (movement) {
+          // 监听鼠标的当前位置坐标，然后根据当前坐标去动态更新气泡窗口div的显示位置；
+          that.pick = that.viewer.scene.pick(movement.position);
+          if (that.pick && that.pick) {
+            let id = Cesium.defaultValue(that.viewer.scene.pick(movement.position).id, that.viewer.scene.pick(movement.position).primitive.id);
+            let clickName = id._click;
+            that.$emit(clickName, id._parameter)
+          }
+        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+      },
+      /**
+       * 落点定位
+       */
+      dropLocation(lat, lng) {
+        this.viewer.camera.flyTo({
+          destination: Cesium.Cartesian3.fromDegrees(lng, lat, 3000),
+        });
+      },
     }
-  },
-}
+	}
 </script>
+
+<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>