Pārlūkot izejas kodu

智能选址前端修改

liutao 3 mēneši atpakaļ
vecāks
revīzija
5f79e8cad1

+ 109 - 89
web_ui/src/views/industrial-land/AiIndustriaLandDetail.vue

@@ -1118,107 +1118,114 @@ export default {
     },
     //路线绘制
     goPointMark(item) {
-      var center = item.cp;
+      var center = item.center;
       var cp = item.cp;
       if (this.markerLayer) {
         this.map.removeLayer(this.markerLayer);
         this.markerLayer = null;
       }
       if (center != "") {
-        var centerList = center.split(",");
+        var centerList = cp.split(",");
+        var className = "point-end-icon";
+        var myIcon = L.divIcon({
+          className: className,
+          //图标大小
+          iconSize: [32, 32],
+        });
+
         this.markerLayer = L.marker([centerList[1], centerList[0]], {
-          icon: L.icon({
-            iconUrl: "/assets/image/staticImage/icon-end.png", // 标点图标地址
-            iconSize: [50, 50], // 图标大小
-          }),
+          icon: myIcon
         })
           .addTo(this.map)
           .bindPopup(item.name);
-        if (this.dkGeo) {
-          const bounds = L.latLngBounds();
-          bounds.extend(this.dkGeo.getBounds());
-          var pointLng = L.latLngBounds([[centerList[1], centerList[0]]]);
-          bounds.extend(pointLng);
-          // this.map.fitBounds(bounds);
-          this.map.fitBounds(bounds, { padding: [10, 10] });
-          if (this.zoom == 0) {
-            this.zoom = this.map.getZoom();
-          }
-        } else {
-          let query =
-            window.ApplicationConfig.landUrl +
-            "/0/query?where=id=" +
-            this.activeItem.id +
-            "&" +
-            "geometryType=esriGeometryPoint&inSR=4490&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&" +
-            "maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&" +
-            "outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&f=json";
-          axios.get(query).then((data) => {
-            console.log(data);
-            if (data.data.features.length < 1) {
-              return;
-            }
-            this.land = data.data.features[0].attributes;
-            var geojson = arcgisToGeoJSON(data.data.features[0].geometry);
-            var geos = L.geoJSON(geojson, {
-              style: function (feature) {
-                return { color: "#3BA5FF" };
-              },
-            });
-            this.dkGeo = geos;
-            this.dkGeoJson = geojson;
-            const bounds = L.latLngBounds();
-            bounds.extend(geos.getBounds());
-
-            var pointLng = L.latLngBounds([[centerList[1], centerList[0]]]);
-            bounds.extend(pointLng);
-            this.map.fitBounds(bounds, { padding: [10, 10] });
-            if (this.zoom == 0) {
-              this.zoom = this.map.getZoom();
-            }
-          });
-        }
+        // if (this.dkGeo) {
+        //   const bounds = L.latLngBounds();
+        //   bounds.extend(this.dkGeo.getBounds());
+        //   var pointLng = L.latLngBounds([[centerList[1], centerList[0]]]);
+        //   bounds.extend(pointLng);
+        //   // this.map.fitBounds(bounds);
+        //   this.map.fitBounds(bounds, { padding: [10, 10] });
+        //   if (this.zoom == 0) {
+        //     this.zoom = this.map.getZoom();
+        //   }
+        // } else {
+        //   let query =
+        //     window.ApplicationConfig.landUrl +
+        //     "/0/query?where=id=" +
+        //     this.activeItem.id +
+        //     "&" +
+        //     "geometryType=esriGeometryPoint&inSR=4490&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&" +
+        //     "maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&" +
+        //     "outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&f=json";
+        //   axios.get(query).then((data) => {
+        //     console.log(data);
+        //     if (data.data.features.length < 1) {
+        //       return;
+        //     }
+        //     this.land = data.data.features[0].attributes;
+        //     var geojson = arcgisToGeoJSON(data.data.features[0].geometry);
+        //     var geos = L.geoJSON(geojson, {
+        //       style: function (feature) {
+        //         return { color: "#3BA5FF" };
+        //       },
+        //     });
+        //     this.dkGeo = geos;
+        //     this.dkGeoJson = geojson;
+        //     const bounds = L.latLngBounds();
+        //     bounds.extend(geos.getBounds());
+
+        //     var pointLng = L.latLngBounds([[centerList[1], centerList[0]]]);
+        //     bounds.extend(pointLng);
+        //     this.map.fitBounds(bounds, { padding: [10, 10] });
+        //     if (this.zoom == 0) {
+        //       this.zoom = this.map.getZoom();
+        //     }
+        //   });
+        // }
       }
       //路线
-      var token = window.ApplicationConfig.tk;
-      let that = this;
-      // var token = "6dfd31e3b55a8466f34997aee5551a9c";
-      var routerUrl = window.ApplicationConfig.routeUrl;
-      var url = `${routerUrl}{"orig":"${center}","dest":"${cp}","style":"1"}&type=search&tk=${token}`;
-      axios.get(url).then((res) => {
-        if (res.data) {
-          if (that.polyline) {
-            that.map.removeLayer(that.polyline);
-          }
-          var data = res.data
-            .substring(
-              res.data.indexOf("<routelatlon>") + 13,
-              res.data.indexOf("</routelatlon>")
-            )
-            .split(";");
-          data = data.slice(0, data.length - 1);
-          var latlngs = [];
-          data.forEach((item) => {
-            var i = item.split(",").reverse();
-            latlngs.push(i);
-          });
-          that.polyline = L.polyline(latlngs, { color: "red" }).addTo(that.map);
-          // that.map.fitBounds(that.polyline.getBounds());
-          if (latlngs.length >= 20) {
-            if (item.unit == "km" && item.distance >= 1.7) {
-              that.map.setZoom(that.zoom - 3);
-              if (latlngs.length >= 30) {
-                that.map.setZoom(that.zoom - 4);
-              }
-            } else {
-              that.map.setZoom(that.zoom - 2);
-            }
-          } else {
-            that.map.setZoom(that.zoom - 1);
-          }
-          that.$refs.znxz.showDistance(item);
-        }
-      });
+      // var token = window.ApplicationConfig.tk;
+      // let that = this;
+      // // var token = "6dfd31e3b55a8466f34997aee5551a9c";
+      // var routerUrl = window.ApplicationConfig.routeUrl;
+      // console.log(routerUrl);
+      // var url = `${routerUrl}{"orig":"${center}","dest":"${cp}","style":"1"}&type=search&tk=${token}`;
+      // axios.get(url).then((res) => {
+      //   if (res.data) {
+      //     if (that.polyline) {
+      //       that.map.removeLayer(that.polyline);
+      //     }
+      //     var data = res.data
+      //       .substring(
+      //         res.data.indexOf("<routelatlon>") + 13,
+      //         res.data.indexOf("</routelatlon>")
+      //       )
+      //       .split(";");
+      //     data = data.slice(0, data.length - 1);
+      //     var latlngs = [];
+      //     data.forEach((item) => {
+      //       var i = item.split(",").reverse();
+      //       latlngs.push(i);
+      //     });
+      //     that.polyline = L.polyline(latlngs, { color: "red" }).addTo(that.map);
+      //     // that.map.fitBounds(that.polyline.getBounds());
+      //     if (latlngs.length >= 20) {
+      //       if (item.unit == "km" && item.distance >= 1.7) {
+      //         that.map.setZoom(that.zoom - 3);
+      //         if (latlngs.length >= 30) {
+      //           that.map.setZoom(that.zoom - 4);
+      //         }
+      //       } else {
+      //         that.map.setZoom(that.zoom - 2);
+      //       }
+      //     } else {
+      //       that.map.setZoom(that.zoom - 1);
+      //     }
+      //     that.$refs.znxz.showDistance(item);
+      //   }
+      // });
+    
+    
     },
     //所有地块仿百度地图绘制
     showXgdkCenterPoint() {
@@ -2525,6 +2532,19 @@ export default {
 </style>
 
 <style>
+.point-end-icon {
+  width: 36px !important;
+  height: 42px !important;
+  text-align: center !important;
+  font-size: 14px;
+  padding-top: 8px;
+  color: white;
+  font-weight: 400;
+  cursor: pointer;
+  background: url("~@/assets/image/staticImage/icon-end.png");
+  background-size: cover;
+}
+
 .point-div-icon {
   /*width: 36px !important;
   height: 52px !important; */

+ 19 - 6
web_ui/src/views/industrial-land/ZnxzDetail.vue

@@ -214,7 +214,6 @@
                   <div class="t-item">
                     <div class="th c1">地类名称</div>
                     <div class="th t2 c6">占用面积(亩)</div>
-                    <!-- <div class="th c1">开发边界外面积(亩)</div> -->
                   </div>
                   <div
                     class="t-item"
@@ -222,7 +221,6 @@
                     :key="index"
                     :class="{ border: index == xzfxList.length - 1 }"
                   >
-                    <!-- <div class="td c2">{{ index + 1 }}</div> -->
                     <div class="td c1">{{ item.name }}</div>
                     <div class="td c6 t2">{{ item.value }}</div>
                   </div>
@@ -252,14 +250,14 @@
               <div class="table">
                 <div class="table-con">
                   <div class="t-item">
-                    <div class="th c1">地类名称</div>
+                    <div class="th c1">类别</div>
                     <div class="th t2 c6">占用面积(亩)</div>
                   </div>
                   <div
                     class="t-item"
-                    v-for="(item, index) in ghfxList"
+                    v-for="(item, index) in sqsxList"
                     :key="index"
-                    :class="{ border: index == ghfxList.length - 1 }"
+                    :class="{ border: index == sqsxList.length - 1 }"
                   >
                     <div class="td c1">{{ item.name }}</div>
                     <div class="td c6 t2">{{ item.value }}</div>
@@ -992,6 +990,20 @@ export default {
           value: 0,
         },
       ],
+      sqsxList: [
+        {
+          name: "永久基本农田",
+          value: 0,
+        },
+        {
+          name: "城镇开发边界",
+          value: 0,
+        },
+        {
+          name: "生态保护红线",
+          value: 0,
+        }
+      ],
       sexColors: ["#1684FC", "#FF7357"],
       sexData: [
         { value: 0, name: "男性" },
@@ -1088,7 +1100,8 @@ export default {
     goLocationByCenter(item) {
       console.log("goLocationByCenter");
       console.log(item);
-      item.cp = this.center;
+      item.center = this.markercenter[0] + "," + this.markercenter[1];
+      item.cp = item.location.lng + "," + item.location.lat;
       this.$emit("location", item);
     },
     parkDetail(item) {