<template>
|
<!-- <el-tree-->
|
<!-- :props="defaultProps"-->
|
<!-- :data="treeData"-->
|
<!-- show-checkbox-->
|
<!-- node-key="id"-->
|
<!-- :expand-on-click-node="false"-->
|
<!-- :check-on-click-node="false"-->
|
<!-- :check-on-click-leaf="false"-->
|
<!-- @check="handleCheckChange"-->
|
<!-- />-->
|
<div class="baseLayer-manage">
|
<van-collapse v-model="activeName" accordion>
|
<van-collapse-item
|
v-for="item in treeData"
|
:key="item.id"
|
:name="item.id"
|
>
|
<!-- 自定义标题区域 -->
|
<template #title>
|
<div class="title-content">
|
<!-- 复选框 - 阻止事件冒泡 -->
|
<div class="checkbox-wrapper" @click.stop>
|
<van-checkbox
|
:model-value="item.isCheck"
|
@update:model-value="(val) => handleParentChange(item, val)"
|
shape="square"
|
>
|
</van-checkbox>
|
</div>
|
|
<!-- 名称 - 点击执行其他方法 -->
|
<div class="title-text" @click.stop>
|
{{ item.label }}
|
</div>
|
</div>
|
</template>
|
|
<!-- 子级内容 -->
|
<div class="item-child" v-for="child in item.children" :key="child.id">
|
<div>
|
<van-checkbox
|
:model-value="child.isCheck"
|
@update:model-value="(val) => handleChildChange(item, child, val)"
|
shape="square"
|
/>
|
</div>
|
<div class="child-name" @click.stop>{{ child.label }}</div>
|
</div>
|
</van-collapse-item>
|
</van-collapse>
|
</div>
|
</template>
|
|
<script setup>
|
import L from 'leaflet'
|
import { getIimitationArea } from '@/api/map/dji'
|
import { onMounted } from 'vue'
|
|
// 基础图层-禁飞区、国土规划
|
const defaultProps = {
|
label: 'label',
|
children: 'children',
|
}
|
const props = defineProps({
|
getCurMap: Function
|
})
|
|
let mapInstance = null
|
mapInstance = props.getCurMap()
|
|
const activeName = ref('')
|
const treeData = ref([
|
{
|
id: '1',
|
label: '禁飞区',
|
type: 'parent',
|
isCheck: false,
|
children: [
|
{
|
id: '1-1',
|
label: '禁飞区',
|
color: '#DE4329',
|
type: 'no-fly',
|
level: 2,
|
isCheck: false,
|
},
|
{
|
id: '1-2',
|
label: '限高区',
|
color: '#979797',
|
type: 'no-fly',
|
level: 2,
|
isCheck: false,
|
},
|
{
|
id: '1-3',
|
label: '授权区',
|
color: '#7aacf1',
|
type: 'no-fly',
|
level: 1,
|
isCheck: false,
|
},
|
{
|
id: '1-4',
|
label: '警示区',
|
color: '#f8d35a',
|
type: 'no-fly',
|
level: 0,
|
isCheck: false,
|
},
|
{
|
id: '1-5',
|
label: '加强警示区',
|
color: '#EE8815',
|
type: 'no-fly',
|
level: 3,
|
isCheck: false,
|
},
|
{
|
id: '1-6',
|
label: '法规限制区',
|
color: '#65c1d8',
|
type: 'no-fly',
|
level: 7,
|
isCheck: false,
|
},
|
{
|
id: '1-7',
|
label: '轻型无人机适飞区',
|
color: '#498849',
|
type: 'no-fly',
|
level: 8,
|
isCheck: false,
|
},
|
],
|
},
|
{
|
id: '2',
|
label: '国土空间规划',
|
type: 'parent',
|
children: [
|
{
|
id: '2-1',
|
label: '土地利用现状图',
|
type: 'layer-map',
|
isCheck: false,
|
title: 'GXTDLYXZ',
|
mapType: 'arcgis',
|
src: '/arcgis116/rest/services/DTFW/GXTDLYXZ/MapServer/WMTS',
|
},
|
],
|
},
|
])
|
|
//=================================
|
|
// 处理父级复选框变化
|
const handleParentChange = (item, isChecked) => {
|
console.log('父级变化:', item.name, isChecked)
|
// 更新父级状态
|
item.isCheck = isChecked
|
|
// 更新所有子级状态与父级一致
|
if (item.children && item.children.length > 0) {
|
item.children.forEach(child => {
|
child.isCheck = isChecked
|
})
|
}
|
// 触发 check 事件
|
triggerCheckEvent(item)
|
}
|
|
// 处理子级复选框变化
|
const handleChildChange = (item, child, isChecked) => {
|
console.log('子级变化:', child.name, isChecked)
|
|
// 更新子级状态
|
child.isCheck = isChecked
|
|
// 更新父级状态
|
updateParentState(item)
|
|
// 触发 check 事件
|
triggerCheckEvent(item)
|
}
|
|
// 更新父级状态（根据子级选中情况）
|
const updateParentState = (item) => {
|
if (!item.children || item.children.length === 0) {
|
item.isCheck = false
|
return
|
}
|
|
// 检查是否所有子级都被选中
|
const allChildrenChecked = item.children.every(child => child.isCheck)
|
// 检查是否有至少一个子级被选中
|
const someChildrenChecked = item.children.some(child => child.isCheck)
|
|
item.isCheck = allChildrenChecked
|
}
|
|
// 获取选中的节点数据
|
const getCheckedData = () => {
|
const checkedKeys = []
|
const checkedNodes = []
|
const halfCheckedKeys = []
|
const halfCheckedNodes = []
|
|
// 获取所有选中的节点
|
treeData.value.forEach(item => {
|
// 检查父级是否选中
|
if (item.isCheck) {
|
checkedKeys.push(item.id)
|
checkedNodes.push(item)
|
}
|
|
// 检查子级
|
if (item.children && item.children.length > 0) {
|
item.children.forEach(child => {
|
if (child.isCheck) {
|
checkedKeys.push(child.id)
|
checkedNodes.push(child)
|
}
|
})
|
|
// 检查半选中状态（部分子级选中）
|
const checkedChildrenCount = item.children.filter(child => child.isCheck).length
|
if (checkedChildrenCount > 0 && checkedChildrenCount < item.children.length) {
|
halfCheckedKeys.push(item.id)
|
halfCheckedNodes.push(item)
|
}
|
}
|
})
|
|
return {
|
checkedKeys,
|
checkedNodes,
|
halfCheckedKeys,
|
halfCheckedNodes
|
}
|
}
|
|
// 触发 check 事件
|
const triggerCheckEvent = (data) => {
|
const checkedData = getCheckedData()
|
console.log('选中数据:', checkedData)
|
handleCheckChange(data,checkedData)
|
}
|
//================end=================
|
|
let customMapLayer = {}
|
let curCheckData = []
|
let curClickData = []
|
let areaValues = []
|
|
let limitAreas = {
|
// 禁飞区
|
polygons: [],
|
// 限高区
|
limitHeightPolygons: [],
|
// 圆形禁飞区
|
circles: [],
|
// 圆形限高区
|
limitHeightCircles: [],
|
// 授权区
|
authorityAreas: [],
|
// 法规限制区
|
legalRestrictionsAreas: [],
|
// 轻型无人机适飞空域
|
lightUAVAreas: [],
|
// 警示区
|
warningAreas: [],
|
// 加强警示区
|
strengthenWarningAreas: [],
|
}
|
|
const handleCheckChange = (data, checked, indeterminate) => {
|
curClickData = getClickData(data)
|
|
curClickData = curClickData.map(i => ({
|
...i,
|
isCheck: checked.checkedKeys.includes(i.id),
|
}))
|
|
curCheckData = checked.checkedNodes.filter(item => item.type === 'no-fly')
|
areaValues = checked.checkedNodes.filter(item => item.type === 'no-fly').map(item => item.label)
|
|
curClickData.forEach(item => !item.isCheck && removeCustomLayers(item))
|
|
initMoveEnd()
|
initCustomLayer()
|
}
|
|
const getClickData = data => {
|
if (!data?.children && data.type !== 'parent') return [data]
|
|
return data.children
|
}
|
|
// 国土空间规划
|
let curAddLayers = []
|
function initCustomLayer() {
|
let curCheckLayerData = curClickData.filter(i => i.isCheck)
|
|
if (curCheckLayerData.length === 0) return
|
|
curCheckLayerData.forEach(item => addCustomLayers(item.title, item))
|
|
curAddLayers = [...curCheckLayerData]
|
}
|
// 国土空间规划
|
const addCustomLayers = async (layerName, options) => {
|
if (options.mapType === 'arcgis') {
|
console.log('添加WMTS图层:', options.src)
|
|
// 构建正确的 WMTS GetTile URL
|
const wmtsUrl = `${options.src}?service=WMTS&request=GetTile&version=1.0.0` +
|
`&layer=${options.layer || options.title}` +
|
`&style=default` +
|
`&format=image/png` +
|
`&tilematrixset={tileMatrixSet}` +
|
`&tilematrix={z}` +
|
`&tilerow={y}` +
|
`&tilecol={x}`;
|
|
let wmtsLayer = L.tileLayer(wmtsUrl, {
|
tileMatrixSet: 'default028mm', // ArcGIS 常用的矩阵集
|
maxZoom: 18,
|
minZoom: 0,
|
attribution: options.attribution || 'ArcGIS WMTS'
|
})
|
|
// 添加事件监听来调试
|
wmtsLayer.on('load', () => console.log('WMTS图层加载成功'))
|
wmtsLayer.on('tileload', (e) => console.log('瓦片加载:', e.coords))
|
wmtsLayer.on('tileerror', (e) => console.error('瓦片错误:', e.coords, e.error))
|
|
// 添加到地图
|
wmtsLayer.addTo(mapInstance)
|
customMapLayer[layerName] = wmtsLayer
|
}
|
|
// if (options.mapType === 'Cesium3DTile') {
|
// const tileset = await Cesium.Cesium3DTileset.fromUrl(options.src)
|
//
|
// customMapLayer[layerName] = viewer?.scene.primitives.add(tileset)
|
// }
|
}
|
|
const removeCustomLayers = options => {
|
const { title, mapType } = options
|
|
if (title && customMapLayer[title]) {
|
if (mapType === 'arcgis') {
|
// Leaflet 移除图层
|
mapInstance?.removeLayer(customMapLayer[title])
|
}
|
// if (mapType === 'Cesium3DTile') {
|
// viewer?.scene.primitives.remove(customMapLayer[title])
|
// }
|
|
delete customMapLayer[title]
|
}
|
}
|
const initMoveEnd = async e => {
|
clearLimitAreas(limitAreas)
|
|
if (curCheckData.length === 0) return
|
|
const level = curCheckData.map(item => item?.level || 0).join(',')
|
|
const cornerResult = getScreenCorner()
|
|
const params = {
|
level,
|
ltlat: cornerResult.lt[1],
|
ltlng: cornerResult.lt[0],
|
rblat: cornerResult.rb[1],
|
rblng: cornerResult.rb[0],
|
}
|
|
const { data } = await getIimitationArea(params)
|
|
if (data.code !== 0) return
|
|
const areas = data.data.areas
|
|
if (!areas || areas.length === 0) return
|
|
limitAreas = {
|
polygons: [],
|
limitHeightPolygons: [],
|
circles: [],
|
limitHeightCircles: [],
|
// 警示区
|
warningAreas: [],
|
// 加强警示区
|
strengthenWarningAreas: [],
|
authorityAreas: [],
|
// 法规限制区
|
legalRestrictionsAreas: [],
|
// 轻型无人机适飞空域
|
lightUAVAreas: [],
|
}
|
|
areas.forEach(area => {
|
// 判断是不是圆形
|
if (!area.sub_areas && !area.polygon_points) {
|
// 限高区、禁飞区
|
if (area.level === 2) {
|
if (area.color === '#DE4329' && areaValues.includes('禁飞区')) {
|
limitAreas.circles.push(area)
|
}
|
if (area.color !== '#979797' && areaValues.includes('限高区')) {
|
limitAreas.limitHeightCircles.push(area)
|
}
|
}
|
// 警示区
|
if (area.level === 0) {
|
if (area.polygon_points) {
|
limitAreas.warningAreas.push(area.polygon_points)
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(item => {
|
limitAreas.warningAreas.push(item)
|
})
|
}
|
}
|
// 加强警示区
|
if (area.level === 3) {
|
if (area.polygon_points) {
|
limitAreas.strengthenWarningAreas.push(area.polygon_points)
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(item => {
|
limitAreas.strengthenWarningAreas.push(item)
|
})
|
}
|
}
|
// 授权区
|
if (area.level === 1) {
|
if (area.polygon_points) {
|
limitAreas.authorityAreas.push(area)
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(item => {
|
if (item.polygon_points) {
|
limitAreas.authorityAreas.push(item)
|
}
|
})
|
}
|
}
|
// 法规限制区
|
if (area.level === 7) {
|
if (area.polygon_points) {
|
limitAreas.legalRestrictionsArea.push(area)
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(item => {
|
if (item.polygon_points) {
|
limitAreas.legalRestrictionsArea.push(item)
|
}
|
})
|
}
|
}
|
// 轻型无人机适飞区
|
if (area.level === 8) {
|
if (area.polygon_points) {
|
limitAreas.lightUAVAreas.push(area)
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(item => {
|
if (item.polygon_points) {
|
limitAreas.lightUAVAreas.push(item)
|
}
|
})
|
}
|
}
|
} else {
|
// 限高区、禁飞区
|
if (area.level === 2) {
|
if (area.polygon_points) {
|
if (area.height === 0 && areaValues.includes('禁飞区')) {
|
limitAreas.polygons.push(area.polygon_points)
|
}
|
if (area.height !== 0 && areaValues.includes('限高区')) {
|
limitAreas.limitHeightPolygons.push(area.polygon_points)
|
}
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(subAreas => {
|
if (subAreas.height === 0 && areaValues.includes('禁飞区')) {
|
limitAreas.polygons.push(subAreas)
|
}
|
if (subAreas.height !== 0 && areaValues.includes('限高区')) {
|
limitAreas.limitHeightPolygons.push(subAreas)
|
}
|
})
|
}
|
}
|
// 警示区
|
if (area.level === 0) {
|
if (area.polygon_points) {
|
limitAreas.warningAreas.push(area)
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(item => {
|
if (item.polygon_points) {
|
limitAreas.warningAreas.push(item)
|
}
|
})
|
}
|
}
|
// 加强警示区
|
if (area.level === 3) {
|
if (area.polygon_points) {
|
limitAreas.strengthenWarningAreas.push(area)
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(item => {
|
if (item.polygon_points) {
|
limitAreas.strengthenWarningAreas.push(item)
|
}
|
})
|
}
|
}
|
// 授权区
|
if (area.level === 1) {
|
if (area.polygon_points) {
|
limitAreas.authorityAreas.push(area)
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(item => {
|
if (item.polygon_points) {
|
limitAreas.authorityAreas.push(item)
|
}
|
})
|
}
|
}
|
// 法规限制区
|
if (area.level === 7) {
|
if (area.polygon_points) {
|
limitAreas.legalRestrictionsArea.push(area)
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(item => {
|
if (item.polygon_points) {
|
limitAreas.legalRestrictionsArea.push(item)
|
}
|
})
|
}
|
}
|
// 轻型无人机适飞区
|
if (area.level === 8) {
|
if (area.polygon_points) {
|
limitAreas.lightUAVAreas.push(area)
|
}
|
if (area.sub_areas) {
|
area.sub_areas.forEach(item => {
|
if (item.polygon_points) {
|
limitAreas.lightUAVAreas.push(item)
|
}
|
})
|
}
|
}
|
}
|
})
|
|
drawLimitAreas(limitAreas)
|
}
|
function drawLimitAreas(areaData) {
|
const {
|
polygons,
|
limitHeightPolygons,
|
circles,
|
limitHeightCircles,
|
strengthenWarningAreas,
|
warningAreas,
|
// 授权区
|
authorityAreas,
|
// 法规限制区
|
legalRestrictionsAreas,
|
// 轻型无人机适飞空域
|
lightUAVAreas,
|
} = areaData
|
|
if (polygons.length !== 0) {
|
polygons.forEach((polygon, index) => {
|
const { polygon_points, height } = polygon
|
const points = polygon_points[0].map(point => {
|
point.push(height)
|
return point
|
})
|
addPolygon({
|
id: 'limit_polygon_' + index,
|
positions: points.flat(),
|
extrudedHeight: height,
|
color: polygon.color,
|
})
|
})
|
}
|
|
if (limitHeightPolygons.length !== 0) {
|
limitHeightPolygons.forEach((limitHeightPolygon, index) => {
|
const { polygon_points, height } = limitHeightPolygon
|
const newPolygonPoints = [...polygon_points[0]]
|
|
const points = newPolygonPoints.map(point => {
|
return [...point, height]
|
})
|
|
addPolygon(
|
{
|
id: 'limit_height_polygon_' + index,
|
positions: points.flat(),
|
noHeightPosition: newPolygonPoints.flat(),
|
extrudedHeight: height,
|
color: limitHeightPolygon.color,
|
},
|
true
|
)
|
})
|
}
|
|
if (circles.length !== 0) {
|
circles.forEach((circle, index) => {
|
addCircle({
|
id: 'limit_circle_' + index,
|
longitude: circle.lng,
|
latitude: circle.lat,
|
color: circle.color,
|
radius: circle.radius,
|
})
|
})
|
}
|
|
if (limitHeightCircles.length !== 0) {
|
limitHeightCircles.forEach((circle, index) => {
|
addCircle(
|
{
|
id: 'limit_height_circle_' + index,
|
longitude: circle.lng,
|
latitude: circle.lat,
|
color: circle.color,
|
radius: circle.radius,
|
},
|
true
|
)
|
})
|
}
|
|
if (warningAreas.length !== 0) {
|
warningAreas.forEach((area, index) => {
|
const { polygon_points, height } = area
|
const points = polygon_points[0].map(point => {
|
point.push(height)
|
return point
|
})
|
addPolygon({
|
id: 'warning_area_' + index,
|
positions: points.flat(),
|
extrudedHeight: height,
|
color: area.color,
|
})
|
})
|
}
|
|
if (strengthenWarningAreas.length !== 0) {
|
strengthenWarningAreas.forEach((area, index) => {
|
const { polygon_points, height } = area
|
const points = polygon_points[0].map(point => {
|
point.push(height)
|
return point
|
})
|
addPolygon({
|
id: 'strengthen_warning_area_' + index,
|
positions: points.flat(),
|
extrudedHeight: height,
|
color: area.color,
|
})
|
})
|
}
|
|
if (authorityAreas.length !== 0) {
|
authorityAreas.forEach((area, index) => {
|
const { polygon_points, height } = area
|
const points = polygon_points[0].map(point => {
|
point.push(height)
|
return point
|
})
|
addPolygon({
|
id: 'authority_area_' + index,
|
positions: points.flat(),
|
extrudedHeight: height,
|
color: area.color,
|
})
|
})
|
}
|
|
if (legalRestrictionsAreas.length !== 0) {
|
legalRestrictionsAreas.forEach((area, index) => {
|
const { polygon_points, height } = area
|
const points = polygon_points[0].map(point => {
|
point.push(height)
|
return point
|
})
|
addPolygon({
|
id: 'legalRestrictions_area_' + index,
|
positions: points.flat(),
|
extrudedHeight: height,
|
color: area.color,
|
})
|
})
|
}
|
|
if (lightUAVAreas.length !== 0) {
|
lightUAVAreas.forEach((area, index) => {
|
const { polygon_points, height } = area
|
const points = polygon_points[0].map(point => {
|
point.push(height)
|
return point
|
})
|
addPolygon({
|
id: 'lightUAV_area_' + index,
|
positions: points.flat(),
|
extrudedHeight: height,
|
color: area.color,
|
})
|
})
|
}
|
}
|
|
// 存储圆形图层的对象
|
const circleLayers = {}
|
|
const addCircle = (option, isPullUp = false) => {
|
if (!option.longitude || !option.latitude || !option.radius) {
|
console.warn('添加圆形失败：缺少必要的参数 (longitude, latitude, radius)')
|
return null
|
}
|
|
try {
|
const { longitude, latitude, radius, color = '#3388ff', id } = option
|
|
// 创建样式对象
|
const style = {
|
color: color,
|
fillColor: color,
|
fillOpacity: 0.1,
|
weight: 3,
|
opacity: 1
|
}
|
|
// 创建圆形
|
const circle = L.circle([latitude, longitude], {
|
radius: radius,
|
...style
|
})
|
|
// 设置 ID
|
const circleId = id || `circle_${Date.now()}`
|
circle._id = circleId
|
|
// 添加弹出窗口
|
if (option.popup) {
|
circle.bindPopup(option.popup)
|
}
|
|
// 添加工具提示
|
if (option.tooltip) {
|
circle.bindTooltip(option.tooltip)
|
}
|
|
// 添加点击事件
|
if (option.onClick) {
|
circle.on('click', option.onClick)
|
}
|
|
// 添加到地图
|
circle.addTo(mapInstance)
|
|
// 处理拔起效果
|
// if (isPullUp) {
|
// handleCircleExtrudedEffect(circle, option)
|
// }
|
|
// 存储引用
|
circleLayers[circleId] = circle
|
|
return circle
|
|
} catch (error) {
|
console.error('添加圆形失败:', error)
|
return null
|
}
|
}
|
// 存储多边形对象的全局变量
|
const polygonLayers = {}
|
|
const addPolygon = (option, isPullUp = false) => {
|
if (option.positions.length === 0) return
|
|
try {
|
// 转换坐标格式
|
const latLngs = []
|
for (let i = 0; i < option.positions.length; i += 3) {
|
// 注意：Cesium 是 [经度, 纬度, 高度]，Leaflet 需要 [纬度, 经度]
|
const lng = option.positions[i]
|
const lat = option.positions[i + 1]
|
latLngs.push([lat, lng])
|
}
|
|
// 创建样式
|
const style = {
|
fillColor: option.color,
|
fillOpacity: 0.1,
|
color: option.color,
|
weight: 3,
|
opacity: 1,
|
className: option.className || '' // 自定义 CSS 类
|
}
|
|
// 处理 zIndex
|
if (option.zIndex) {
|
style.zIndex = option.zIndex
|
}
|
|
// 创建多边形
|
const polygon = L.polygon(latLngs, style)
|
|
// 设置 ID
|
const polygonId = option.id || `polygon_${Date.now()}`
|
polygon._id = polygonId
|
|
// 添加弹出窗口
|
if (option.popup) {
|
polygon.bindPopup(option.popup)
|
}
|
|
// 添加鼠标事件
|
if (option.onClick) {
|
polygon.on('click', option.onClick)
|
}
|
|
// 添加到地图
|
polygon.addTo(mapInstance)
|
|
// 处理拔起效果
|
// if (isPullUp && option.extrudedHeight) {
|
// handleExtrudedEffect(polygon, option)
|
// }
|
|
// 存储引用
|
polygonLayers[polygonId] = polygon
|
|
return polygon
|
|
} catch (error) {
|
console.error('添加多边形失败:', error)
|
return null
|
}
|
}
|
// 获取4个角的经纬度
|
function getScreenCorner() {
|
const bounds = mapInstance.getBounds();
|
const container = mapInstance.getContainer();
|
const containerRect = container.getBoundingClientRect();
|
|
// 获取四个角的像素坐标
|
const pixelCorners = {
|
lb: mapInstance.latLngToContainerPoint(bounds.getSouthWest()), // 左下角像素坐标
|
rb: mapInstance.latLngToContainerPoint(new L.LatLng(bounds.getSouth(), bounds.getNorthEast().lng)),
|
rt: mapInstance.latLngToContainerPoint(bounds.getNorthEast()), // 右上角像素坐标
|
lt: mapInstance.latLngToContainerPoint(new L.LatLng(bounds.getNorth(), bounds.getSouthWest().lng))
|
};
|
|
const southWest = bounds.getSouthWest();
|
const northEast = bounds.getNorthEast();
|
|
return {
|
// 经纬度坐标
|
lb: [southWest.lng, southWest.lat],
|
rb: [northEast.lng, southWest.lat],
|
rt: [northEast.lng, northEast.lat],
|
lt: [southWest.lng, northEast.lat],
|
// 像素坐标
|
pixel: pixelCorners,
|
// 地图信息
|
bounds: bounds,
|
center: mapInstance.getCenter(),
|
zoom: mapInstance.getZoom()
|
}
|
}
|
|
function clearLimitAreas(areaData) {
|
const {
|
polygons,
|
limitHeightPolygons,
|
circles,
|
limitHeightCircles,
|
strengthenWarningAreas,
|
warningAreas,
|
// 授权区
|
authorityAreas,
|
// 法规限制区
|
legalRestrictionsAreas,
|
// 轻型无人机适飞空域
|
lightUAVAreas,
|
} = areaData
|
|
if (polygons.length !== 0) {
|
polygons.forEach((_polygon, index) => {
|
removeById('limit_polygon_' + index)
|
})
|
}
|
if (limitHeightPolygons.length !== 0) {
|
limitHeightPolygons.forEach((_limitHeightPolygon, index) => {
|
removeById('limit_height_polygon_' + index)
|
})
|
}
|
if (circles.length !== 0) {
|
circles.forEach((_circle, index) => {
|
removeById('limit_circle_' + index)
|
})
|
}
|
if (limitHeightCircles.length !== 0) {
|
limitHeightCircles.forEach((_limitHeightCircles, index) => {
|
removeById('limit_height_circle_' + index)
|
})
|
}
|
if (warningAreas.length !== 0) {
|
warningAreas.forEach((_area, index) => {
|
removeById('warning_area_' + index)
|
})
|
}
|
if (strengthenWarningAreas.length !== 0) {
|
strengthenWarningAreas.forEach((_area, index) => {
|
removeById('strengthen_warning_area_' + index)
|
})
|
}
|
if (lightUAVAreas.length !== 0) {
|
lightUAVAreas.forEach((_area, index) => {
|
removeById('lightUAV_area_' + index)
|
})
|
}
|
if (legalRestrictionsAreas.length !== 0) {
|
legalRestrictionsAreas.forEach((_area, index) => {
|
removeById('legalRestrictions_area_' + index)
|
})
|
}
|
if (authorityAreas.length !== 0) {
|
authorityAreas.forEach((_area, index) => {
|
removeById('authority_area_' + index)
|
})
|
}
|
}
|
|
// 通过点ID删除
|
const removeById = id => {
|
if (!id) return
|
|
// 方法1：遍历所有图层查找并移除
|
mapInstance.eachLayer(layer => {
|
if (layer._id === id) {
|
mapInstance.removeLayer(layer)
|
}
|
})
|
}
|
onMounted(() => {
|
nextTick()
|
mapInstance.on('moveend', initMoveEnd);
|
})
|
onBeforeUnmount(() => {
|
clearLimitAreas(limitAreas)
|
curAddLayers.forEach(item => removeCustomLayers(item))
|
mapInstance.off('moveend', initMoveEnd);
|
})
|
</script>
|
<style scoped lang="scss">
|
.baseLayer-manage {
|
width: 100%;
|
:deep(.van-collapse) {
|
width: 100%;
|
.title-content {
|
display: flex;
|
.checkbox-wrapper {
|
margin-right: 10px;
|
}
|
}
|
.item-child {
|
display: flex;
|
justify-items: center;
|
align-items: center;
|
height: 44px;
|
line-height: 44px;
|
margin-left: 30px;
|
}
|
.child-name {
|
margin-left: 10px;
|
font-size: 14px;
|
color: #222324;
|
}
|
}
|
|
:deep(.van-collapse *)::after {
|
border-color: #E3E3E3;
|
}
|
:deep([class*=van-hairline]:after) {
|
border-top: 1px solid #E3E3E3;
|
border-bottom: 1px solid #E3E3E3;
|
}
|
|
:deep(.van-collapse-item__content) {
|
padding: 0;
|
}
|
:deep(.van-checkbox__icon--checked .van-icon) {
|
background-color: transparent;
|
color: #1D6FE9;
|
font-weight: bolder;
|
}
|
:deep(.van-checkbox__icon .van-icon) {
|
border: 1px solid #F5F5F5;
|
}
|
:deep(.van-checkbox){
|
background: transparent;
|
}
|
}
|
|
</style>
|
