建设用地点聚合

src/components/map/index.vue

@@ -1,34 +1,24 @@
 <template>
   <el-container class="cim-map el-main">
-    <component
-        :is="initMap"
-        :opening-animation="true"
-        :after-initviewer="removeLoad"
-    />
-    <LayerTreeLocal
-        v-if="roleInfo.mapVisible"
-        :server="MAP_SERVER"
-        ref="layerTreeLocal"
-        :location="roleInfo.areaVisible"
-        :layersVisible="roleInfo.layersVisible"
-        @change-basemap="handlerChangeBasemap"
-        @on-add-layer="handlerLoadWebServer"
-        @on-del-layer="handlerDelLayer"
-        @on-layer-fly="handlerFlyTo"
-        @handle-tool="handlerTool"
-        @on-opacity-change="handlerChangeLayerOpecity"
-    />
-    <div class="cim-compon" style="position: absolute;top: 150px" :style="{'left': roleInfo.positionLeft + 'px' }" v-drag v-if="roleInfo.slotview">
+    <component :is="initMap" :opening-animation="true" :after-initviewer="removeLoad" />
+    <LayerTreeLocal v-if="roleInfo.mapVisible" :server="MAP_SERVER" ref="layerTreeLocal"
+      :location="roleInfo.areaVisible" :layersVisible="roleInfo.layersVisible" @change-basemap="handlerChangeBasemap"
+      @on-add-layer="handlerLoadWebServer" @on-del-layer="handlerDelLayer" @on-layer-fly="handlerFlyTo"
+      @handle-tool="handlerTool" @on-opacity-change="handlerChangeLayerOpecity" />
+    <div class="cim-compon" style="position: absolute;top: 150px" :style="{'left': roleInfo.positionLeft + 'px' }"
+      v-drag v-if="roleInfo.slotview">
       <img class="cim-component-close-img" @click="componentClose" src="/images/closex.png" alt="">
       <component :is="roleInfo.slotview"></component>
     </div>
     <!-- <component  is="Sm3dMvtlayerStyle"></component> -->
 
     <!-- 气泡HTML -->
-    <div class="bubblecontainer" :style="{'bottom':roleInfo.bubbleBottom,'left':roleInfo.bubbleLeft}" v-if="roleInfo.BubbleShow">
+    <div class="bubblecontainer" :style="{'bottom':roleInfo.bubbleBottom,'left':roleInfo.bubbleLeft}"
+      v-if="roleInfo.BubbleShow">
       <div id="tools" style="height:25px;">
         <span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">详情</span>
-            <span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;right: 10px;top: 4px;" @click="closeBubble">
+        <span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;right: 10px;top: 4px;"
+          @click="closeBubble">
           <img style="width: 20px;height: 20px;" src="/images/closex.png" />
         </span>
       </div>
@@ -57,7 +47,8 @@
           </table>
         </div>
     </div> -->
-    <objectDia :tabledia="roleInfo.tableDataList" :isShowImg="roleInfo.xihuluimg" :visible="roleInfo.posVisible" @handleObject="handleObject" v-if="roleInfo.MVTBubbleShow&&roleInfo.posVisible"></objectDia>
+    <objectDia :tabledia="roleInfo.tableDataList" :isShowImg="roleInfo.xihuluimg" :visible="roleInfo.posVisible"
+      @handleObject="handleObject" v-if="roleInfo.MVTBubbleShow&&roleInfo.posVisible"></objectDia>
     <!-- 房屋信息 -->
     <div style="position: absolute;z-index: 9;right: 100px;top: 150px;" v-if="roleInfo.houseInfoIsShow">
       <houseInfo @close="roleInfo.houseInfoIsShow = false"></houseInfo>
@@ -77,13 +68,9 @@
     </div>
   </el-container>
   <!-- 行政区划 -->
-  <el-select v-model="roleInfo.villageValue" class="m-2 villageDia" placeholder="Select" @change="villageChange" :style="{'right':roleInfo.posVisible?'450px':'50px'}">
-    <el-option
-      v-for="item in roleInfo.allVillageData"
-      :key="item.name"
-      :label="item.name"
-      :value="item.name"
-    />
+  <el-select v-model="roleInfo.villageValue" class="m-2 villageDia" placeholder="Select" @change="villageChange"
+    :style="{'right':roleInfo.posVisible?'450px':'50px'}">
+    <el-option v-for="item in roleInfo.allVillageData" :key="item.name" :label="item.name" :value="item.name" />
   </el-select>
   <Loading />
 </template>
