{{ osdVisible.gateway_callsign }}
@@ -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
([])
const selectedKeys = ref([])
const selectedKey = ref('')
const selectedLayer = ref(null)
const visible = ref(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,