智能选址前端

web_ui/src/views/industrial-land/AiIndustriaLandDetail.vue

@@ -238,6 +238,7 @@
           v-if="showDetail"
           ref="znxz"
           @toggle="toggleInfoTab"
+          @cluster="addClusterLayer"
           @gowkt="goWkt"
           @clear="clearMark"
           :item="detailData"
@@ -304,7 +305,6 @@ import wkt from "wellknown";
 import VueMarkdownIt from "vue-markdown-it";
 import landMethods from "@/api/land";
 import AIBtn from "@/components/AIBtn.vue";
-
 export default {
   components: {
     industrialTop,
@@ -319,6 +319,7 @@ export default {
   },
   data() {
     return {
+      nearMarkerList: [],
       radarScanStyle: {
         width: "100%",
         height: "100%",
@@ -1100,7 +1101,7 @@ export default {
       }
     },
     //详情页tab切换地图绘制相关清空
-    toggleInfoTab() {
+    toggleInfoTab(points) {
       if (this.markerLayer) {
         this.map.removeLayer(this.markerLayer);
         this.markerLayer = null;
@@ -1116,6 +1117,26 @@ export default {
         this.wktToGeojsonLayer = null;
       }
     },
+    addClusterLayer(points) {
+      this.nearMarkerList.forEach((ele) => {
+        this.map.removeLayer(ele);
+      });
+      this.nearMarkerList = [];
+      points.forEach((ele) => {
+        var className = "point-yellow-icon";
+        let ll=  String.fromCharCode(65+ele.letter)
+        var myIcon = L.divIcon({
+          html: "<div>" + ll + "<div>",
+          className: className,
+          //图标大小
+          iconSize: [28, 28],
+        });
+        var marker = L.marker([ele.latitude, ele.longitude], {
+          icon: myIcon,
+        }).addTo(this.map);
+        this.nearMarkerList.push(marker);
+      });
+    },
     //路线绘制
     goPointMark(item) {
       var center = item.center;
@@ -1132,12 +1153,15 @@ export default {
           //图标大小
           iconSize: [32, 32],
         });
+        this.nearMarkerList.forEach(ele=>{
 
-        this.markerLayer = L.marker([centerList[1], centerList[0]], {
-          icon: myIcon
-        })
-          .addTo(this.map)
-          .bindPopup(item.name);
+        });
+        this.map.flyTo([centerList[1], centerList[0]], 17);
+        // this.markerLayer = L.marker([centerList[1], centerList[0]], {
+        //   icon: myIcon,
+        // })
+        //   .addTo(this.map)
+        //   .bindPopup(item.name);
         // if (this.dkGeo) {
         //   const bounds = L.latLngBounds();
         //   bounds.extend(this.dkGeo.getBounds());
@@ -1224,8 +1248,6 @@ export default {
       //     that.$refs.znxz.showDistance(item);
       //   }
       // });
-    
-    
     },
     //所有地块仿百度地图绘制
     showXgdkCenterPoint() {
@@ -2545,6 +2567,28 @@ export default {
   background-size: cover;
 }
 
+.point-yellow-icon {
+  /*width: 36px !important;
+  height: 52px !important; */
+  width: 38px !important;
+  height: 38px !important;
+  text-align: center !important;
+  font-size: 14px;
+  padding-top: 8px;
+  color: white;
+  font-weight: 400;
+  cursor: pointer;
+  background: url("~@/assets/image/staticImage/icon-yellow.png");
+  background-size: cover;
+}
+
+.point-yellow-icon:hover {
+  width: 38px !important;
+  height: 38px !important;
+  background: url("~@/assets/image/staticImage/icon-green.png");
+  background-size: cover;
+}
+
 .point-div-icon {
   /*width: 36px !important;
   height: 52px !important; */

web_ui/src/views/industrial-land/ZnxzDetail.vue

@@ -298,7 +298,7 @@
                 @click="goLocationByCenter(item)"
               >
                 <div class="name">
-                  <div class="icon">{{ index + 1 }}</div>
+                  <div class="icon">{{ index |transNumber}}</div>
                   <div class="bt">{{ item.name }}</div>
                 </div>
                 <div class="value c" v-if="item.label">
@@ -392,10 +392,11 @@
               <div
                 class="c-item"
                 v-for="(item, index) in ggssTabs[ggssIndex].result"
+                @click="goLocationByCenter(item)"
                 :key="index"
               >
                 <div class="name">
-                  <div class="icon">{{ index | transNumber }}</div>
+                  <div class="icon">{{index | transNumber }}</div>
                   <div class="bt">{{ item.name }}</div>
                 </div>
                 <div class="value">
@@ -870,6 +871,31 @@ export default {
           value: "",
           key: "dklx",
         },
+        {
+          name: "容积率最小值",
+          value: "",
+          key: "plot_ratio_start",
+        },
+        {
+          name: "容积率最大值",
+          value: "",
+          key: "plot_ratio_end",
+        },
+        {
+          name: "单位能耗增加值",
+          value: "",
+          key: "unit_energy_comsumption_added",
+        },
+        {
+          name: "单位排放增加值",
+          value: "",
+          key: "unit_emission_added",
+        },
+        {
+          name: "亩均税收(万元/亩)",
+          value: "",
+          key: "tax",
+        },
         {
           name: "地块位置",
           value: "",
@@ -1002,7 +1028,7 @@ export default {
         {
           name: "生态保护红线",
           value: 0,
-        }
+        },
       ],
       sexColors: ["#1684FC", "#FF7357"],
       sexData: [
@@ -1418,6 +1444,7 @@ export default {
       let query = { title: name };
       let text = [query.title];
       let unit = 5000;
+      let that = this;
       switch (query.title) {
         case "高速":
           text = ["高速入口", "高速出口", "互通"];
@@ -1463,16 +1490,16 @@ export default {
         for (let i = 0; i < posts.length; i++) {
           if (posts[i].data.count != "0") {
             const tempresults = posts[i].data.pois;
-            tempresults.forEach((titem) => {
-              titem.letter = String.fromCharCode("A".charCodeAt() + tindex);
+            for (let i = 0; i < tempresults.length; i++) {
+              let titem = tempresults[i];
+              titem.letter = tindex;
               tindex++;
-
               const lnglat = titem.lonlat;
               const lng = lnglat.split(",")[0];
               const lat = lnglat.split(",")[1];
               titem.location = { lng: lng, lat: lat };
               featureResultsList.push(titem);
-            });
+            }
           }
         }
 
@@ -1487,6 +1514,17 @@ export default {
         });
         console.log(featureResultsList);
         targetList.result = featureResultsList;
+        let pointList = [];
+        featureResultsList.forEach((e) => {
+          
+          pointList.push({
+            latitude: e.location.lat,
+            longitude: e.location.lng,
+            letter: e.letter,
+          });
+        });
+        console.log(pointList);
+        that.$emit("cluster", pointList);
         // that.aroundInfolist = featureResultsList
         // that.initaroundGeometry(featureResultsList)
       });