webgl雷达

src/views/element/index-ol.vue

@@ -161,6 +161,7 @@ export default defineComponent({
       initTree()
     }
     const initTree = () => {
+      xqysJson.data.radarListWebgl = JSON.parse(JSON.stringify(xqysJson.data.radarList))
       state.treeData = []
       const formatData = (key, pName, idKey = 'id', labelKey = 'name') => {
         const obj = {
@@ -188,6 +189,7 @@ export default defineComponent({
       formatData('monitoringList', '视频监控')
       formatData('portList', '港区列表')
       formatData('radarList', '雷达')
+      formatData('radarListWebgl', '雷达(webgl)')
       formatData('seaList', '水域-海域')
       formatData('terminalList', '自助报备终端')
       formatData('waterAreaList', '水域-警务区')
@@ -249,14 +251,14 @@ export default defineComponent({
         let feature: any = state.map.forEachFeatureAtPixel(pixel, function (feature) {
           return feature;
         });
-        const point = state.map.forEachFeatureAtPixel(pixel, function (feature) {
-          if (feature.get('geomType') === 'Point') {
-            return feature;
-          }
-        });
-        if (point) {
-          feature = point
-        }
+        // const point = state.map.forEachFeatureAtPixel(pixel, function (feature) {
+        //   if (feature.get('geomType') === 'Point') {
+        //     return feature;
+        //   }
+        // });
+        // if (point) {
+        //   feature = point
+        // }
         if (feature) {
           state.mapHover.info = {
             name: feature.get('name'),
@@ -281,7 +283,7 @@ export default defineComponent({
           return;
         }
         state.webglLineLayer.getSource().getFeatures().forEach(v => {
-          const circle = turf.circle(evt.coordinate, 0.5, {steps: 4, units: 'kilometers', properties: {foo: 'bar'}})
+          const circle = turf.circle(evt.coordinate, 0.5, {steps: 128, units: 'kilometers'})
           const line = turf.lineString(v.getGeometry().getCoordinates());
           if (turf.booleanCrosses(circle, line)) {
             feats.push(v)
@@ -320,6 +322,7 @@ export default defineComponent({
         'islandListImg', [220, 220],
         'monitoringListImg', [36, 404],
         'radarListImg', [220, 404],
+        'radarListWebglImg', [0, 0],
         'terminalListImg', [412, 404],
         'waterBasedFacilitiesListImg', [600, 404],
         [0, 0],
@@ -337,6 +340,11 @@ export default defineComponent({
       const lines: any = []
       const polys: any = []
       const radars: any = []
+      const radarWebgl: any = {
+        point: [],
+        circle: [],
+        area: []
+      }
       state.treeData.forEach(p => {
         if (p.mapId === 'deptInfo') {
           p.children.forEach(v => {
@@ -344,7 +352,6 @@ export default defineComponent({
               try {
                 if (v.pointCoordinate) {
                   const feat: any = new format.WKT().readFeature(v.pointCoordinate)
-                  feat.set('layerType', 'webgl')
                   feat.set('name', p.mapLabel + '_' + v.mapLabel)
                   feat.set('geomType', feat.getGeometry().getType())
                   feat.set('iconImage', 'radarListImg')
@@ -352,7 +359,6 @@ export default defineComponent({
                 }
                 if (v.regionalLocation) {
                   const feat: any = new format.WKT().readFeature(v.regionalLocation)
-                  feat.set('layerType', 'webgl')
                   feat.set('name', p.mapLabel + '_' + v.mapLabel)
                   feat.set('geomType', feat.getGeometry().getType())
                   let fillColor = 'rgba(20, 129, 241, 0.3)'
@@ -412,12 +418,61 @@ export default defineComponent({
               }
             }
           })
+        } else if (p.mapId === 'radarListWebgl') {
+          p.children.forEach(v => {
+            if (v._show) {
+              try {
+                if (v.location) {
+                  const feat: any = new format.WKT().readFeature(v.location)
+                  feat.set('name', p.mapLabel + '_' + v.mapLabel)
+                  feat.set('geomType', feat.getGeometry().getType())
+                  feat.set('iconImage', 'radarListWebglImg')
+                  radarWebgl.point.push(feat)
+                }
+                if (v.radarShielding?.length > 0) {
+                  v.radarShielding.forEach(s => {
+                    const feat: any = new format.WKT().readFeature(s.location)
+                    feat.set('name', p.mapLabel + '_' + v.mapLabel + '_' + s.name)
+                    feat.set('geomType', feat.getGeometry().getType())
+                    let fillColor = 'rgba(20, 129, 241, 0.3)'
+                    let lineColor = '#2860F1'
+                    let lineWidth = 1
+                    if (s.regionalColor) {
+                      fillColor = s.regionalColor
+                    }
+                    if (s.segmentColor) {
+                      lineColor = s.segmentColor
+                    }
+                    if (s.segmentWidth) {
+                      lineWidth = s.segmentWidth
+                    }
+                    feat.set('fillColor', fillColor)
+                    feat.set('lineColor', lineColor)
+                    feat.set('lineWidth', lineWidth)
+                    radarWebgl.area.push(feat)
+                  })
+                }
+                if (Number(v.scannedAreaEnd) > 0) {
+                  for (let i = Number(v.scannedAreaEnd); i > 0; i -= 7500) {
+                    const circleGeoJson = turf.circle(that.$easyMap.formatPosition.wptTcpt(v.location), i / 1000, {steps: 128, units: 'kilometers'})
+                    const feat: any = new format.GeoJSON().readFeature(circleGeoJson)
+                    feat.set('name', p.mapLabel + '_' + v.mapLabel + '_半径')
+                    feat.set('geomType', feat.getGeometry().getType())
+                    feat.set('fillColor', 'rgb(255, 255, 255, 0.2)')
+                    feat.set('lineColor', '#00ff00')
+                    feat.set('lineWidth', 1)
+                    radarWebgl.circle.push(feat)
+                  }
+                }
+              } catch (e) {
+              }
+            }
+          })
         } else {
           p.children.forEach(v => {
             if (v._show) {
               try {
                 const feat: any = new format.WKT().readFeature(v.location)
-                feat.set('layerType', 'webgl')
                 feat.set('name', p.mapLabel + '_' + v.mapLabel)
                 feat.set('geomType', feat.getGeometry().getType())
                 if (feat.getGeometry().getType() === 'Point') {
@@ -481,7 +536,7 @@ export default defineComponent({
       state.webglPolyLayer = new WebGLPolyLayer({
         zIndex: 10,
         source: new source.Vector({
-          features: polys
+          features: [...polys, ...radarWebgl.circle, ...radarWebgl.area]
         }),
       })
       state.map.addLayer(state.webglPolyLayer)
@@ -505,7 +560,7 @@ export default defineComponent({
       state.webglPointLayer = new layer.WebGLPoints({
         zIndex: 35,
         source: new source.Vector({
-          features: points
+          features: [...points, ...radarWebgl.point]
         }),
         style: webglStyle
       })