Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/components/MapboxMaps/MapComponent.vue

@@ -34,6 +34,9 @@
         </div>
         <div class="draw-polygon" @click="LocationShow = true">
 
+        </div>
+        <div class="split-polygon" @click="handlerDrawLineString()">
+
         </div>
       </div>
 
@@ -86,14 +89,17 @@
     import { SwitchLayerControl,MeasureControl } from 'mapbox-extensions'
     import 'mapbox-extensions/dist/index.css'
 
-    // import U from 'mapbox-gl-utils';
-    // import 'mapbox-gl/dist/mapbox-gl.css';
+    import U from 'mapbox-gl-utils';
+    import 'mapbox-gl/dist/mapbox-gl.css';
 
     import './src/index.less';
     import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
     import { MP } from './src/MP';
     import { DrawingType } from '@/enums/mapEnum';
   
+    // POLYGON分割函数
+    import {polygonCut} from './lib/segmentation';
+
     import {
       SnapPolygonMode,
       SnapPointMode,
@@ -200,6 +206,10 @@
 
       map.on('load', () => {
 
+        //挂载mapbox-gl-utils
+          U.init(map);
+          mp = new MP(map);
+
         // 根据地图配置信息加载地形数据
         if(props.mapConfig.mode == "3D"){
           // handlerLoadTerrain();
@@ -470,7 +480,19 @@
     const handlerDrawLineString = () => {
       mp.draw('LineString');
       mp.on('LineString', function (e) {
+        console.log("LineString",e);
         emit('mapDraw', 'LineString', e);
+        let splitLineString = {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "coordinates": [
+                e
+              ],
+              "type": "LineString"
+            }
+        }
+        polygonCut(splitLineString);  
       });
     };
     //绘制面
@@ -504,7 +526,6 @@
         //     });
 
         // }
-  
         geojson.geojson = feature;
 
 
@@ -835,8 +856,12 @@
       }
     };
 
+    const currentGeoJson = ref({});
+
     // 查看图斑详情
     const handlerDetails = (geojson) => {
+      currentGeoJson.value = geojson;
+      console.log("currentGeoJson",currentGeoJson);
       if(map.getSource("detailsSource")){
         map.getSource("detailsSource").setData(geojson);
       }else{
@@ -844,6 +869,7 @@
           type:"geojson",
           data:geojson
         })
+        
         // map.addLayer(
         //   {
         //     "id": "detailsLayer",
@@ -860,6 +886,7 @@
         //     }
         //   }
         // )
+
         map.addLayer(
           {
             "id": "detailsLayerLine",
@@ -1236,7 +1263,7 @@
     }
 
     .position-by-lnglat{
-      width:58px;
+      width:87px;
       height:29px;
       background:#fff;
       position:absolute;
@@ -1268,6 +1295,19 @@
           cursor:pointer;
         }
       }
+
+      .split-polygon{
+        width:29px;
+        height:29px;
+        float:left;
+        background:url(/public/map/split_polygon.png);
+        background-size:20px 20px;
+        background-repeat: no-repeat;
+        background-position: 4px 5px;
+        &:hover{
+          cursor:pointer;
+        }
+      }
     }
 
     .to-location-input{

src/components/MapboxMaps/MapboxMap.vue

@@ -149,20 +149,20 @@
 
 
 
-      map.addLayer({
-        'id': 'wms-test-layer',
-        'type': 'raster',
-        'source': {
-          'type': 'raster',
-          'tiles': [
-            // "http://175.27.168.120:8080/geoserver/feixian/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fjpeg&TRANSPARENT=true&LAYERS=feixian%3Ayingxiang_17&exceptions=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A4548&STYLES=&WIDTH=728&HEIGHT=768&BBOX=586801.5388788335%2C3908183.1422136417%2C590270.7583843566%2C3911848.0123377703",
-            // "http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang_17&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"
-            "http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"
-          ],
-          'tileSize': 256
-        },
-        'paint': {}
-      });
+      // map.addLayer({
+      //   'id': 'wms-test-layer',
+      //   'type': 'raster',
+      //   'source': {
+      //     'type': 'raster',
+      //     'tiles': [
+      //       // "http://175.27.168.120:8080/geoserver/feixian/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fjpeg&TRANSPARENT=true&LAYERS=feixian%3Ayingxiang_17&exceptions=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A4548&STYLES=&WIDTH=728&HEIGHT=768&BBOX=586801.5388788335%2C3908183.1422136417%2C590270.7583843566%2C3911848.0123377703",
+      //       // "http://175.27.168.120:8080/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang_17&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"
+      //       "http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"
+      //     ],
+      //     'tileSize': 256
+      //   },
+      //   'paint': {}
+      // });
 
       map.addSource('radar', {
           'type': 'image',
@@ -204,6 +204,83 @@
           }
       });
 
