From 54a30271de0640bccb3bd0309ab551742eba858b Mon Sep 17 00:00:00 2001 From: freshman-white <2514756131@qq.com> Date: Thu, 14 Sep 2023 19:00:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=9C=86=E5=BD=A2=E7=BB=98=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/GMap.vue | 65 ++++++++++++++++++++++----- src/constants/map.ts | 6 ++- src/hooks/use-mouse-tool.ts | 16 ++++++- src/pages/page-web/projects/layer.vue | 2 +- src/types/map-enum.ts | 1 + src/utils/genjson.ts | 24 +++++++++- src/utils/map-layer-utils.ts | 13 +++++- 7 files changed, 108 insertions(+), 19 deletions(-) diff --git a/src/components/GMap.vue b/src/components/GMap.vue index 03f5be0..4b315ad 100644 --- a/src/components/GMap.vue +++ b/src/components/GMap.vue @@ -16,6 +16,9 @@
+
+ +
@@ -443,7 +446,8 @@ import { computed, defineComponent, onMounted, reactive, ref, watch, nextTick } import { generateLineContent, generatePointContent, - generatePolyContent + generatePolyContent, + generateCircleContent } from '../utils/map-layer-utils' import { postElementsReq } from '/@/api/layer' import { MapDoodleType, MapElementEnum } from '/@/constants/map' @@ -554,24 +558,24 @@ export default defineComponent({ } as DeviceOsd }) const shareId = computed(() => { - return store.state.layerBaseInfo.share + return store?.state?.layerBaseInfo.share }) const defaultId = computed(() => { - return store.state.layerBaseInfo.default + return store?.state?.layerBaseInfo.default }) const drawVisible = computed(() => { - return store.state.drawVisible + return store?.state?.drawVisible }) const osdVisible = computed(() => { - return store.state.osdVisible + return store?.state?.osdVisible }) const nevigationVisible = computed(() => { - return store.state.nevigationVisible + return store?.state?.nevigationVisible }) const nevigationInformation = computed(() => { - return store.state.nevigationInformation + return store?.state?.nevigationInformation }) - watch(() => store.state.deviceStatusEvent, + watch(() => store?.state?.deviceStatusEvent, data => { if (Object.keys(data.deviceOnline).length !== 0) { deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn) @@ -591,7 +595,7 @@ export default defineComponent({ } ) - watch(() => store.state.deviceState, data => { + watch(() => store?.state?.deviceState, data => { if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) { deviceTsaUpdateHook.moveTo(data.currentSn, data.gatewayInfo[data.currentSn].longitude, data.gatewayInfo[data.currentSn].latitude) if (osdVisible.value.visible && osdVisible.value.gateway_sn !== '') { @@ -616,7 +620,7 @@ export default defineComponent({ }) watch( - () => store.state.wsEvent, + () => store?.state?.wsEvent, newData => { const useGMapCoverHook = useGMapCover() const event = newData @@ -624,7 +628,7 @@ export default defineComponent({ if (Object.keys(event.mapElementCreat).length !== 0) { console.log(event.mapElementCreat) const ele = event.mapElementCreat - store.state.Layers.forEach(layer => { + store?.state?.Layers.forEach(layer => { layer.elements.forEach(e => { if (e.id === ele.id) { exist = true @@ -710,6 +714,9 @@ export default defineComponent({ case MapDoodleEnum.POLYGON: postPolygonResource(obj) break + case MapDoodleEnum.CIRCLE: + postCircleResource(obj) + break default: break } @@ -734,6 +741,14 @@ export default defineComponent({ store.state.coverList.push(obj) // console.log(store.state.coverList) } + async function postCircleResource (obj) { + const req = getCircleResource(obj) + setLayers(req) + updateCoordinates('gcj02-wgs84', req) + const result = await postElementsReq(shareId.value, req) + obj.setExtData({ id: req.id, name: req.name, area: 222 }) + store.state.coverList.push(obj) + } async function postPolygonResource (obj) { console.log(obj, 'hafhhaf') const req = getPoygonResource(obj) @@ -744,6 +759,17 @@ export default defineComponent({ store.state.coverList.push(obj) // console.log(store.state.coverList) } + function getCircleResource (obj) { + // name暂时写死，还在调试中 + const name = '1212' + const resource = generateCircleContent([...obj.getCenter().pos, obj.getRadius()]) + const id = uuidv4() + return { + id, + name, + resource + } + } function getPinPositionResource (obj) { const position = obj.getPosition() @@ -851,6 +877,23 @@ export default defineComponent({ }) } element.resource.content.geometry.coordinates = [coordinates] + } else if (MapElementEnum.CIR === type && geoType === 'Circle') { + let position = element.resource?.content.geometry + .coordinates + // 半径 + const radius = position[2] + if (transformType === 'wgs84-gcj02') { + position = wgs84togcj02( + position[0], + position[1] + ) as GeojsonCoordinate + } else if (transformType === 'gcj02-wgs84') { + position = gcj02towgs84( + position[0], + position[1] + ) as GeojsonCoordinate + } + element.resource.content.geometry.coordinates = [...position, radius] } } } diff --git a/src/constants/map.ts b/src/constants/map.ts index 0fb6293..7c64138 100644 --- a/src/constants/map.ts +++ b/src/constants/map.ts @@ -12,12 +12,14 @@ export const MapElementDefaultColor = MapElementColor.Default export enum MapDoodleColor { PinColor = '#2D8CF0', PolylineColor = '#3366FF', - PolygonColor = '#FF33FF' + PolygonColor = '#FF33FF', + CircleColor='pink' } export enum MapElementEnum { PIN = 0, LINE = 1, - POLY = 2 + POLY = 2, + CIR = 3 } export type MapDoodleType = 'pin' | 'polyline' | 'polygon' | 'off' diff --git a/src/hooks/use-mouse-tool.ts b/src/hooks/use-mouse-tool.ts index c8ef28e..4c38973 100644 --- a/src/hooks/use-mouse-tool.ts +++ b/src/hooks/use-mouse-tool.ts @@ -47,7 +47,18 @@ export function useMouseTool () { }) root?.$mouseTool.on('draw', getDrawCallback) } - + function drawCircle (type:MapDoodleType, getDrawCallback:Function) { + root?.$mouseTool.circle({ + strokeColor: "#FF33FF", + strokeOpacity: 1, + strokeWeight: 6, + strokeOpacity: 0.2, + fillColor: '#1791fc', + fillOpacity: 0.4, + strokeStyle: 'solid', + }) + root?.$mouseTool.on('draw', getDrawCallback) + } function drawOff (type:MapDoodleType) { root?.$mouseTool.close() root?.$mouseTool.off('draw') @@ -65,6 +76,9 @@ export function useMouseTool () { case MapDoodleEnum.POLYGON: drawPolygon(type, getDrawCallback) break + case MapDoodleEnum.CIRCLE: + drawCircle(type, getDrawCallback) + break case MapDoodleEnum.Close: drawOff(type) break diff --git a/src/pages/page-web/projects/layer.vue b/src/pages/page-web/projects/layer.vue index cecba51..ba8ac84 100644 --- a/src/pages/page-web/projects/layer.vue +++ b/src/pages/page-web/projects/layer.vue @@ -338,7 +338,7 @@ function setBaseInfo () { onMounted(() => { const element = document.getElementsByClassName('scrollbar').item(0) as HTMLDivElement const parent = element?.parentNode as HTMLDivElement - scorllHeight.value = parent.clientHeight - parent.firstElementChild!.clientHeight + scorllHeight.value = parent?.clientHeight - parent?.firstElementChild!.clientHeight getAllElement() }) function closeDrawer () { diff --git a/src/types/map-enum.ts b/src/types/map-enum.ts index f4a801e..195a03e 100644 --- a/src/types/map-enum.ts +++ b/src/types/map-enum.ts @@ -2,5 +2,6 @@ export enum MapDoodleEnum { PIN = 'pin', POLYLINE = 'polyline', POLYGON = 'polygon', + CIRCLE = 'circle', Close = 'off' } diff --git a/src/utils/genjson.ts b/src/utils/genjson.ts index 0bb5f37..d1dbaa7 100644 --- a/src/utils/genjson.ts +++ b/src/utils/genjson.ts @@ -26,7 +26,17 @@ export interface GeojsonPolygon { coordinates: GeojsonCoordinate[][] } } - +export interface GeojsonCircle { + type: 'Feature' + properties: { + color: string + clampToGround?: boolean + } + geometry: { + type: 'Circle' + coordinates: GeojsonCoordinate + } + } export interface GeojsonPoint { type: 'Feature' properties: { @@ -39,7 +49,7 @@ export interface GeojsonPoint { } } -export type GeojsonFeature = GeojsonLine | GeojsonPolygon | GeojsonPoint +export type GeojsonFeature = GeojsonLine | GeojsonPolygon | GeojsonPoint | GeojsonCircle export function geographic2Coordinate (position: MapGeographicPosition): GeojsonCoordinate { const coordinates: GeojsonCoordinate = [position.longitude, position.latitude] @@ -79,3 +89,13 @@ export function generatePoint (position: MapGeographicPosition, properties: Geoj }, } } +export function generateCircle (position: GeojsonCoordinate, properties: GeojsonCircle['properties']): GeojsonFeature { + return { + type: 'Feature', + properties, + geometry: { + type: 'Circle', + coordinates: position, + }, + } +} diff --git a/src/utils/map-layer-utils.ts b/src/utils/map-layer-utils.ts index 1517c1a..0c14e49 100644 --- a/src/utils/map-layer-utils.ts +++ b/src/utils/map-layer-utils.ts @@ -1,10 +1,10 @@ import { pinAMapPosition, MapGeographicPosition, Layer, LayerType, LayerElevationLoadStatus } from '/@/types/map' -import { generatePoint, generateLine, generatePolygon } from '/@/utils/genjson' +import { generatePoint, generateLine, generatePolygon, generateCircle } from '/@/utils/genjson' import { MapDoodleColor, MapElementEnum } from '/@/constants/map' function getPinPosition (pinAMapPosition: pinAMapPosition):MapGeographicPosition { return { height: 0, latitude: pinAMapPosition.lat, longitude: pinAMapPosition.lng } } - +export type GeojsonCoordinate = [number, number, number?] export function generatePointContent (pinAMapPosition: pinAMapPosition) { const position = getPinPosition(pinAMapPosition) return { @@ -15,6 +15,15 @@ export function generatePointContent (pinAMapPosition: pinAMapPosition) { }) } } +export function generateCircleContent (pinAMapPosition: GeojsonCoordinate) { + return { + type: MapElementEnum.CIR, + content: generateCircle(pinAMapPosition, { + color: MapDoodleColor.CircleColor, + clampToGround: true, + }) + } +} function getLieOrPolyPosition (mapPosition: pinAMapPosition[]):MapGeographicPosition[] { const position = [] as MapGeographicPosition[] mapPosition.forEach(item => {