辖区要素

src/views/element/index-ol.vue

@@ -34,17 +34,6 @@
         layout="info"
         @easyMapLoad="mapLoad"
       />
-      <div class="hide-list">
-        <div class="hover-main">
-          <template v-for="(item, index) in polyLineHideList">
-            <div class="hover-item">
-              <div class="hover-item-label __hover" @click="webglPolyLineLayer.getSource().addFeature(item.feature), polyLineHideList.splice(index, 1)">恢复：</div>
-              <div class="hover-item-value">{{item.name}}</div>
-            </div>
-          </template>
-
-        </div>
-      </div>
     </div>
     <div ref="ref_mapHover" class="hover-info">
       <div class="hover-main">
@@ -62,7 +51,7 @@
       <div class="hover-info-head">
         <span>要素列表</span>
       </div>
-      <div class="hover-info-close __hover" @click="mapClick.overlay?.setPosition(undefined)">
+      <div class="hover-info-close __hover" @click="polyLineActiveLayer.getSource().clear(), mapClick.overlay?.setPosition(undefined)">
         <img src="@/components/easyMap/images/close.png" alt=""/>
       </div>
       <div class="hover-main" v-if="mapClick.list" style="max-height: 250px;overflow-y: auto;">
@@ -72,6 +61,7 @@
             <div class="hover-item-value">
               {{item.name}}
               <el-link href="javascript:;" type="danger" @click.stop="onActive(item)">突出</el-link>
+              <el-link href="javascript:;" type="primary" @click.stop="onDetail(item)">详情</el-link>
             </div>
           </div>
         </template>
@@ -109,7 +99,19 @@ import * as turf from '@turf/turf'
 import * as style from "ol/style";
 
 