+      map.addSource('earthquakes', {
+          'type': 'geojson',
+          'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson'
+      });
+
+      map.addLayer(
+          {
+              'id': 'earthquakes-heat',
+              'type': 'heatmap',
+              'source': 'earthquakes',
+              'maxzoom': 9,
+              'paint': {
+                  // Increase the heatmap weight based on frequency and property magnitude
+                  'heatmap-weight': [
+                      'interpolate',
+                      ['linear'],
+                      ['get', 'mag'],
+                      0,
+                      0,
+                      6,
+                      1
+                  ],
+                  // Increase the heatmap color weight weight by zoom level
+                  // heatmap-intensity is a multiplier on top of heatmap-weight
+                  'heatmap-intensity': [
+                      'interpolate',
+                      ['linear'],
+                      ['zoom'],
+                      0,
+                      1,
+                      9,
+                      3
+                  ],
+                  // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
+                  // Begin color ramp at 0-stop with a 0-transparancy color
+                  // to create a blur-like effect.
+                  'heatmap-color': [
+                      'interpolate',
+                      ['linear'],
+                      ['heatmap-density'],
+                      0,
+                      'rgba(33,102,172,0)',
+                      0.2,
+                      'rgb(103,169,207)',
+                      0.4,
+                      'rgb(209,229,240)',
+                      0.6,
+                      'rgb(253,219,199)',
+                      0.8,
+                      'rgb(239,138,98)',
+                      1,
+                      'rgb(178,24,43)'
+                  ],
+                  // Adjust the heatmap radius by zoom level
+                  'heatmap-radius': [
+                      'interpolate',
+                      ['linear'],
+                      ['zoom'],
+                      0,
+                      2,
+                      9,
+                      20
+                  ],
+                  // Transition from heatmap to circle layer by zoom level
+                  'heatmap-opacity': [
+                      'interpolate',
+                      ['linear'],
+                      ['zoom'],
+                      7,
+                      1,
+                      9,
+                      0
+                  ]
+              }
+          }
+      );
+
 
 
       //挂载mapbox-gl-utils
@@ -239,7 +316,7 @@
       projection: 'equirectangular', // wgs84参考系
       style: MapboxDefaultStyle,
       maxZoom: 22,
-      minZoom: 6,
+      minZoom: 1,
       zoom:10,
       // ...props.mapOptions,
       center:[117.984425,35.270654],

src/components/MapboxMaps/index.vue

@@ -17,7 +17,7 @@
 <script lang="ts" setup>
   import { onMounted, onUnmounted, defineProps, reactive,defineExpose } from 'vue';
   import mapboxgl, { Map } from 'mapbox-gl';
-    import U from 'mapbox-gl-utils';
+  import U from 'mapbox-gl-utils';
   import 'mapbox-gl/dist/mapbox-gl.css';
   import './src/index.less';
   import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';

src/components/MapboxMaps/lib/segmentation.ts

