diff --git a/src/components/Map.vue b/src/components/Map.vue index 6c4740c..69608f1 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -11,8 +11,8 @@ import L from 'leaflet' import 'leaflet/dist/leaflet.css' import 'leaflet-draw/dist/leaflet.draw' import 'leaflet-draw/dist/leaflet.draw.css' -import '@geoman-io/leaflet-geoman-free'; -import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'; +import '@geoman-io/leaflet-geoman-free'; +import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'; import 'Leaflet-ImageOverlay-Rotated' import { useVariableStore } from '/@/stores/index.ts' import * as omnivore from '@mapbox/leaflet-omnivore' @@ -21,6 +21,8 @@ const map = ref() let homeMap = null let featureLayerG_area = null let featureLayerG_point = null +let layerRectangle = null + onMounted(() => { homeMap = L.map(map.value, { @@ -42,7 +44,7 @@ onMounted(() => { tileSize: 256, zoomOffset: 1, }).addTo(homeMap) - + featureLayerG_area = L.layerGroup().addTo(homeMap) featureLayerG_point = L.layerGroup().addTo(homeMap) @@ -58,32 +60,32 @@ const mapOperations = { wktParseToMap: (res) => { let layer = omnivore.wkt.parse(res) layer.addTo(featureLayerG_point) - - let attr=Object.values(layer._layers) - + + let attr = Object.values(layer._layers) + // 判断审核的数据类型,如果是点则直接flyTo - if(attr[0].feature.geometry.type.indexOf('Polygon')==-1){ - homeMap.flyTo([attr[0].feature.geometry.coordinates[1],attr[0].feature.geometry.coordinates[0]],3) + if (attr[0].feature.geometry.type.indexOf('Polygon') == -1) { + homeMap.flyTo([attr[0].feature.geometry.coordinates[1], attr[0].feature.geometry.coordinates[0]], 3) } - // 判断审核的数据类型,如果是面则计算中心点 然后再fly - else{ - let polygons=[]; - for(let i=0;i turf.centroid(polygon)); // console.log(centers) - let features=[] - for(let i=0;i{ + homeMap.pm.enableDraw('Polygon', { snappable: false }); + let polygon = null; + homeMap.on("pm:create", (e) => { featureLayerG_area.clearLayers() e.layer.setStyle({ color: '#FF0080', opacity: 1, }) - e.layer.addTo(featureLayerG_area) - polygon=e.layer - }) + e.layer.addTo(featureLayerG_area) + polygon = e.layer + }) // featureLayerG_area.clearLayers() // variableStore.layerGroupPoly=null; return polygon }, clearPolygon: () => { // console.log('1-2') - + featureLayerG_area.clearLayers() variableStore.layerGroupPoly = null homeMap.pm.disableDraw(); @@ -326,7 +328,7 @@ const mapOperations = { // featureLayerG_point.clearLayers() }, drawCreated: () => { - + // homeMap.on('draw:created', function (elll) { // featureLayerG_area.clearLayers() // variableStore.layerGroupPoly = null @@ -342,14 +344,14 @@ const mapOperations = { // }) // variableStore.layerGroupPoly = // variableStore.layerGroupPoly.join('\n') - + // }) }, Edit: () => { homeMap.pm.enableGlobalEditMode({ allowSelfIntersection: false, }) - if(featureLayerG_area.getLayers().length==1){ + if (featureLayerG_area.getLayers().length == 1) { featureLayerG_area.eachLayer(function (layer) { layer.on('pm:edit', (e) => { let features = featureLayerG_area.toGeoJSON().features @@ -360,7 +362,7 @@ const mapOperations = { }); }); } - else if(featureLayerG_point.getLayers().length==1){ + else if (featureLayerG_point.getLayers().length == 1) { featureLayerG_point.eachLayer(function (layer) { layer.on('pm:edit', (e) => { let features = featureLayerG_point.toGeoJSON().features @@ -371,12 +373,27 @@ const mapOperations = { }); }); } - else{ + else { console.log('error') } - - }, + drawRectangle: () => { + if (layerRectangle != null) { + homeMap.removeLayer(layerRectangle) + layerRectangle = null + } + homeMap.pm.enableDraw('Rectangle', { + snappable: true, + snapDistance: 20, + }); + homeMap.on('pm:create', (e) => { + L.PM.reInitLayer(e.layer); + layerRectangle = e.layer + }); + }, + deleteRectangle: () => { + homeMap.removeLayer(layerRectangle) + } } //omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);