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 @@
<div :class="state.currentType === 'polygon' ? 'g-action-item selection' : 'g-action-item'" @click="draw('polygon', true)">
<a><BorderOutlined class="fz18" /></a>
</div>
+ <div :class="state.currentType === 'circle' ? 'g-action-item selection' : 'g-action-item'" @click="draw('circle', true)">
+ <a><BorderOutlined class="fz18" /></a>
+ </div>
<div v-if="mouseMode" class="g-action-item" @click="draw('off', false)">
<a style="color: red;"><CloseOutlined /></a>
</div>
@@ -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 => {