@@ -0,0 +1,60 @@
+export function polygonCut(poly, line, tolerance = .001, toleranceType ='kilometers') {
+    // 1. 条件判断
+    if (poly.geometry === void 0 || poly.geometry.type !== 'Polygon')
+      throw ('传入的必须为polygon');
+    if (line.geometry === void 0 || line.geometry.type.toLowerCase().indexOf('linestring') === -1)
+      throw ('传入的必须为linestring');
+    if (line.geometry.type === "LineString") {
+      if (turf.booleanPointInPolygon(turf.point(line.geometry.coordinates[0]), poly)
+        || turf.booleanPointInPolygon(turf.point(line.geometry.coordinates[line.geometry.coordinates.length - 1]), poly))
+        throw ('起点和终点必须在多边形之外');
+    }
+    // 2. 计算交点，并把线的点合并
+    let lineIntersect = turf.lineIntersect(line, poly);
+    const lineExp = turf.explode(line);
+    for (let i = 0; i < lineExp.features.length - 1; i++) {
+      lineIntersect.features.push(turf.point(lineExp.features[i].geometry.coordinates));
+    }
+    // 3. 计算线的缓冲区
+    const lineBuffer = turf.buffer(line, tolerance, {
+      units: toleranceType
+    });
+    // 4. 计算线缓冲和多边形的difference，返回"MultiPolygon"，所以将其拆开
+    const _body = turf.difference(poly, lineBuffer);
+    let pieces = [];
+    if (_body.geometry.type === 'Polygon') {
+      pieces.push(turf.polygon(_body.geometry.coordinates));
+    } else {
+      _body.geometry.coordinates.forEach(function (a) { pieces.push(turf.polygon(a)) });
+    }
+
+    return pieces;
+
+    // 5. 处理点数据
+    for (p in pieces) {
+      const piece = pieces[p];
+      for (let c in piece.geometry.coordinates[0]) {
+        const coord = piece.geometry.coordinates[0][c];
+        const p = turf.point(coord);
+        for (let lp in lineIntersect.features) {
+          const lpoint = lineIntersect.features[lp];
+          if (turf.distance(lpoint, p, toleranceType) <= tolerance*2) {
+            piece.geometry.coordinates[0][c] = lpoint.geometry.coordinates;
+          }
+        }
+      }
+    }
+
+    // 6. 过滤掉重复点
+    for (p in pieces) {
+      const coords = pieces[p].geometry.coordinates[0]
+      pieces[p].geometry.coordinates[0] = filterDuplicatePoints(coords);
+    }
+    // 7. 将属性赋予每一个polygon，并处理id
+    pieces.forEach((a, index) => {
+      a.properties = Object.assign({}, poly.properties)
+      a.properties.id += `-${index}`
+    });
+    return turf.featureCollection(pieces);
+  }
+  

src/components/Upload/src/components/AuthImage.vue

@@ -2,7 +2,7 @@
     <div class="authImage-container" :style="props.style">
         <!-- native UI -->
         <div class="image-container" :style="props.style" v-if="props.type == 'native'">
-            <div class="image-operate"  @click="handlerPreviewImage" >
+            <div class="image-operate"  @click="handlerPreviewImage" v-if="props.preview" >
                 <div class="icon-box">
                     <EyeOutlined />
                     预览
@@ -13,8 +13,10 @@
         <!-- ant design UI -->
         <div class="ant-image-container" :style="props.style" v-if="props.type == 'ant'">
             <a-image
+                @click="handlerPreviewImage"
                 :style="props.style"
                 :src="blobUrl"
+                :preview="props.preview"
             />
         </div>
     </div>
@@ -41,6 +43,10 @@ const props = defineProps({
     },
     style:{
         type:Object,
+    },
+    preview:{
+        type:Boolean,
+        default:true
     }
 })
 

src/views/demo/tiankongdi/changearea/MapList/index.vue

@@ -42,9 +42,9 @@
         <a-select
           allowClear
           style="flex: 1"
-          v-model:value="infoScreenData.countyId"
+          v-model:value="infoScreenData.countyid"
           :options="props.municipalAreaOptions"
-          @change="(value) => emits('mapListScreenChange', value, 'countyId')"
+          @change="(value) => emits('mapListScreenChange', value, 'countyid')"
         />
       </div>
       <div class="screen-item" v-if="cityType.level === 0">
