diff --git a/src/assets/icons/circle.svg b/src/assets/icons/circle.svg
new file mode 100644
index 0000000..6340623
--- /dev/null
+++ b/src/assets/icons/circle.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695029064053" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2979" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512.00337692 223.62507194c-39.07811828 0-76.40824868 7.54812851-112.02349786 22.7966725-35.61524846 15.24854397-66.28448731 35.85361048-92.03419966 61.53711098-25.75633368 25.82254479-46.28194643 56.45205638-61.51062641 92.02757833-15.26178662 35.70794488-22.88274757 72.93213694-22.88274757 112.07646705 0 39.01190645 7.62096168 76.36852217 22.88274757 111.94404411 15.22868071 35.71456621 35.75429346 66.3440778 61.51062641 92.1666226 25.74971235 25.69012185 56.41895047 46.14952278 92.03419966 61.53049039a284.03475437 284.03475437 0 0 0 112.02349786 22.80329382c39.06487635 0 76.39500676-7.69379412 112.01025522-22.80329382 35.61524846-15.38096763 66.28448731-35.84698987 92.03419965-61.5304904 25.75633368-25.82254479 46.28194643-56.45205638 61.51062642-92.16662258 15.28827122-35.57552195 22.88274757-72.93213694 22.88274758-111.94404412 0-39.1443301-7.5944771-76.36852217-22.88274758-112.07646704-15.22868071-35.57552195-35.75429346-66.21165414-61.51062642-92.03419894-25.74971235-25.67687918-56.41895047-46.28194643-92.03419965-61.53049038C588.39838368 231.17982179 551.06163194 223.62507194 511.99675559 223.62507194m0-82.41364616c50.20167629 0 98.25809517 9.75297643 144.02359033 29.39797427 45.79860107 19.63837652 85.22764104 46.0104785 118.27387798 79.10968462 33.07272152 32.96678243 59.41833818 72.38920181 79.03023011 118.2606353 19.61851326 45.73901058 29.43770153 93.81529271 29.45094418 143.94413656 0.03972724 50.27450871-9.81918826 98.35079085-29.45094418 144.08980216-19.62513458 45.87143423-45.97075126 85.29385288-79.03023011 118.254014-33.03299426 33.10582743-72.43554966 59.47792868-118.27387797 79.12292725C610.19526027 872.88993219 562.19181056 882.78195289 512.00337692 882.78195289c-50.18843363 0-98.19188333-9.89202143-144.02359031-29.39797427-45.85157025-19.63837652-85.26736828-46.0104785-118.28712063-79.1096846C216.62656579 741.30751156 190.28757045 701.8850922 170.66243587 656.00703736 151.03068066 610.27464813 141.17176516 562.19836599 141.21149168 511.93047787c0.01324266-50.13546446 9.83243092-98.21174661 29.45094419-143.94413656 19.61189194-45.88467617 45.950888-85.3004742 79.03023011-118.26725664 33.0396156-33.10582743 72.47527689-59.47130809 118.28712063-79.11630594C413.73866043 150.96440221 461.78845799 141.21142578 511.99675559 141.21142578" p-id="2980" fill="#1296db"></path></svg>
\ No newline at end of file
diff --git a/src/components/GMap.vue b/src/components/GMap.vue
index 4b315ad..60f1089 100644
--- a/src/components/GMap.vue
+++ b/src/components/GMap.vue
@@ -17,7 +17,7 @@
<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>
+ <a><a-image :src="cir" :preview="false" /></a>
</div>
<div v-if="mouseMode" class="g-action-item" @click="draw('off', false)">
<a style="color: red;"><CloseOutlined /></a>
@@ -33,7 +33,7 @@
</div>
</div>
<!-- 飞机OSD -->
- <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12">
+ <div v-if="osdVisible?.visible && !osdVisible?.is_dock" class="osd-panel fz12">
<div style="opacity: 0.8;background: #000;">
<div class="pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 18%;">
<span>{{ osdVisible.callsign }}</span>
@@ -166,7 +166,7 @@
</div> -->
<!-- 机场OSD -->
- <div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12">
+ <div v-if="osdVisible?.visible && osdVisible?.is_dock" class="osd-panel fz12">
<div class="fz16 pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 10%;">
<span>{{ osdVisible.gateway_callsign }}</span>
<span><a style="color: white;" @click="() => osdVisible.visible = false"><CloseOutlined /></a></span>
@@ -466,13 +466,14 @@ import {
DeviceOsd, DeviceStatus, DockOsd, EGear, EModeCode, GatewayOsd, EDockModeCode,
NetworkStateQualityEnum, NetworkStateTypeEnum, RainfallEnum, DroneInDockEnum
} from '/@/types/device'
+import cir from '/@/assets/icons/circle.svg'
import pin from '/@/assets/icons/pin-2d8cf0.svg'
import M30 from '/@/assets/icons/m30.png'
import {
BorderOutlined, LineOutlined, CloseOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,
ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined,
FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined,
- EyeInvisibleOutlined, VideoCameraOutlined
+ VideoCameraOutlined, LeftCircleOutlined
} from '@ant-design/icons-vue'
import { EDeviceTypeName } from '../types'
import DockControlPanel from './g-map/DockControlPanel.vue'
@@ -483,6 +484,7 @@ import LiveNewOthers from '/@/components/livestream-newOthers.vue'
export default defineComponent({
components: {
+ LeftCircleOutlined,
LiveNewOthers,
BorderOutlined,
LineOutlined,
@@ -626,13 +628,11 @@ export default defineComponent({
const event = newData
let exist = false
if (Object.keys(event.mapElementCreat).length !== 0) {
- console.log(event.mapElementCreat)
const ele = event.mapElementCreat
store?.state?.Layers.forEach(layer => {
layer.elements.forEach(e => {
if (e.id === ele.id) {
exist = true
- console.log('true')
}
})
})
@@ -702,8 +702,6 @@ export default defineComponent({
})
function getDrawCallback ({ obj }) {
- console.log(333)
- console.log(obj)
switch (state.currentType) {
case MapDoodleEnum.PIN:
postPinPositionResource(obj)
@@ -750,19 +748,17 @@ export default defineComponent({
store.state.coverList.push(obj)
}
async function postPolygonResource (obj) {
- console.log(obj, 'hafhhaf')
const req = getPoygonResource(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)
- // console.log(store.state.coverList)
}
function getCircleResource (obj) {
// name暂时写死，还在调试中
const name = '1212'
- const resource = generateCircleContent([...obj.getCenter().pos, obj.getRadius()])
+ const resource = generateCircleContent(obj.getCenter(), obj.getRadius())
const id = uuidv4()
return {
id,
@@ -808,14 +804,13 @@ export default defineComponent({
return { name, id }
}
function setLayers (resource: PostElementsBody) {
- const layers = store.state.Layers
- const layer = layers.find(item => item.id.includes(shareId.value))
+ const layers = store?.state?.Layers
+ const layer = layers ? layers.find(item => item.id.includes(shareId.value)) : ''
// layer.id = 'private_layer' + uuidv4()
// layer?.elements.push(resource)
if (layer?.elements) {
(layer?.elements as any[]).push(resource)
}
- // console.log('layers', layers)
// store.commit('SET_LAYER_INFO', layers)
}
function updateCoordinates (transformType: string, element: any) {
@@ -880,7 +875,7 @@ export default defineComponent({
} else if (MapElementEnum.CIR === type && geoType === 'Circle') {
let position = element.resource?.content.geometry
.coordinates
- // 半径
+ // 半径
const radius = position[2]
if (transformType === 'wgs84-gcj02') {
position = wgs84togcj02(
@@ -919,6 +914,7 @@ export default defineComponent({
pin,
state,
M30,
+ cir,
deviceInfo,
EGear,
EModeCode,
diff --git a/src/components/LayersTree.vue b/src/components/LayersTree.vue
index 56286d8..d0f5bc4 100644
--- a/src/components/LayersTree.vue
+++ b/src/components/LayersTree.vue
@@ -47,7 +47,7 @@ const state = reactive({
})
const getTreeData = computed(() => {
// console.log('props.treeData', JSON.parse(JSON.stringify(props.layerData)))
- return JSON.parse(JSON.stringify(props.layerData))
+ return JSON.parse(JSON.stringify(props?.layerData))
})
const shareId = computed(() => {
return store.state.layerBaseInfo.share
diff --git a/src/hooks/use-g-map-cover.ts b/src/hooks/use-g-map-cover.ts
index f5c913e..ca686aa 100644
--- a/src/hooks/use-g-map-cover.ts
+++ b/src/hooks/use-g-map-cover.ts
@@ -76,7 +76,6 @@ export function useGMapCover () {
strokeColor: '#FF33FF',
strokeOpacity: 1,
strokeWeight: 6,
- strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
@@ -84,7 +83,10 @@ export function useGMapCover () {
fillColor: color,
zIndex: 50,
})
-
+ // 点击触发
+ circle.on('click', function (e) {
+ store.commit('SET_LAYER_ID', data.id)
+ })
AddCoverToMap(circle)
}
diff --git a/src/pages/page-web/projects/layer.vue b/src/pages/page-web/projects/layer.vue
index 0b9240f..61fd5cc 100644
--- a/src/pages/page-web/projects/layer.vue
+++ b/src/pages/page-web/projects/layer.vue
@@ -171,14 +171,13 @@ import importImg from '/@/assets/icons/import.svg'
const root = getRoot()
const store = useMyStore()
let useGMapCoverHook = useGMapCover(store)
-console.log('store', store)
const mapLayers = ref(store?.state?.Layers)
const checkedKeys = ref<string[]>([])
const selectedKeys = ref<string[]>([])
const selectedKey = ref<string>('')
const selectedLayer = ref<any>(null)
const visible = ref<boolean>(false)
-store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
+store?.commit('SET_DRAW_VISIBLE_INFO', visible.value)
const geoType = GeoType
const layerState = reactive({
layerName: '',
@@ -216,7 +215,7 @@ function initMapCover () {
})
}
watch(
- () => store.state.Layers,
+ () => store?.state.Layers,
newData => {
mapLayers.value = newData
},
@@ -226,13 +225,13 @@ watch(
)
watch(
- () => store.state.layerId,
+ () => store?.state.layerId,
newLayerId => {
selectedKey.value = 'resource__' + newLayerId
selectedLayer.value = getCurrentLayer(selectedKey.value)
setBaseInfo()
visible.value = true
- store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
+ store?.commit('SET_DRAW_VISIBLE_INFO', visible.value)
},
{
deep: true // 监听属性变化
@@ -285,20 +284,18 @@ function checkLayer (keys: string[]) {
console.log('checkLayer', keys, selectedKeys.value, checkedKeys.value)
}
function selectLayer (keys: string[], e) {
- // console.log('selectLayer', e.node.eventKey, e.selected)
if (e.selected) {
selectedKey.value = e.node.eventKey
selectedLayer.value = getCurrentLayer(selectedKey.value)
setBaseInfo()
}
visible.value = e.selected
- store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
+ store?.commit('SET_DRAW_VISIBLE_INFO', visible.value)
// store.dispatch('updateElement', { type: 'is_select', id: e.node.eventKey, bool: e.selected })
}
function getCurrentLayer (id: string) {
- const Layers = store.state.Layers
+ const Layers = store?.state.Layers
const key = id.replaceAll('resource__', '')
- // console.log('selectedKey.value', selectedKey.value)
let layer = null
const findCan = function (V) {
V.forEach(item => {
@@ -312,7 +309,6 @@ function getCurrentLayer (id: string) {
}
findCan(Layers)
// const layer = Layers.find(item => item.elements.find(el => el.id === key))
- console.log('layer', layer)
return layer
}
function setBaseInfo () {
@@ -348,7 +344,7 @@ onMounted(() => {
getAllElement()
})
function closeDrawer () {
- store.commit('SET_DRAW_VISIBLE_INFO', false)
+ store?.commit('SET_DRAW_VISIBLE_INFO', false)
selectedKeys.value = []
}
function changeColor (color: Color) {
@@ -363,13 +359,12 @@ async function deleteElement () {
const elementid = selectedLayer.value.id
await deleteElementReq(elementid, {}).then(async (res: any) => {
- // console.log('delete element res:', res)
if (res.code !== 0) {
console.warn(res)
return
}
visible.value = false
- store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
+ store?.commit('SET_DRAW_VISIBLE_INFO', visible.value)
useGMapCoverHook.removeCoverFromMap(elementid)
getElementGroups()
})
@@ -382,9 +377,9 @@ async function getElementGroups (type?: string) {
mapLayers.value = result.data
mapLayers.value = updateWgs84togcj02()
if (type && type === 'init') {
- store.dispatch('setLayerInfo', mapLayers.value)
+ store?.dispatch('setLayerInfo', mapLayers.value)
}
- store.commit('SET_LAYER_INFO', mapLayers.value)
+ store?.commit('SET_LAYER_INFO', mapLayers.value)
}
async function updateElements () {
let content = null
@@ -489,6 +484,23 @@ function updateCoordinates (transformType: string, element: LayerResource) {
})
}
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/types/mapLayer.ts b/src/types/mapLayer.ts
index e51af68..c5df9dc 100644
--- a/src/types/mapLayer.ts
+++ b/src/types/mapLayer.ts
@@ -72,7 +72,8 @@ export interface Color {
export enum GeoType {
LineString = 'LineString',
Polygon = 'Polygon',
- Point = 'Point'
+ Point = 'Point',
+ Circle ='Circle'
}
export enum ResourceStatus {
NotShow,