-class WebGLLayer extends layer.Layer {
+class WebGLLineLayer extends layer.Layer {
+  createRenderer() {
+    return new WebGLVectorLayerRenderer(this, {
+      disableHitDetection: false,
+      style: {
+        'stroke-color': ['*', ['get', 'lineColor'], [220, 220, 220]],
+        'stroke-width': ['get', 'lineWidth'],
+        // 'stroke-line-dash': ['get', 'lineDasharray'],
+      },
+    });
+  }
+}
+class WebGLPolyLayer extends layer.Layer {
   createRenderer() {
     return new WebGLVectorLayerRenderer(this, {
       disableHitDetection: false,
@@ -136,7 +138,8 @@ export default defineComponent({
       treeData: <any>[],
       treeText: '',
       webglPointLayer: <any>null,
-      webglPolyLineLayer: <any>null,
+      webglLineLayer: <any>null,
+      webglPolyLayer: <any>null,
       radarLayer: <any>null,
       polyLineActiveLayer: <any>null,
       mapHover: {
@@ -147,7 +150,6 @@ export default defineComponent({
         list: {},
         overlay: <any>null
       },
-      polyLineHideList: <any>[]
     })
     const ref_tree = ref()
     const ref_mapHover = ref()
@@ -198,7 +200,7 @@ export default defineComponent({
       })
       state.map.addLayer(state.radarLayer)
       state.polyLineActiveLayer = new layer.Vector({
-        zIndex: 39,
+        zIndex: 30,
         source: new source.Vector(),
         style: (feat: any) => {
           feat.setStyle(new style.Style({
@@ -265,41 +267,30 @@ export default defineComponent({
           state.mapHover.overlay.setPosition(undefined)
         }
       });
-      state.map.on('contextmenu', function (evt) {
-        evt.preventDefault()
+      state.map.on('singleclick', function (evt) {
         if (evt.dragging) {
           return;
         }
+        const feats: any = []
         const pixel = state.map.getEventPixel(evt.originalEvent);
-        const feature = state.map.forEachFeatureAtPixel(pixel, function (feature) {
+        let feature: any = state.map.forEachFeatureAtPixel(pixel, function (feature) {
           return feature;
         });
-        if (feature?.getGeometry().getType() !== 'Point') {
-          state.mapHover.overlay.setPosition(undefined)
-          state.webglPolyLineLayer.getSource().removeFeature(feature)
-          state.polyLineHideList.push({
-            name: feature.get('name'),
-            feature: feature
-          })
-        }
-      })
-      state.map.on('singleclick', function (evt) {
-        if (evt.dragging) {
+        if (feature.get('geomType') === 'Point' || feature.get('active')) {
+          onDetail(feature)
           return;
         }
-        const feats: any = []
-        state.webglPolyLineLayer.getSource().getFeatures().forEach(v => {
-          if (v.get('geomType') === 'Polygon') {
-            const poly = turf.polygon(v.getGeometry().getCoordinates());
-            if (turf.booleanPointInPolygon(turf.point(evt.coordinate), poly)) {
-              feats.push(v)
-            }
-          } else if (v.get('geomType') === 'LineString') {
-            const circle = turf.circle(evt.coordinate, 0.5, {steps: 4, units: 'kilometers', properties: {foo: 'bar'}})
-            const line = turf.lineString(v.getGeometry().getCoordinates());
-            if (turf.booleanCrosses(circle, line)) {
-              feats.push(v)
-            }
+        state.webglLineLayer.getSource().getFeatures().forEach(v => {
+          const circle = turf.circle(evt.coordinate, 0.5, {steps: 4, units: 'kilometers', properties: {foo: 'bar'}})
+          const line = turf.lineString(v.getGeometry().getCoordinates());
+          if (turf.booleanCrosses(circle, line)) {
+            feats.push(v)
+          }
+        })
+        state.webglPolyLayer.getSource().getFeatures().forEach(v => {
+          const poly = turf.polygon(v.getGeometry().getCoordinates());
+          if (turf.booleanPointInPolygon(turf.point(evt.coordinate), poly)) {
+            feats.push(v)
           }
         })
         if (feats.length > 0) {
@@ -343,7 +334,8 @@ export default defineComponent({
     ]
     const setSourceData = () => {
       const points: any = []
-      const polyLines: any = []
+      const lines: any = []
+      const polys: any = []
       const radars: any = []
       state.treeData.forEach(p => {
         if (p.mapId === 'deptInfo') {
@@ -383,7 +375,7 @@ export default defineComponent({
                   feat.set('lineColor', lineColor)
                   feat.set('lineWidth', lineWidth)
                   feat.set('lineDasharray', lineDasharray)
-                  polyLines.push(feat)
+                  polys.push(feat)
                 }
               } catch (e) {
               }
@@ -469,7 +461,11 @@ export default defineComponent({
                   feat.set('lineColor', lineColor)
                   feat.set('lineWidth', lineWidth)
                   feat.set('lineDasharray', lineDasharray)
-                  polyLines.push(feat)
+                  if (feat.get('geomType') === 'LineString') {
+                    lines.push(feat)
+                  } else if (feat.get('geomType') === 'Polygon') {
+                    polys.push(feat)
+                  }
                 }
               } catch (e) {
               }
@@ -477,23 +473,37 @@ export default defineComponent({
           })
         }
       })
-      if (state.webglPolyLineLayer) {
-        state.map.removeLayer(state.webglPolyLineLayer)
-        state.webglPolyLineLayer.dispose()
+      // 面
+      if (state.webglPolyLayer) {
+        state.map.removeLayer(state.webglPolyLayer)
+        state.webglPolyLayer.dispose()
       }
-      state.webglPolyLineLayer = new WebGLLayer({
+      state.webglPolyLayer = new WebGLPolyLayer({
+        zIndex: 10,
+        source: new source.Vector({
+          features: polys
+        }),
+      })
+      state.map.addLayer(state.webglPolyLayer)
+      // 线
+      if (state.webglLineLayer) {
+        state.map.removeLayer(state.webglLineLayer)
+        state.webglLineLayer.dispose()
+      }
+      state.webglLineLayer = new WebGLLineLayer({
         zIndex: 20,
         source: new source.Vector({
-          features: polyLines
+          features: lines
         }),
       })
-      state.map.addLayer(state.webglPolyLineLayer)
+      state.map.addLayer(state.webglLineLayer)
+      // 点
       if (state.webglPointLayer) {
         state.map.removeLayer(state.webglPointLayer)
         state.webglPointLayer.dispose()
       }
       state.webglPointLayer = new layer.WebGLPoints({
-        zIndex: 30,
+        zIndex: 35,
         source: new source.Vector({
           features: points
         }),
@@ -548,13 +558,17 @@ export default defineComponent({
       setSourceData()
     }
     const onActive = (item) => {
+      item.feature.set('active', true)
       state.polyLineActiveLayer.getSource().clear()
       state.polyLineActiveLayer.getSource().addFeature(item.feature)
       console.log(item)
     }
+    const onDetail = (item) => {
+      alert((item.name || item.get('name')) + '_详情')
+      console.log(item)
+    }
     onMounted(() => {
       console.log(xqysJson)
-      // console.log(WebGLLayer)
     })
     return {
       ...toRefs(state),
@@ -569,7 +583,8 @@ export default defineComponent({
       onHideAll,
       ref_mapHover,
       ref_mapClick,
-      onActive
+      onActive,
+      onDetail
     }
   },
 })