diff --git a/src/components/GMap.vue b/src/components/GMap.vue index 1a99fcc..a57065a 100644 --- a/src/components/GMap.vue +++ b/src/components/GMap.vue @@ -603,7 +603,7 @@ export default defineComponent({ setLayers({ id: ele.id, name: ele.name, - resource: ele.resource + resource: ele.resource, }) updateCoordinates('wgs84-gcj02', ele) @@ -613,7 +613,7 @@ export default defineComponent({ ele.resource.content.properties.color, { id: ele.id, - name: ele.name + name: ele.name, } ) } @@ -658,6 +658,8 @@ export default defineComponent({ }) function getDrawCallback ({ obj }) { + console.log(333) + console.log(obj) switch (state.currentType) { case MapDoodleEnum.PIN: postPinPositionResource(obj) @@ -697,7 +699,7 @@ export default defineComponent({ setLayers(req) updateCoordinates('gcj02-wgs84', req) const result = await postElementsReq(shareId.value, req) - obj.setExtData({ id: req.id, name: req.name }) + obj.setExtData({ id: req.id, name: req.name, area: 222 }) store.state.coverList.push(obj) // console.log(store.state.coverList) } @@ -746,8 +748,8 @@ export default defineComponent({ if (layer?.elements) { ;(layer?.elements as any[]).push(resource) } - console.log('layers', layers) - store.commit('SET_LAYER_INFO', layers) + // console.log('layers', layers) + // store.commit('SET_LAYER_INFO', layers) } function updateCoordinates (transformType: string, element: any) { const geoType = element.resource?.content.geometry.type diff --git a/src/hooks/use-g-map-cover.ts b/src/hooks/use-g-map-cover.ts index e7a5796..0b66241 100644 --- a/src/hooks/use-g-map-cover.ts +++ b/src/hooks/use-g-map-cover.ts @@ -29,10 +29,10 @@ export function useGMapCover () { } = { '2d8cf0': pin2d8cf0, '19be6b': pin19be6b, - '212121': pin212121, - 'b620e0': pinb620e0, - 'e23c39': pine23c39, - 'ffbb00': pineffbb00, + 212121: pin212121, + b620e0: pinb620e0, + e23c39: pine23c39, + ffbb00: pineffbb00, } const iconName = (color?.replaceAll('#', '') || '').toLocaleLowerCase() return new AMap.Icon({ @@ -53,15 +53,14 @@ export function useGMapCover () { // fillColor: color || normalColor, extData: data }) - // 点击触发 - pin.on('click', function(e) { + pin.on('click', function (e) { store.commit('SET_LAYER_ID', data.id) const infoWindow = new AMap.InfoWindow({ content: data.name, offset: new AMap.Pixel(0, -10) // 左上角 }) - root.$map.setFitView([ pin ]) + root.$map.setFitView([pin]) infoWindow.open(root.$map, [coordinates[0], coordinates[1]]) }) // console.log('coordinates pin', pin) @@ -87,14 +86,28 @@ export function useGMapCover () { // draggable: true, }) + // 计算线段长度距离 + const p1 = coordinates[0] + const p2 = coordinates[1] + // 返回 p1 到 p2 间的地面距离，单位：米 + const dis = AMap.GeometryUtil.distance(p1, p2).toFixed(1) + // console.log(dis) + store.state.Layers.forEach(item => { + item.elements.forEach(item2 => { + if (item2.id == data.id) { + item2.around = around + } + }) + }) + // 点击触发 - polyline.on('click', function(e) { + polyline.on('click', function (e) { store.commit('SET_LAYER_ID', data.id) const infoWindow = new AMap.InfoWindow({ - content: data.name, + content: '
' + '名称：' + data.name + '
' + '直线距离：' + dis + 'm', offset: new AMap.Pixel(0, -10) // 左上角 }) - root.$map.setFitView([ polyline ]) + root.$map.setFitView([polyline]) infoWindow.open(root.$map, [coordinates[0][0], coordinates[0][1]]) }) AddOverlayGroup(polyline) @@ -108,6 +121,7 @@ export function useGMapCover () { // console.log('Polygon', path) const Polygon = new AMap.Polygon({ path: path, + area: 'lizhao', strokeOpacity: 1, strokeWeight: 2, fillColor: color || normalColor, @@ -116,17 +130,40 @@ export function useGMapCover () { strokeColor: color || normalColor, extData: data }) - + // 计算多边形面积 + const area = Math.round(AMap.GeometryUtil.ringArea(coordinates)) + // 计算多边形周长 返回线段 p0-p1-p2 的实际长度，单位：米 + const aroundList = coordinates + aroundList.push(coordinates[0]) + const around = AMap.GeometryUtil.distanceOfLine(aroundList).toFixed(1) + // console.log(around) // 点击触发 - Polygon.on('click', function(e) { + Polygon.on('click', function (e) { + // console.log(coordinates) store.commit('SET_LAYER_ID', data.id) - const infoWindow = new AMap.InfoWindow({ - content: data.name, - offset: new AMap.Pixel(0, -10) // 左上角 - }) - root.$map.setFitView([ Polygon ]) + }) + // 鼠标移入 + const infoWindow = new AMap.InfoWindow({ + content: '
' + '名称：' + data.name + '
' + '
' + '水平面积：' + area + 'm²' + '
' + '水平周长：' + around + 'm', + offset: new AMap.Pixel(0, -10) // 左上角 + }) + root.$map.setFitView([Polygon]) + Polygon.on('mouseover', function (e) { infoWindow.open(root.$map, [coordinates[0][0], coordinates[0][1]]) }) + // 鼠标移出 + Polygon.on('mouseout', function (e) { + infoWindow.close() + }) + // console.log(store.state.Layers) + store.state.Layers.forEach(item => { + item.elements.forEach(item2 => { + if (item2.id == data.id) { + item2.area = area + item2.around = around + } + }) + }) AddOverlayGroup(Polygon) } diff --git a/src/hooks/use-mouse-tool.ts b/src/hooks/use-mouse-tool.ts index 2794b7f..c8ef28e 100644 --- a/src/hooks/use-mouse-tool.ts +++ b/src/hooks/use-mouse-tool.ts @@ -43,7 +43,7 @@ export function useMouseTool () { fillColor: '#1791fc', fillOpacity: 0.4, draggable: true, - title: type + state.PolygonNum++ + title: type + state.PolygonNum++, }) root?.$mouseTool.on('draw', getDrawCallback) } diff --git a/src/pages/page-web/projects/layer.vue b/src/pages/page-web/projects/layer.vue index e9db3e6..c494a05 100644 --- a/src/pages/page-web/projects/layer.vue +++ b/src/pages/page-web/projects/layer.vue @@ -37,6 +37,26 @@ @change="changeLayer" /> +
+ 水平面积: + {{layerState.laterArea}} m² +
+
+ 水平周长: + {{layerState.laterRound}} m +
+
+ 高度差: + 0 +
+
+ 水平距离: + {{layerState.laterRound}} m +
+
+ 直线距离: + {{layerState.laterRound}} m +