@@ -52,9 +52,9 @@
         <a-select
           allowClear
           style="flex: 1"
-          v-model:value="props.infoScreenData.streetId"
+          v-model:value="props.infoScreenData.streetid"
           :options="props.countiesAreaOptions"
-          @change="(value) => emits('mapListScreenChange', value, 'streetId')"
+          @change="(value) => emits('mapListScreenChange', value, 'streetid')"
         />
       </div>
       <div class="screen-item" >
@@ -62,9 +62,9 @@
         <a-select
           allowClear
           style="flex: 1"
-          v-model:value="infoScreenData.countyId"
+          v-model:value="infoScreenData.countyid"
           :options="municipalAreaOptions"
-          @change="(value) => mapListScreenChange( value, 'countyId')"
+          @change="(value) => mapListScreenChange( value, 'countyid')"
         />
       </div>
       <div class="screen-item" v-if="cityType.level !== 0">
@@ -72,9 +72,9 @@
         <a-select
           allowClear
           style="flex: 1"
-          v-model:value="infoScreenData.streetId"
+          v-model:value="infoScreenData.streetid"
           :options="streetsAreaOptions"
-          @change="(value) => emits('mapListScreenChange', value, 'streetId')"
+          @change="(value) => emits('mapListScreenChange', value, 'streetid')"
         />
       </div>
       <div class="screen-item">
@@ -437,12 +437,12 @@
       case 'caseNo':
         infoScreenData.value.caseNo = value;
         break;
-      case 'countyId':
-        infoScreenData.value.countyId = value;
+      case 'countyid':
+        infoScreenData.value.countyid = value;
         getStreetOrgs(value);
         break;
-      case 'streetId':
-        infoScreenData.value.streetId = value;
+      case 'streetid':
+        infoScreenData.value.streetid = value;
         break;
       case 'isIllegal':
         infoScreenData.value.isIllegal = value;

src/views/demo/tiankongdi/changearea/index.vue

@@ -12,6 +12,31 @@
         @showInfo="changeShowInfo"
       />
 
+
+      <AuthImage 
+          style="width:180px;height:180px;" 
+          src="http://120.222.154.48:6050/DroneEnforcement/2024/20240712/2024071209474128610039.jpg"
+          type="native"
+          :preview="true"
+          @perviewImage="perviewImage"
+        ></AuthImage>
+
+      <AuthImage 
+          style="width:180px;height:180px;" 
+          src="http://120.222.154.48:6050/S_Common/2024/20240712/2024071209201354610087.jpg"
+          type="native"
+          :preview="true"
+          @perviewImage="perviewImage"
+        ></AuthImage>
+
+      <AuthImage 
+        style="width:180px;height:180px;" 
+        src="http://111.17.207.220:9001/2023/20231220/2023122014532130590143.png"
+        type="ant"
+        :preview="true"
+        @perviewImage="perviewImage"
+        ></AuthImage>
+
       <MapList
         v-if="showInfo"
         :infoScreenData="infoScreenData"
@@ -43,6 +68,7 @@
 </template>
 
 <script setup lang="ts">
+import AuthImage from '@/components/Upload/src/components/AuthImage.vue'
   import { ref, onMounted, onUnmounted, watch, defineAsyncComponent } from 'vue';
   import mapboxgl, { Map } from 'mapbox-gl';
   import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config.ts';
@@ -53,6 +79,7 @@
   import { getChildrenTree } from '@/api/demo/system.ts';
   import { getGeom,getConfig } from '@/api/sys/layerManagement';
   import { useMessage } from '@/hooks/web/useMessage';
+import axios from 'axios';
   const { createMessage } = useMessage();
 
   const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
@@ -67,9 +94,11 @@
   }
 
   function perviewImage(e):void{
-
+    alert(e);
   }
 
+
+
   const showInfo = ref(false);
   const year = ref<number>();
   const batch = ref();