@@ -260,7 +247,7 @@ export default defineComponent({
           { lng: '118.46936463606109', lat: '35.14059201135111', name: '小张家寨子村' },
           { lng: '118.4439030631636', lat: '35.142186348648444', name: '陈家庄村' },
         ],
-
+        dataSource: new Cesium.CustomDataSource("dian"),
       })
       const route = useRoute();
       watch(
@@ -657,6 +644,8 @@ export default defineComponent({
           })
         },
         handleBuildAreaLabel() {
+          viewer.dataSources.add(data.dataSource)
+
           let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
           handler.setInputAction(function (event) {
 
@@ -679,6 +668,7 @@ export default defineComponent({
 
           data.buildMarkArr.forEach((item, index) => {
             viewer.entities.remove(data.buildMarkArr[index])
+            data.dataSource.entities.remove(data.buildMarkArr[index])
           })
           let list = JianSheYongDiGeoJson.features
           let canvasArr = []
@@ -722,11 +712,64 @@ export default defineComponent({
                 },
               })
               data.buildMarkArr.push(entity);
-              viewer.entities.add(entity);
+              // viewer.entities.add(entity);
+              data.dataSource.entities.add(entity);
             }
           }
+          methods.combineListener()
+        },
+        //点聚合功能实现 
+        combineListener() {
+          console.log("combineListener")
+          data.dataSource.clustering.enabled = true;
+          data.dataSource.clustering.pixelRange = 60;
+          data.dataSource.clustering.minimumClusterSize = 2;
+
+          data.dataSource.clustering.clusterEvent.addEventListener(function (
+            clusteredEntities,
+            cluster
+          ) {
+            // 关闭自带的显示聚合数量的标签
+            cluster.label.show = false;
+            cluster.billboard.show = true;
+            cluster.billboard.id = cluster.label.id;
+            cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
+            cluster.billboard.image = combineIconAndLabel(
+              "/images/community.png",
+              clusteredEntities.length,
+              64
+            );
+            cluster.billboard.width = 50;
+            cluster.billboard.height = 50;
+          });
+          // 创建画布对象
+          function combineIconAndLabel(url, label, size) {
+            // 创建画布对象
+            let canvas = document.createElement("canvas");
+            canvas.width = size;
+            canvas.height = size;
+            let ctx = canvas.getContext("2d");
+            let promise = new Cesium.Resource.fetchImage(url).then((image) => {
+              // 异常判断
+              try {
+                ctx.drawImage(image, 0, 0);
+              } catch (e) {
+                console.log(e);
+              }
+
+              // 渲染字体
+              // font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
+              ctx.fillStyle = Cesium.Color.BLACK.toCssColorString();
+              ctx.font = "bold 20px Microsoft YaHei";
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(label, size / 2-8, size / 2-4);
+
+              return canvas;
+            });
+            return promise;
+          }
         },
- 
         getDictionarySortData() {
           let param = {
             page: 1,
@@ -1256,6 +1299,7 @@ export default defineComponent({
             if (obj.name == '建设用地') {
               data.buildMarkArr.forEach((item, index) => {
                 viewer.entities.remove(data.buildMarkArr[index])
+                data.dataSource.entities.remove(data.buildMarkArr[index])
               })
               data.buildMarkArr = []
             }
@@ -2440,6 +2484,7 @@ export default defineComponent({
     cursor: pointer;
     box-shadow: 2px 2px 6px rgba(26, 26, 26, 0.5);
   }
+
   .bubblecontainer:after {
     content: "";
     position: absolute;
@@ -2451,6 +2496,7 @@ export default defineComponent({
     display: block;
     width: 0;
   }
+
   .cim-component-close-img {
     position: absolute;
     left: 10px;
@@ -2460,11 +2506,13 @@ export default defineComponent({
   }
 
   /* Border styles */
-#tab thead, #tab tr {
+  #tab thead,
+  #tab tr {
     border-top-width: 1px;
     border-top-style: solid;
     border-top-color: rgb(211, 202, 221);
   }
+
   #tab {
     border-bottom-width: 1px;
     border-bottom-style: solid;
@@ -2474,7 +2522,8 @@ export default defineComponent({
   }
 
   /* Padding and font style */
-#tab td, #tab th {
+  #tab td,
+  #tab th {
     padding: 5px 10px;
     font-size: 12px;
     font-family: Verdana;
@@ -2486,6 +2535,7 @@ export default defineComponent({
   #tab tr:nth-child(even) {
     background: rgba(223, 216, 232, 0.8)
   }
+
   #tab tr:nth-child(odd) {
     background: rgba(255, 255, 255, 0.8);
   }
@@ -2493,6 +2543,7 @@ export default defineComponent({
   ::v-deep #echarts_box {
     position: fixed !important;
   }
+
   .villageDia {
     position: absolute;
     z-index: 9;
@@ -2505,10 +2556,10 @@ export default defineComponent({
     background: rgba(0, 0, 0, 0.2);
     border-color: #409eff;
   }
+
   ::v-deep .el-input__inner {
     box-shadow: 0 0 0 1px #409eff inset;
   }
-
 </style>
 <style>
   .el-input__wrapper {
@@ -2516,6 +2567,7 @@ export default defineComponent({
     border: 1px solid #409eff !important;
     box-shadow: none !important;
   }
+
   input:focus {
     border: none !important;
   }
@@ -2543,10 +2595,12 @@ input:focus{
     background: rgba(64, 158, 255, 0.4);
     border: 0px;
   }
+
   .el-select__popper.el-popper {
     background: none !important;
     border: none !important;
   }
+
   .el-select-dropdown__item {
     background-color: transparent;
     color: #fff;
@@ -2557,9 +2611,11 @@ input:focus{
     color: #fff;
     background: rgba(6, 237, 248, 0.2);
   }
+
   .el-select-dropdown__item.selected {
     color: #06EDF8;
   }
+
   .el-popper__arrow::before {
     display: none;
   }