增加展示线、面类型的方法和逻辑

src/components/Currency/DataTable/MetadataListContainer/MetadataList.vue

@@ -255,6 +255,9 @@
                 <span v-if="scope.row.type == 0">点</span>
                 <span v-else-if="scope.row.type == 1">线</span>
                 <span v-else-if="scope.row.type == 2">面</span>
+                <span v-else-if="scope.row.type == 3">点</span>
+                <span v-else-if="scope.row.type == 4">线</span>
+                <span v-else-if="scope.row.type == 5">面</span>
               </div>
             </template>
           </el-table-column>

src/components/DataDisplay/LayerDisplay/Map.vue

@@ -24,7 +24,10 @@
           <div class="container">
             <ul>
               <li v-for="(item, index) in mapList" :key="index">
-                <p :class="['bg', item.class, { active: item.active }]" @click="changeMap(item)">
+                <p
+                  :class="['bg', item.class, { active: item.active }]"
+                  @click="changeMap(item)"
+                >
                   <span>{{ item.title }}</span>
                 </p>
               </li>
@@ -129,7 +132,7 @@ export default {
     };
   },
   components: {},
-  created() { },
+  created() {},
 
   mounted() {
     let that = this;
@@ -204,7 +207,11 @@ export default {
     // });
     // 监听地图变化时，缩放级别
     map.getView().on("change:center", function (e) {
-      let lonlat = transform(globalVariable.map.getView().getCenter(), "EPSG:3857", "EPSG:4326");
+      let lonlat = transform(
+        globalVariable.map.getView().getCenter(),
+        "EPSG:3857",
+        "EPSG:4326"
+      );
       that.$store.commit("setMouseLocation", [
         Number(lonlat[0].toFixed(6)),
         Number(lonlat[1].toFixed(6)),
@@ -214,14 +221,94 @@ export default {
       that.$store.commit("setZoom", e.target.getZoom());
     });
     // 图层选中事件
-    this.selectSingleClick = new Select();
+    this.selectSingleClick = new Select({
+      style: function (feature) {
+        let type = feature.getGeometry().getType();
+        if (feature.getProperties().properties.layerInfo) {
+          let layerInfo = feature.getProperties().properties.layerInfo;
+          let t = {
+            LineString: [
+              new Style({
+                stroke: new Stroke({
+                  color: [255, 255, 255, 1],
+                  width: layerInfo.lineWidth + 2,
+                }),
+              }),
+              new Style({
+                stroke: new Stroke({
+                  color: [0, 153, 255, 1],
+                  width: layerInfo.lineWidth,
+                }),
+              }),
+            ],
+            MultiLineString: [
+              new Style({
+                stroke: new Stroke({
+                  color: [255, 255, 255, 1],
+                  width: layerInfo.lineWidth + 2,
+                }),
+              }),
+              new Style({
+                stroke: new Stroke({
+                  color: [0, 153, 255, 1],
+                  width: layerInfo.lineWidth,
+                }),
+              }),
+            ],
+            Polygon: [
+              new Style({
+                stroke: new Stroke({
+                  color: [255, 255, 255, 1],
+                  width: layerInfo.lineWidth + 2,
+                }),
+              }),
+              new Style({
+                stroke: new Stroke({
+                  color: [0, 153, 255, 1],
+                  width: layerInfo.lineWidth,
+                }),
+              }),
+              new Style({
+                fill: new Fill({
+                  color: [255, 255, 255, 0.5],
+                }),
+              }),
+            ],
+            MultiPolygon: [
+              new Style({
+                stroke: new Stroke({
+                  color: [255, 255, 255, 1],
+                  width: layerInfo.lineWidth + 2,
+                }),
+              }),
+              new Style({
+                stroke: new Stroke({
+                  color: [0, 153, 255, 1],
+                  width: layerInfo.lineWidth,
+                }),
+              }),
+              new Style({
+                fill: new Fill({
+                  color: [255, 255, 255, 0.5],
+                }),
+              }),
+            ],
+          };
+          return t[type];
+        } else {
+          return;
+        }
+      },
+    });
     globalVariable.map.addInteraction(this.selectSingleClick);
     this.selectSingleClick.on("select", function (selectEvent) {
       let selectSingleClickFeatures = that.selectSingleClick.getFeatures();
       let selected = selectEvent.selected[0];
       if (!selected) return;
       if (selectEvent.target.getLayer(selectEvent.selected[0]) != null) {
-        switch (selectEvent.target.getLayer(selectEvent.selected[0]).values_.name) {
+        switch (
+          selectEvent.target.getLayer(selectEvent.selected[0]).values_.name
+        ) {
           case "singlepoint":
             if (selected.values_.callback) {
               selected.values_.callback(selected, selectSingleClickFeatures);
@@ -263,8 +350,9 @@ export default {
           default:
             if (selected.values_.callback) {
               selected.values_.callback(selected, selectSingleClickFeatures);
+            } else {
+              selectSingleClickFeatures.clear();
             }
-            selectSingleClickFeatures.clear();
             break;
         }
       } else {
@@ -577,7 +665,7 @@ export default {
     searchData(content, layerType) {
       let that = this;
       // 上传loading
-      const loading = this.$createLoading("数据获取中，请稍后！")
+      const loading = this.$createLoading("数据获取中，请稍后！");
       getLayerData(content, this.setPopup, loading)
         .then((result) => {
           let source = new VectorSource();

src/components/DataDisplay/LayerDisplay/Menu.vue

@@ -72,22 +72,39 @@
               <span style="float: right" v-if="data.geoType == 1">
                 <el-button
                   :class="[
-                    'singlepoint',
+                    'linestring',
                     {
                       active:
-                        data.singlepoint == undefined ||
-                        data.singlepoint == false
+                        data.lineString == undefined || data.lineString == false
                           ? false
                           : true,
                     },
                   ]"
-                  :title="'线数据加载'"
+                  :title="'线数据模式'"
                   type="text"
                   size="mini"
                   circle
                   @click="() => searchData(data, 'lineString', node)"
                 ></el-button>
               </span>
+              <span style="float: right" v-if="data.geoType == 2">
+                <el-button
+                  :class="[
+                    'polygon',
+                    {
+                      active:
+                        data.polygon == undefined || data.polygon == false
+                          ? false
+                          : true,
+                    },
+                  ]"
+                  :title="'面数据模式'"
+                  type="text"
+                  size="mini"
+                  circle
+                  @click="() => searchData(data, 'polygon', node)"
+                ></el-button>
+              </span>
             </div>
             <div v-else>
               <span class="title">{{ node.label }}</span>
@@ -174,16 +191,21 @@ export default {
     openStatisticalChart(node) {
       let that = this;
       if (node.data.chartIsShow) return;
-      this.$store.commit("setChartIsShow", false);
-      this.clearChartHighLight();
       let label = node.label;
       let data = node.data;
       const loading = this.$createLoading("统计数据分析获取中，请稍后！");
       this.searchStatisticalData(data.id, 2)
         .then((result) => {
           loading.close();
-          data.chartIsShow = true;
-          that.setChart(result, label);
+          if (result.length == 0) {
+            // this.$store.commit("setChartIsShow", false);
+            // this.clearChartHighLight();
+          } else {
+            that.$store.commit("setChartIsShow", false);
+            that.clearChartHighLight();
+            data.chartIsShow = true;
+            that.setChart(result, label);
+          }
         })
         .catch((err) => {
           loading.close();
@@ -360,7 +382,10 @@ export default {
                   params.data.areaCode
                 )
                 .then((result) => {
-                  that.setChart(result, label);
+                  if (result.length == 0) {
+                  } else {
+                    that.setChart(result, label);
+                  }
                 })
                 .catch((err) => {
                   that.$message({
@@ -374,7 +399,7 @@ export default {
       });
     },
 
-    // 点位数据
+    // 数据展示
     searchData(item, layerType, node) {
       item.classify = node.parent.label + "/" + node.label;
       let that = this;
@@ -599,7 +624,7 @@ export default {
     layerData: {
       immediate: true,
       handler(newVal, oldName) {
-        this.list = newVal;
+        this.list = JSON.parse(JSON.stringify(newVal));
         this.list = this.list.map(function (item) {
           item.title = item.name;
           item.show = true;
@@ -616,6 +641,15 @@ export default {
               case "Polygon":
                 item_.geoType = 2;
                 break;
+              case "MultiPoint":
+                item_.geoType = 0;
+                break;
+              case "MultiLineString":
+                item_.geoType = 1;
+                break;
+              case "MultiPolygon":
+                item_.geoType = 2;
+                break;
 
               default:
                 break;
@@ -623,6 +657,7 @@ export default {
           });
           return item;
         });
+        this.$store.dispatch("resetLayerControl", []);
       },
     },
   },
@@ -692,7 +727,9 @@ export default {
     }
     .singlepoint,
     .aggregation,
-    .heatmap {
+    .heatmap,
+    .linestring,
+    .polygon {
       width: 28px;
       height: 28px;
     }
@@ -709,6 +746,12 @@ export default {
       background: url(~@/assets/images/menu/heatmap1.png) center center
         no-repeat;
     }
+    .linestring {
+      background: url(~@/assets/images/menu/line.png) center center no-repeat;
+    }
+    .polygon {
+      background: url(~@/assets/images/menu/polygon.png) center center no-repeat;
+    }
     .singlepoint.active {
       background: url(~@/assets/images/menu/singlepoint_active1.png) center
         center no-repeat;
@@ -721,6 +764,14 @@ export default {
       background: url(~@/assets/images/menu/heatmap_active1.png) center center
         no-repeat;
     }
+    .linestring.active {
+      background: url(~@/assets/images/menu/line_active.png) center center
+        no-repeat;
+    }
+    .polygon.active {
+      background: url(~@/assets/images/menu/polygon_active.png) center center
+        no-repeat;
+    }
   }
 }
 </style>

src/components/DataDisplay/LayerDisplay/PlaceList.vue

@@ -1,9 +1,16 @@
 <template>
-  <div class="style_container dm_search" v-if="placeIsShow && resultList.length > 0">
+  <div
+    class="style_container dm_search"
+    v-if="placeIsShow && resultList.length > 0"
+  >
     <div class="container result_part">
       <div class="result_list">
         <ul>
-          <li v-for="(item, index) in resultList" :key="index" @click="location(item)">
+          <li
+            v-for="(item, index) in resultList"
+            :key="index"
+            @click="location(item)"
+          >
             <span>{{ item.name }}</span>
           </li>
         </ul>
@@ -52,7 +59,7 @@ export default {
       source: null,
     };
   },
-  mounted() { },
+  mounted() {},
   methods: {
     search() {
       let that = this;
@@ -201,7 +208,7 @@ export default {
       that.$root.popup_content.html(
         `<div>名称：${properties.name}</div>
          <div>地址：${properties.address}</div>
-         <div>电话：${properties.phone}</div>
+         <div>电话：${properties.phone ? properties.phone : "无"}</div>
         `
       );
       that.$root.popup_setPositionAndRelocation(position);
@@ -280,7 +287,7 @@ export default {
         background-color: transparent !important;
       }
       /deep/ .el-pager li {
-        background-color: transparent!important;
+        background-color: transparent !important;
       }
     }
   }

src/utils/getLayerDataAndCreateFeatures.js

@@ -2,6 +2,9 @@ import api from "@/api/menu";
 import Feature from "ol/Feature";
 import Point from "ol/geom/Point";
 import { transform } from "ol/proj";
+import WKT from 'ol/format/WKT';
+
+let wktObj = new WKT();
 
 function getLayerData(item, extendFunc, loading) {
     return new Promise((resolve, reject) => {
@@ -9,15 +12,39 @@ function getLayerData(item, extendFunc, loading) {
             .then((result) => {
                 if (loading) loading.close();
                 if (result.code == 200) {
-                    let poiArr = result.content.map(function (oneitem) {
-                        oneitem.classify = item.classify;
-                        return createPoi(
-                            [oneitem.centerLon, oneitem.centerLat],
-                            oneitem,
-                            extendFunc
-                        );
-                    });
-                    resolve(poiArr);
+                    let arr = []
+                    if (item.geoType == 0 || item.geoType == 3) {
+                        arr = result.content.map(function (oneitem) {
+                            oneitem.classify = item.classify;
+                            oneitem.layerInfo = item;
+                            return createPoi(
+                                oneitem,
+                                extendFunc
+                            );
+                        });
+                    }
+                    else if (item.geoType == 1 || item.geoType == 4) {
+                        arr = result.content.map(function (oneitem) {
+                            oneitem.classify = item.classify;
+                            oneitem.layerInfo = item;
+                            return createLine(
+                                oneitem,
+                                extendFunc
+                            );
+                        });
+                    }
+                    else if (item.geoType == 2 || item.geoType == 5) {
+                        arr = result.content.map(function (oneitem) {
+                            oneitem.classify = item.classify;
+                            oneitem.layerInfo = item;
+                            return createPolygon(
+                                oneitem,
+                                extendFunc
+                            );
+                        });
+
+                    }
+                    resolve(arr);
                 } else {
                     reject(result.message)
                 }
@@ -29,9 +56,9 @@ function getLayerData(item, extendFunc, loading) {
     });
 }
 
-function createPoi(lonlat, properties, extendFunc) {
+function createPoi(properties, extendFunc) {
     let that = this;
-    let point = new Point(transform(lonlat, "EPSG:4326", "EPSG:3857"));
+    let point = new Point(transform([properties.centerLon, properties.centerLat], "EPSG:4326", "EPSG:3857"));
     let poi = new Feature({
         geometry: point,
         callback: function (feature, selectSingleClickFeatures) {
@@ -44,4 +71,41 @@ function createPoi(lonlat, properties, extendFunc) {
     return poi;
 }
 
+
+function createLine(properties, extendFunc) {
+    let geometry = analysisWKT(properties.locations);
+    let line = new Feature({
+        geometry: geometry,
+        callback: function (feature, selectSingleClickFeatures) {
+            // selectSingleClickFeatures.clear();
+            let properties = feature.values_.properties;
+            let point = new Point(transform([properties.centerLon, properties.centerLat], "EPSG:4326", "EPSG:3857"))
+            extendFunc(properties, point.getCoordinates());
+        },
+        properties: properties,
+    });
+    return line;
+}
+function createPolygon(properties, extendFunc) {
+    let geometry = analysisWKT(properties.locations);
+    let polygon = new Feature({
+        geometry: geometry,
+        callback: function (feature, selectSingleClickFeatures) {
+            // selectSingleClickFeatures.clear();
+            let properties = feature.values_.properties;
+            let point = new Point(transform([properties.centerLon, properties.centerLat], "EPSG:4326", "EPSG:3857"))
+            extendFunc(properties, point.getCoordinates());
+        },
+        properties: properties,
+    });
+    return polygon;
+}
+
+function analysisWKT(wkt_str) {
+    return wktObj.readGeometry(wkt_str, {
+        dataProjection: "EPSG:4326",
+        featureProjection: "EPSG:3857"
+    })
+}
+
 export { getLayerData }

src/utils/ol_plugins/layer_control.js

@@ -84,6 +84,41 @@ function createVectorLayer(source, style, zIndex) {
     });
 }
 
+function createPolylineLayer(source, item, zIndex) {
+    return new VectorLayer({
+        name: "line",
+        source: source,
+        zIndex: zIndex || 1,
+        style: [
+            new Style({
+                stroke: new Stroke({
+                    color: item.lineColor,
+                    width: item.lineWidth,
+                }),
+            })
+        ]
+    });
+}
+function createPolygonLayer(source, item, zIndex) {
+    return new VectorLayer({
+        name: "polygon",
+        source: source,
+        zIndex: zIndex || 1,
+        style: [
+            new Style({
+                stroke: new Stroke({
+                    color: item.lineColor,
+                    width: item.lineWidth,
+                }),
+                fill: new Fill({
+                    color: item.fillColor,
+                }),
+            })
+        ],
+    });
+}
+
+
 // 获取 svg 的元素源码
 function getAndSetSVGElement(svgUrl, color, token) {
     var oReq = new XMLHttpRequest();
@@ -100,7 +135,7 @@ function getAndSetSVGElement(svgUrl, color, token) {
 function createLayer(item, layerType, source, token) {
     let layer, svg, imageUrl;
     switch (layerType) {
-        case "singlepoint": 
+        case "singlepoint":
             if (item.iconUrl.indexOf(".svg") > -1) {
                 svg = getAndSetSVGElement(
                     systemConfig.layerIconPrefix + item.iconUrl,
@@ -122,7 +157,7 @@ function createLayer(item, layerType, source, token) {
             });
             layer = createVectorLayer(source, style);
             break;
-        case "aggregation": 
+        case "aggregation":
             if (item.iconUrl.indexOf(".svg") > -1) {
                 svg = getAndSetSVGElement(
                     systemConfig.layerIconPrefix + item.iconUrl,
@@ -172,6 +207,12 @@ function createLayer(item, layerType, source, token) {
         case "heatmap":
             layer = createHeatMapLayer(source, 20, 20);
             break;
+        case "lineString":
+            layer = createPolylineLayer(source, item);
+            break;
+        case "polygon":
+            layer = createPolygonLayer(source, item);
+            break;
 
         default:
             break;