mirror of
https://gitee.com/niucloud-team/niucloud.git
synced 2026-04-24 18:58:20 +00:00
同步admin
This commit is contained in:
parent
330ffa3efc
commit
65d9a38693
1
admin/components.d.ts
vendored
1
admin/components.d.ts
vendored
@ -85,6 +85,7 @@ declare module '@vue/runtime-core' {
|
|||||||
ExportSure: typeof import('./src/components/export-sure/index.vue')['default']
|
ExportSure: typeof import('./src/components/export-sure/index.vue')['default']
|
||||||
HeatMap: typeof import('./src/components/heat-map/index.vue')['default']
|
HeatMap: typeof import('./src/components/heat-map/index.vue')['default']
|
||||||
Icon: typeof import('./src/components/icon/index.vue')['default']
|
Icon: typeof import('./src/components/icon/index.vue')['default']
|
||||||
|
MapSelector: typeof import('./src/components/map-selector/index.vue')['default']
|
||||||
Markdown: typeof import('./src/components/markdown/index.vue')['default']
|
Markdown: typeof import('./src/components/markdown/index.vue')['default']
|
||||||
PopoverInput: typeof import('./src/components/popover-input/index.vue')['default']
|
PopoverInput: typeof import('./src/components/popover-input/index.vue')['default']
|
||||||
RangeInput: typeof import('./src/components/range-input/index.vue')['default']
|
RangeInput: typeof import('./src/components/range-input/index.vue')['default']
|
||||||
|
|||||||
@ -629,8 +629,8 @@ export function setMap(params: Record<string, any>) {
|
|||||||
/**
|
/**
|
||||||
* 获取地图配置
|
* 获取地图配置
|
||||||
*/
|
*/
|
||||||
export function getMap() {
|
export function getMap(params: Record<string, any>) {
|
||||||
return request.get(`sys/config/map`)
|
return request.get(`sys/config/map`, { params })
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -469,19 +469,22 @@ initPage({
|
|||||||
if (import.meta.env.MODE == 'development') {
|
if (import.meta.env.MODE == 'development') {
|
||||||
|
|
||||||
// env文件配置过wap域名
|
// env文件配置过wap域名
|
||||||
if (wapDomain.value) {
|
// if (wapDomain.value) {
|
||||||
wapUrl.value = wapDomain.value + '/wap'
|
// wapUrl.value = wapDomain.value + '/wap'
|
||||||
repeat = false
|
// repeat = false
|
||||||
setDomain()
|
// setDomain()
|
||||||
}
|
// }
|
||||||
|
|
||||||
let wap_domain_storage = storage.get('wap_domain')
|
// let wap_domain_storage = storage.get('wap_domain')
|
||||||
if (wap_domain_storage) {
|
// if (wap_domain_storage) {
|
||||||
wapUrl.value = wap_domain_storage
|
// wapUrl.value = wap_domain_storage
|
||||||
|
// repeat = false
|
||||||
|
// setDomain()
|
||||||
|
// }
|
||||||
|
wapUrl.value = 'http://localhost:5173/wap'
|
||||||
repeat = false
|
repeat = false
|
||||||
setDomain()
|
setDomain()
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if (repeat) {
|
if (repeat) {
|
||||||
setDomain()
|
setDomain()
|
||||||
|
|||||||
@ -220,9 +220,9 @@
|
|||||||
<el-table-column :label="t('appName')" align="left" width="300">
|
<el-table-column :label="t('appName')" align="left" width="300">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div class="flex items-center cursor-pointer relative left-[-10px]" @click="openDetail(row)">
|
<div class="flex items-center cursor-pointer relative left-[-10px]" @click="openDetail(row)">
|
||||||
<el-image class="w-[54px] h-[54px]" :src="row.icon" fit="contain">
|
<el-image class="w-[54px] h-[54px] rounded-[5px]" :src="row.icon" fit="contain">
|
||||||
<template #error>
|
<template #error>
|
||||||
<div class="flex items-center w-full h-full">
|
<div class="flex items-center w-full h-full rounded-[5px]">
|
||||||
<img class="max-w-full max-h-full" src="@/app/assets/images/icon-addon-one.png" alt="" />
|
<img class="max-w-full max-h-full" src="@/app/assets/images/icon-addon-one.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -7,15 +7,50 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-form class="page-form mt-[20px]" :model="formData" :rules="formRules" label-width="150px" ref="formRef" v-loading="loading">
|
<el-form class="page-form mt-[20px]" :model="formData" :rules="formRules" label-width="150px" ref="formRef" v-loading="loading">
|
||||||
|
<el-form-item label="地图类型" prop="map_type">
|
||||||
|
<div>
|
||||||
|
<el-radio-group v-model="formData.map_type">
|
||||||
|
<el-radio label="tianditu">天地图</el-radio>
|
||||||
|
<el-radio label="tencent">腾讯地图</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
<div class="text-sm text-gray-400 mt-[10px] leading-none">选择地图服务提供商</div>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<template v-if="formData.map_type === 'tencent'">
|
||||||
<el-form-item :label="t('mapKey')" prop="key">
|
<el-form-item :label="t('mapKey')" prop="key">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center">
|
||||||
<el-input v-model.trim="formData.key" class="input-width" clearable />
|
<el-input v-model.trim="formData.key" class="input-width" clearable />
|
||||||
<span class="ml-2 cursor-pointer tutorial-btn" @click="tutorialFn">{{ t('clickTutorial') }}</span>
|
<span class="ml-2 cursor-pointer tutorial-btn" @click="tutorialFn">{{ t('clickTutorial') }}</span>
|
||||||
<span class="ml-2 cursor-pointer secret-btn" @click="secretFn('https://lbs.qq.com/dev/console/key/manage')">{{ t('clickSecretKey') }}</span>
|
<span class="ml-2 cursor-pointer secret-btn" @click="secretFn('https://lbs.qq.com/dev/console/key/manage')">{{ t('clickSecretKey') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item :label="t('aMapKey')" prop="key">
|
</template>
|
||||||
<el-input v-model.trim="formData.amap_key" class="input-width" clearable />
|
|
||||||
<span class="ml-2 cursor-pointer secret-btn" @click="secretFn('https://lbs.amap.com/')">{{ t('clickSecretKey') }}</span>
|
<template v-if="formData.map_type === 'tianditu'">
|
||||||
|
<el-form-item label="天地图服务端KEY" prop="tianditu_map_key">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<el-input v-model.trim="formData.tianditu_map_key" class="input-width" clearable />
|
||||||
|
<span class="ml-2 cursor-pointer secret-btn" @click="secretFn('https://cloudcenter.tianditu.gov.cn/center/development/myApp')">获取密钥</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-400 mt-[10px] leading-none">天地图服务器端API密钥,用于后端地理编码等服务,请求从业务服务器发起,不支持前端地图瓦片加载与 JS API 渲染。</div>
|
||||||
|
<div class="text-sm text-gray-400 mt-[10px] leading-none">使用场景:如地理编码、逆地理编码、坐标转换、批量 POI 查询等。</div>
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="天地图浏览器端KEY" prop="tianditu_map_web_key">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<el-input v-model.trim="formData.tianditu_map_web_key" class="input-width" clearable />
|
||||||
|
<span class="ml-2 cursor-pointer secret-btn" @click="secretFn('https://cloudcenter.tianditu.gov.cn/center/development/myApp')">获取密钥</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-400 mt-[10px] leading-none">天地图浏览器端API密钥,用于前端加载地图,不可用于后端接口鉴权。</div>
|
||||||
|
<div class="text-sm text-gray-400 mt-[10px] leading-none">使用场景:展示地图瓦片、实现地图交互(缩放、拖拽、图层切换、标注、可视化展示、地图选位置等)。</div>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
<el-form-item :label="t('isOpen')" prop="is_open">
|
<el-form-item :label="t('isOpen')" prop="is_open">
|
||||||
<el-switch v-model="formData.is_open" :active-value="1" :inactive-value="0" />
|
<el-switch v-model="formData.is_open" :active-value="1" :inactive-value="0" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -45,8 +80,10 @@ import { FormInstance } from 'element-plus'
|
|||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
const formRef = ref<FormInstance>()
|
const formRef = ref<FormInstance>()
|
||||||
const formData = reactive({
|
const formData = reactive({
|
||||||
|
map_type: 'tencent',
|
||||||
key: '',
|
key: '',
|
||||||
amap_key: '',
|
tianditu_map_key: '',
|
||||||
|
tianditu_map_web_key: '',
|
||||||
is_open: 0,
|
is_open: 0,
|
||||||
valid_time: 0
|
valid_time: 0
|
||||||
})
|
})
|
||||||
|
|||||||
@ -351,13 +351,12 @@ import {
|
|||||||
getWechatAuthUrl,
|
getWechatAuthUrl,
|
||||||
getWeappAuthUrl,
|
getWeappAuthUrl,
|
||||||
sendSms,
|
sendSms,
|
||||||
bindSms,
|
bindSms
|
||||||
} from '@/app/api/notice'
|
} from '@/app/api/notice'
|
||||||
import Sms from '@/app/views/setting/components/notice-sms.vue'
|
import Sms from '@/app/views/setting/components/notice-sms.vue'
|
||||||
import Wechat from '@/app/views/setting/components/notice-wechat.vue'
|
import Wechat from '@/app/views/setting/components/notice-wechat.vue'
|
||||||
import Weapp from '@/app/views/setting/components/notice-weapp.vue'
|
import Weapp from '@/app/views/setting/components/notice-weapp.vue'
|
||||||
import QRCode from 'qrcode'
|
import QRCode from 'qrcode'
|
||||||
import { chain } from 'lodash-es'
|
|
||||||
import { img } from '@/utils/common'
|
import { img } from '@/utils/common'
|
||||||
import { SuccessFilled } from '@element-plus/icons-vue'
|
import { SuccessFilled } from '@element-plus/icons-vue'
|
||||||
import type { FormInstance, FormRules } from 'element-plus'
|
import type { FormInstance, FormRules } from 'element-plus'
|
||||||
@ -436,7 +435,6 @@ const isBind = ref({
|
|||||||
// 查看是否绑定
|
// 查看是否绑定
|
||||||
const getBindInfoFn = (isFirstQuery = false) => {
|
const getBindInfoFn = (isFirstQuery = false) => {
|
||||||
getBindInfo().then((res) => {
|
getBindInfo().then((res) => {
|
||||||
console.log(res.data)
|
|
||||||
if (Object.keys(res.data).length > 0) {
|
if (Object.keys(res.data).length > 0) {
|
||||||
isBind.value.bind_sms = res.data.mobile ? 1 : 0 // 新增:更新短信绑定状态
|
isBind.value.bind_sms = res.data.mobile ? 1 : 0 // 新增:更新短信绑定状态
|
||||||
isBind.value.bind_wechat = res.data.wechat_openid ? 1 : 0 // 新增:更新微信绑定状态
|
isBind.value.bind_wechat = res.data.wechat_openid ? 1 : 0 // 新增:更新微信绑定状态
|
||||||
|
|||||||
@ -6,9 +6,24 @@
|
|||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<span class="text-[14px] mr-[10px]">{{ t('transferSceneId') }}:</span>
|
<span class="text-[14px] mr-[10px]">{{ t('transferSceneId') }}:</span>
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<el-input v-model.trim="item.scene_id" maxlength="5" class="!w-[60px]" :disabled="item.disabled" @blur="handleInput($event,key,item)" :ref="(el: any) =>{ if(el) inputRefs[key] = el }" v-show="!item.disabled"/>
|
<el-input
|
||||||
|
v-model.trim="item.scene_id"
|
||||||
|
maxlength="5"
|
||||||
|
minlength="4"
|
||||||
|
class="!w-[60px]"
|
||||||
|
:class="item.error ? '!border-red-500' : ''"
|
||||||
|
:disabled="item.disabled"
|
||||||
|
@blur="handleInput($event,key,item)"
|
||||||
|
:ref="(el: any) =>{ if(el) inputRefs[key] = el }"
|
||||||
|
v-show="!item.disabled"
|
||||||
|
/>
|
||||||
<div v-show="item.disabled">{{ item.scene_id ? item.scene_id : '--' }}</div>
|
<div v-show="item.disabled">{{ item.scene_id ? item.scene_id : '--' }}</div>
|
||||||
<div @click="handleDisabled(item, key)" class="w-[40xp] flex items-center ml-[8px]"><el-icon size="20" color="var(--el-color-primary)"><Edit /></el-icon></div>
|
<div @click="handleDisabled(item, key)" class="w-[40px] flex items-center ml-[8px]">
|
||||||
|
<el-icon size="20" color="var(--el-color-primary)">
|
||||||
|
<Edit/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<span v-if="item.error" class="text-red-500 text-xs ml-2">场景值最少为4位</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -20,7 +35,8 @@
|
|||||||
<span class="text-base w-[80px] text-center">{{ t('operation') }}</span>
|
<span class="text-base w-[80px] text-center">{{ t('operation') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="Object.values(item.trade_scene_data).length">
|
<div v-if="Object.values(item.trade_scene_data).length">
|
||||||
<div class="flex items-center justify-between p-[10px] table-item-border" v-for="(subItem, subKey) in item.trade_scene_data" :key="subKey">
|
<div class="flex items-center justify-between p-[10px] table-item-border"
|
||||||
|
v-for="(subItem, subKey) in item.trade_scene_data" :key="subKey">
|
||||||
<div class="flex w-[230px] flex-shrink-0 text-base">{{ subItem.name }}</div>
|
<div class="flex w-[230px] flex-shrink-0 text-base">{{ subItem.name }}</div>
|
||||||
<div class="flex w-[230px] flex-shrink-0 text-base">{{ subItem.perception }}</div>
|
<div class="flex w-[230px] flex-shrink-0 text-base">{{ subItem.perception }}</div>
|
||||||
<div class="w-[230px] flex-shrink-0 text-base">
|
<div class="w-[230px] flex-shrink-0 text-base">
|
||||||
@ -38,13 +54,15 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
<el-dialog v-model="showDialog" :title="curData.name" width="550px" :destroy-on-close="true">
|
<el-dialog v-model="showDialog" :title="curData.name" width="550px" :destroy-on-close="true">
|
||||||
<el-form :model="formData" label-width="110px" ref="formRef" class="page-form">
|
<el-form :model="formData" label-width="110px" ref="formRef" class="page-form">
|
||||||
<el-form-item :label="t('recvPerception')" prop="perception" :rules="[{ required: true, message: t('recvPerceptionTips'), trigger: 'blur' }]">
|
<el-form-item :label="t('recvPerception')" prop="perception"
|
||||||
|
:rules="[{ required: true, message: t('recvPerceptionTips'), trigger: 'blur' }]">
|
||||||
<el-select v-model="formData.perception" :placeholder="t('recvPerceptionTips')" clearable class="!w-[300px]">
|
<el-select v-model="formData.perception" :placeholder="t('recvPerceptionTips')" clearable class="!w-[300px]">
|
||||||
<el-option v-for="(item,index) in curData.user_recv_perception" :key="index" :label="item" :value="item"/>
|
<el-option v-for="(item,index) in curData.user_recv_perception" :key="index" :label="item" :value="item"/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<template v-for="(item, index) in curData.transfer_scene_report_infos" :key="index">
|
<template v-for="(item, index) in curData.transfer_scene_report_infos" :key="index">
|
||||||
<el-form-item :label="item" :prop="`infos[${item}]`" :rules="[{ required: true, message: `请输入${item}`, trigger: 'blur' }]">
|
<el-form-item :label="item" :prop="`infos[${item}]`"
|
||||||
|
:rules="[{ required: true, message: `请输入${item}`, trigger: 'blur' }]">
|
||||||
<el-input v-model.trim="formData.infos[item]" maxlength="40" class="!w-[300px]"/>
|
<el-input v-model.trim="formData.infos[item]" maxlength="40" class="!w-[300px]"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
@ -52,7 +70,9 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="cancel">{{ t('cancel') }}</el-button>
|
<el-button @click="cancel">{{ t('cancel') }}</el-button>
|
||||||
<el-button type="primary" :loading="loading" @click="confirm(formRef)">{{ t('confirm') }}</el-button>
|
<el-button type="primary" :loading="loading" @click="confirm(formRef)">{{
|
||||||
|
t('confirm')
|
||||||
|
}}</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@ -73,32 +93,67 @@ const getTransferSceneFn = () => {
|
|||||||
screne.value = res.data
|
screne.value = res.data
|
||||||
for (const key in screne.value) {
|
for (const key in screne.value) {
|
||||||
screne.value[key].disabled = true
|
screne.value[key].disabled = true
|
||||||
|
screne.value[key].error = false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
getTransferSceneFn()
|
getTransferSceneFn()
|
||||||
|
|
||||||
// 更改场景值
|
// 更改场景值(最终修复版)
|
||||||
const handleInput = (e: any, key: any, data: any) => {
|
const handleInput = (e: any, key: any, data: any) => {
|
||||||
if (e.target.value) {
|
const val = e.target.value?.trim() || ''
|
||||||
|
const originalVal = originalValues.value[key] || ''
|
||||||
|
|
||||||
|
// 有值 → 清空:必须提交接口置空
|
||||||
|
if (val === '' && originalVal !== '') {
|
||||||
|
data.error = false
|
||||||
setSceneId({
|
setSceneId({
|
||||||
scene: key,
|
scene: key,
|
||||||
scene_id: e.target.value
|
scene_id: ''
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
data.disabled = true
|
data.disabled = true
|
||||||
getTransferSceneFn()
|
getTransferSceneFn()
|
||||||
})
|
})
|
||||||
} else {
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 本来就空:不提交
|
||||||
|
if (val === '' && originalVal === '') {
|
||||||
|
data.error = false
|
||||||
data.disabled = true
|
data.disabled = true
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 有值但长度不够:提示,不提交
|
||||||
|
if (val.length < 4) {
|
||||||
|
data.error = true
|
||||||
|
return
|
||||||
}
|
}
|
||||||
const inputRefs = ref<any>({})
|
|
||||||
const handleDisabled = (data: any, key: any) => {
|
// 合法 4-5 位:提交
|
||||||
data.disabled = false
|
if (val.length >= 4 && val.length <= 5) {
|
||||||
nextTick(() => {
|
data.error = false
|
||||||
inputRefs.value[key].focus()
|
setSceneId({
|
||||||
|
scene: key,
|
||||||
|
scene_id: val
|
||||||
|
}).then(() => {
|
||||||
|
data.disabled = true
|
||||||
|
getTransferSceneFn()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputRefs = ref<any>({})
|
||||||
|
const originalValues = ref<any>({})
|
||||||
|
const handleDisabled = (data: any, key: any) => {
|
||||||
|
originalValues.value[key] = data.scene_id
|
||||||
|
data.disabled = false
|
||||||
|
data.error = false
|
||||||
|
nextTick(() => {
|
||||||
|
inputRefs.value[key]?.focus()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const showDialog = ref(false)
|
const showDialog = ref(false)
|
||||||
const curData = ref<any>({})
|
const curData = ref<any>({})
|
||||||
const formData = ref({
|
const formData = ref({
|
||||||
@ -117,10 +172,6 @@ const configFn = (data: any, subData: any, type: any) => {
|
|||||||
}
|
}
|
||||||
const formRef = ref<FormInstance>()
|
const formRef = ref<FormInstance>()
|
||||||
|
|
||||||
/**
|
|
||||||
* 确认
|
|
||||||
* @param formEl
|
|
||||||
*/
|
|
||||||
const confirm = async (formEl: FormInstance | undefined) => {
|
const confirm = async (formEl: FormInstance | undefined) => {
|
||||||
if (loading.value || !formEl) return
|
if (loading.value || !formEl) return
|
||||||
await formEl.validate(async (valid) => {
|
await formEl.validate(async (valid) => {
|
||||||
|
|||||||
512
admin/src/components/map-selector/index.vue
Normal file
512
admin/src/components/map-selector/index.vue
Normal file
@ -0,0 +1,512 @@
|
|||||||
|
<template>
|
||||||
|
<div :id="containerId" :class="containerClass" :style="containerStyle" v-loading="loading"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, watch, nextTick, onBeforeUnmount } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { t } from '@/lang'
|
||||||
|
import { getMap } from '@/app/api/sys'
|
||||||
|
|
||||||
|
import {
|
||||||
|
createMarker,
|
||||||
|
createCircle,
|
||||||
|
createPolygon,
|
||||||
|
deleteGeometry,
|
||||||
|
selectGeometry,
|
||||||
|
latLngToAddress
|
||||||
|
} from '@/utils/qqmap'
|
||||||
|
|
||||||
|
// 天地图工具
|
||||||
|
import {
|
||||||
|
createCircle as tdCreateCircle,
|
||||||
|
createPolygon as tdCreatePolygon,
|
||||||
|
deleteGeometry as tdDeleteGeometry,
|
||||||
|
selectGeometry as tdSelectGeometry,
|
||||||
|
clearAllGeometry,
|
||||||
|
latLngToAddress as tiandituLatLngToAddress
|
||||||
|
} from '@/utils/tianditu'
|
||||||
|
|
||||||
|
const MAP_INIT_DELAY = 500
|
||||||
|
const MAP_SEARCH_TIMEOUT = 5000
|
||||||
|
const MAP_SEARCH_INTERVAL = 100
|
||||||
|
const MAP_SEARCH_MAX_ATTEMPTS = 50
|
||||||
|
|
||||||
|
interface MapInstance {
|
||||||
|
destroy?: () => void
|
||||||
|
clearOverLays?: () => void
|
||||||
|
on?: (event: string, callback: Function) => void
|
||||||
|
addControl?: (control: any) => void
|
||||||
|
addOverLay?: (overlay: any) => void
|
||||||
|
removeOverLay?: (overlay: any) => void
|
||||||
|
centerAndZoom?: (center: any, zoom: number) => void
|
||||||
|
setZoom?: (zoom: number) => void
|
||||||
|
setCenter?: (center: any) => void
|
||||||
|
addEventListener?: (event: string, callback: Function) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
containerId?: string
|
||||||
|
containerClass?: string
|
||||||
|
containerStyle?: string
|
||||||
|
longitude?: string | number
|
||||||
|
latitude?: string | number
|
||||||
|
zoom?: number
|
||||||
|
selectedKey?: string
|
||||||
|
disabledClickMarker?: any // 是否禁止点击事件添加标注
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Emits {
|
||||||
|
(e: 'update:longitude', value: string): void
|
||||||
|
(e: 'update:latitude', value: string): void
|
||||||
|
(e: 'locationChange', data: { lat: number, lng: number, address: any }): void
|
||||||
|
(e: 'areaChange', data: { key: string, type: 'circle' | 'polygon', path: any }): void
|
||||||
|
(e: 'selectChange', key: string): void
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
containerId: 'map-container',
|
||||||
|
containerClass: 'w-[800px] h-[500px] relative border border-gray-300',
|
||||||
|
containerStyle: '',
|
||||||
|
longitude: 116.397463,
|
||||||
|
latitude: 39.909187,
|
||||||
|
zoom: 14,
|
||||||
|
selectedKey: '',
|
||||||
|
disabledClickMarker: false
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits<Emits>()
|
||||||
|
|
||||||
|
const loading = ref(true)
|
||||||
|
const mapKey = ref('')
|
||||||
|
const mapType = ref<'tencent' | 'tianditu'>('tianditu')
|
||||||
|
let map: MapInstance | null = null
|
||||||
|
let marker: any = null
|
||||||
|
const overlays = ref<any[]>([])
|
||||||
|
|
||||||
|
// 获取地图配置
|
||||||
|
const getMapConfigData = () => {
|
||||||
|
return getMap({
|
||||||
|
need_encrypt: false
|
||||||
|
}).then((res: any) => {
|
||||||
|
mapType.value = res.data.map_type || 'tianditu'
|
||||||
|
mapKey.value = mapType.value === 'tianditu' ? res.data.tianditu_map_web_key : res.data.key
|
||||||
|
}).catch((error) => {
|
||||||
|
loading.value = false
|
||||||
|
ElMessage.error(t('获取地图配置失败'))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化腾讯地图
|
||||||
|
const initTencentMap = () => {
|
||||||
|
const mapScript = document.createElement('script')
|
||||||
|
mapScript.src = 'https://map.qq.com/api/gljs?libraries=tools,service&v=1.exp&key=' + mapKey.value
|
||||||
|
document.body.appendChild(mapScript)
|
||||||
|
|
||||||
|
mapScript.onload = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const TMap = (window as any).TMap
|
||||||
|
if (TMap) {
|
||||||
|
const lng = props.longitude ? Number(props.longitude) : 116.397463
|
||||||
|
const lat = props.latitude ? Number(props.latitude) : 39.909187
|
||||||
|
const center = new TMap.LatLng(lat, lng)
|
||||||
|
map = new TMap.Map(props.containerId, { center, zoom: props.zoom })
|
||||||
|
map.on('tilesloaded', () => loading.value = false)
|
||||||
|
|
||||||
|
marker = createMarker(map)
|
||||||
|
if(!props.disabledClickMarker) {
|
||||||
|
map.on('click', (evt: any) => {
|
||||||
|
const ll = evt?.latLng
|
||||||
|
if (!ll) return
|
||||||
|
const lat = typeof ll.getLat === 'function' ? ll.getLat() : ll.lat
|
||||||
|
const lng = typeof ll.getLng === 'function' ? ll.getLng() : ll.lng
|
||||||
|
if (lat == null || lng == null || Number.isNaN(lat) || Number.isNaN(lng)) return
|
||||||
|
|
||||||
|
const newCenter = new TMap.LatLng(lat, lng)
|
||||||
|
map.setZoom(16)
|
||||||
|
map.setCenter(newCenter)
|
||||||
|
marker.updateGeometries({ id: 'center', position: newCenter })
|
||||||
|
nextTick(() => {
|
||||||
|
handleLocationChange(lat, lng)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.latitude && props.longitude) {
|
||||||
|
handleLocationChange(lat, lng)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
loading.value = false
|
||||||
|
ElMessage.error(t('腾讯地图加载失败'))
|
||||||
|
}
|
||||||
|
}, MAP_INIT_DELAY)
|
||||||
|
}
|
||||||
|
|
||||||
|
mapScript.onerror = () => {
|
||||||
|
loading.value = false
|
||||||
|
ElMessage.error(t('腾讯地图脚本加载失败'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化天地图
|
||||||
|
const initTiandituMap = () => {
|
||||||
|
const mapScript = document.createElement('script')
|
||||||
|
mapScript.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=' + mapKey.value
|
||||||
|
document.body.appendChild(mapScript)
|
||||||
|
|
||||||
|
mapScript.onload = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (T) {
|
||||||
|
const lng = props.longitude ? Number(props.longitude) : 116.397463
|
||||||
|
const lat = props.latitude ? Number(props.latitude) : 39.909187
|
||||||
|
map = new T.Map(props.containerId)
|
||||||
|
map.centerAndZoom(new T.LngLat(lng, lat), props.zoom)
|
||||||
|
|
||||||
|
const ctrl = new T.Control.Zoom()
|
||||||
|
map.addControl(ctrl)
|
||||||
|
|
||||||
|
marker = new T.Marker(new T.LngLat(lng, lat))
|
||||||
|
map.addOverLay(marker)
|
||||||
|
|
||||||
|
loading.value = false
|
||||||
|
|
||||||
|
if(!props.disabledClickMarker) {
|
||||||
|
map.addEventListener('click', (evt: any) => {
|
||||||
|
const lngLat = evt.lnglat
|
||||||
|
if (!lngLat) return
|
||||||
|
const lat = lngLat.lat
|
||||||
|
const lng = lngLat.lng
|
||||||
|
if (lat == null || lng == null || Number.isNaN(lat) || Number.isNaN(lng)) return
|
||||||
|
|
||||||
|
map.removeOverLay(marker)
|
||||||
|
|
||||||
|
marker = new T.Marker(new T.LngLat(lng, lat))
|
||||||
|
map.addOverLay(marker)
|
||||||
|
|
||||||
|
map.centerAndZoom(new T.LngLat(lng, lat), 16)
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
handleLocationChange(lat, lng)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.latitude && props.longitude) {
|
||||||
|
handleLocationChange(lat, lng)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
loading.value = false
|
||||||
|
ElMessage.error(t('天地图加载失败'))
|
||||||
|
}
|
||||||
|
}, MAP_INIT_DELAY)
|
||||||
|
}
|
||||||
|
|
||||||
|
mapScript.onerror = () => {
|
||||||
|
loading.value = false
|
||||||
|
ElMessage.error(t('天地图加载失败,请检查密钥配置'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化地图
|
||||||
|
const initMap = () => {
|
||||||
|
if (!mapKey.value) {
|
||||||
|
loading.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 防止重复初始化
|
||||||
|
if (map) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mapType.value === 'tencent') {
|
||||||
|
initTencentMap()
|
||||||
|
} else if (mapType.value === 'tianditu') {
|
||||||
|
initTiandituMap()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理位置变化
|
||||||
|
const handleLocationChange = (lat: number, lng: number) => {
|
||||||
|
emit('update:longitude', String(lng))
|
||||||
|
emit('update:latitude', String(lat))
|
||||||
|
|
||||||
|
if (mapType.value === 'tencent') {
|
||||||
|
latLngToAddress({ mapKey: mapKey.value, lat, lng }).then(({ message, result }) => {
|
||||||
|
if (message == 'query ok' || message == 'Success') {
|
||||||
|
emit('locationChange', { lat, lng, address: result })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else if (mapType.value === 'tianditu') {
|
||||||
|
tiandituLatLngToAddress({ mapKey: mapKey.value, lat, lng }).then((addressData: any) => {
|
||||||
|
emit('locationChange', { lat, lng, address: addressData })
|
||||||
|
}).catch((error: any) => {
|
||||||
|
ElMessage.error(error.message || t('地址解析失败'))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新地图位置(供外部调用)
|
||||||
|
const updateLocation = (lat: number, lng: number) => {
|
||||||
|
if (!map || !marker) return
|
||||||
|
|
||||||
|
if (mapType.value === 'tencent') {
|
||||||
|
const TMap = (window as any).TMap
|
||||||
|
if (!TMap) return
|
||||||
|
const newCenter = new TMap.LatLng(lat, lng)
|
||||||
|
map.setZoom(16)
|
||||||
|
map.setCenter(newCenter)
|
||||||
|
marker.updateGeometries({ id: 'center', position: newCenter })
|
||||||
|
} else if (mapType.value === 'tianditu') {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (!T) return
|
||||||
|
const newCenter = new T.LngLat(lng, lat)
|
||||||
|
|
||||||
|
// 移除旧标记
|
||||||
|
map.removeOverLay(marker)
|
||||||
|
|
||||||
|
// 创建新标记
|
||||||
|
marker = new T.Marker(newCenter)
|
||||||
|
map.addOverLay(marker)
|
||||||
|
|
||||||
|
map.centerAndZoom(newCenter, 16)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 地址搜索(供外部调用)
|
||||||
|
const searchAddress = (address: string): Promise<{ lat: number, lng: number }> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (!mapKey.value) {
|
||||||
|
reject(new Error(t('地图配置未加载')))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const waitForMap = () => {
|
||||||
|
return new Promise<void>((resolveWait, rejectWait) => {
|
||||||
|
if (map) {
|
||||||
|
resolveWait()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let attempts = 0
|
||||||
|
const checkInterval = setInterval(() => {
|
||||||
|
attempts++
|
||||||
|
if (map) {
|
||||||
|
clearInterval(checkInterval)
|
||||||
|
resolveWait()
|
||||||
|
} else if (attempts > MAP_SEARCH_MAX_ATTEMPTS) {
|
||||||
|
clearInterval(checkInterval)
|
||||||
|
rejectWait(new Error(t('地图初始化超时')))
|
||||||
|
}
|
||||||
|
}, MAP_SEARCH_INTERVAL)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
waitForMap().then(() => {
|
||||||
|
if (mapType.value === 'tencent') {
|
||||||
|
const TMap = (window as any).TMap
|
||||||
|
if (!TMap?.service) {
|
||||||
|
reject(new Error(t('腾讯地图服务未加载')))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const geocoder = new TMap.service.Geocoder({ key: mapKey.value })
|
||||||
|
geocoder.getLocation({ address }).then((result: any) => {
|
||||||
|
if (result.status === 0 && result.result?.location) {
|
||||||
|
const location = result.result.location
|
||||||
|
const lat = Number(location.lat)
|
||||||
|
const lng = Number(location.lng)
|
||||||
|
updateLocation(lat, lng)
|
||||||
|
resolve({ lat, lng })
|
||||||
|
} else {
|
||||||
|
reject(new Error(result.message || t('未找到该地址')))
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
reject(error)
|
||||||
|
})
|
||||||
|
} else if (mapType.value === 'tianditu') {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (!T) {
|
||||||
|
reject(new Error(t('天地图服务未加载')))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const geocoder = new T.Geocoder()
|
||||||
|
geocoder.getPoint(address, (result: any) => {
|
||||||
|
if (result && result.status === '0' && result.location) {
|
||||||
|
const lat = result.location.lat
|
||||||
|
const lng = result.location.lon || result.location.lng
|
||||||
|
if (lat && lng) {
|
||||||
|
updateLocation(lat, lng)
|
||||||
|
resolve({ lat, lng })
|
||||||
|
} else {
|
||||||
|
reject(new Error(t('坐标解析失败')))
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
reject(new Error(result?.msg || t('未找到该地址')))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}).catch(reject)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 添加圆
|
||||||
|
const addCircle = (center?: { lat: number; lng: number }, radius = 1000, options?: any) => {
|
||||||
|
if (!map) return null
|
||||||
|
const key = options?.key || `circle_${Date.now()}`
|
||||||
|
let circle = null
|
||||||
|
|
||||||
|
// 创建geometriesData对象
|
||||||
|
const geometriesData = { key, center, radius, ...options }
|
||||||
|
|
||||||
|
if (mapType.value === 'tencent') {
|
||||||
|
createCircle(map, geometriesData, (selectedKey) => {
|
||||||
|
// 触发selectChange事件
|
||||||
|
emit('selectChange', selectedKey)
|
||||||
|
})
|
||||||
|
// 腾讯地图的createCircle不返回值,创建一个包含key的对象添加到overlays
|
||||||
|
circle = { key, geometriesData }
|
||||||
|
} else {
|
||||||
|
circle = tdCreateCircle(map, geometriesData, (data) => {
|
||||||
|
// 触发areaChange事件,确保path数据干净,不包含循环引用
|
||||||
|
emit('areaChange', {
|
||||||
|
key: data.key,
|
||||||
|
type: 'circle',
|
||||||
|
path: {
|
||||||
|
key: data.key,
|
||||||
|
center: data.center,
|
||||||
|
radius: data.radius
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, (selectedKey) => {
|
||||||
|
// 触发selectChange事件
|
||||||
|
emit('selectChange', selectedKey)
|
||||||
|
})
|
||||||
|
// 为天地图添加geometriesData引用
|
||||||
|
if (circle) {
|
||||||
|
circle.geometriesData = geometriesData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (circle) overlays.value.push(circle)
|
||||||
|
return circle
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加多边形
|
||||||
|
const addPolygon = (paths: any[], options?: any) => {
|
||||||
|
if (!map) return null
|
||||||
|
const key = options?.key || `poly_${Date.now()}`
|
||||||
|
let poly = null
|
||||||
|
|
||||||
|
// 创建geometriesData对象
|
||||||
|
const geometriesData = { key, paths, ...options }
|
||||||
|
|
||||||
|
if (mapType.value === 'tencent') {
|
||||||
|
createPolygon(map, geometriesData, (selectedKey) => {
|
||||||
|
// 触发selectChange事件
|
||||||
|
emit('selectChange', selectedKey)
|
||||||
|
})
|
||||||
|
// 腾讯地图的createPolygon不返回值,创建一个包含key的对象添加到overlays
|
||||||
|
poly = { key, geometriesData }
|
||||||
|
} else {
|
||||||
|
poly = tdCreatePolygon(map, geometriesData, (data) => {
|
||||||
|
// 触发areaChange事件,确保path数据干净,不包含循环引用
|
||||||
|
emit('areaChange', {
|
||||||
|
key: data.key,
|
||||||
|
type: 'polygon',
|
||||||
|
path: {
|
||||||
|
key: data.key,
|
||||||
|
paths: data.paths.map((point: any) => ({
|
||||||
|
lat: point.lat,
|
||||||
|
lng: point.lng
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, (selectedKey) => {
|
||||||
|
// 触发selectChange事件
|
||||||
|
emit('selectChange', selectedKey)
|
||||||
|
})
|
||||||
|
// 为天地图添加geometriesData引用
|
||||||
|
if (poly) {
|
||||||
|
poly.geometriesData = geometriesData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (poly) overlays.value.push(poly)
|
||||||
|
return poly
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除覆盖物
|
||||||
|
const removeOverlay = (overlay: any) => {
|
||||||
|
if (!map || !overlay) return
|
||||||
|
const key = overlay.key || ''
|
||||||
|
mapType.value === 'tencent' ? deleteGeometry(key) : tdDeleteGeometry(map, key)
|
||||||
|
|
||||||
|
// 通过key查找并删除覆盖物
|
||||||
|
const idx = overlays.value.findIndex(item => item.key === key)
|
||||||
|
if (idx > -1) overlays.value.splice(idx, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空所有覆盖物
|
||||||
|
const clearOverlays = () => {
|
||||||
|
if (!map) return
|
||||||
|
mapType.value === 'tencent'
|
||||||
|
? overlays.value.forEach(o => deleteGeometry(o.key))
|
||||||
|
: clearAllGeometry(map)
|
||||||
|
overlays.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectGeo = (key: string) => {
|
||||||
|
mapType.value === 'tencent' ? selectGeometry(key) : tdSelectGeometry(key)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听选中key变化
|
||||||
|
watch(() => props.selectedKey, (newKey) => {
|
||||||
|
if (newKey) {
|
||||||
|
selectGeo(newKey)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听地图key和类型变化
|
||||||
|
watch([mapKey, mapType], ([newKey, newType]) => {
|
||||||
|
if (newKey && newType) {
|
||||||
|
initMap()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getMapConfigData()
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (map) {
|
||||||
|
try {
|
||||||
|
if (mapType.value === 'tencent') {
|
||||||
|
map.destroy && map.destroy()
|
||||||
|
} else if (mapType.value === 'tianditu') {
|
||||||
|
clearOverlays()
|
||||||
|
map.clearOverLays && map.clearOverLays()
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
}
|
||||||
|
map = null
|
||||||
|
marker = null
|
||||||
|
overlays.value = []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
updateLocation,
|
||||||
|
searchAddress,
|
||||||
|
addCircle,
|
||||||
|
addPolygon,
|
||||||
|
removeOverlay,
|
||||||
|
clearOverlays,
|
||||||
|
selectGeometry: selectGeo,
|
||||||
|
getMap: () => map,
|
||||||
|
getMarker: () => marker,
|
||||||
|
handleLocationChange
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
@ -4,8 +4,11 @@ const geometry: any = {}
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* 在地图上创建一个圆形
|
* 在地图上创建一个圆形
|
||||||
|
* @param map 地图实例
|
||||||
|
* @param geometriesData 圆形数据
|
||||||
|
* @param onSelect 图形被选中时的回调函数
|
||||||
*/
|
*/
|
||||||
export const createCircle = (map: any, geometriesData: any) => {
|
export const createCircle = (map: any, geometriesData: any, onSelect?: (key: string) => void) => {
|
||||||
const TMap = (window as any).TMap
|
const TMap = (window as any).TMap
|
||||||
const LatLng = TMap.LatLng
|
const LatLng = TMap.LatLng
|
||||||
|
|
||||||
@ -27,7 +30,11 @@ export const createCircle = (map: any, geometriesData: any) => {
|
|||||||
showBorder: true,
|
showBorder: true,
|
||||||
borderColor: `rgb(${color.toString()})`,
|
borderColor: `rgb(${color.toString()})`,
|
||||||
borderWidth: 2
|
borderWidth: 2
|
||||||
|
}),
|
||||||
|
highlight: new TMap.PolygonStyle({
|
||||||
|
color: 'rgba(255, 255, 0, 0.6)'
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
geometries: [
|
geometries: [
|
||||||
{
|
{
|
||||||
@ -38,25 +45,84 @@ export const createCircle = (map: any, geometriesData: any) => {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
geometry[geometriesData.key] = { graphical: multiCircle }
|
|
||||||
|
|
||||||
// 创建图形编辑器
|
// 如果已存在该图形,先删除
|
||||||
const editor = new TMap.tools.GeometryEditor({
|
if (geometry[geometriesData.key]) {
|
||||||
|
try {
|
||||||
|
geometry[geometriesData.key].graphical.remove(geometriesData.key)
|
||||||
|
geometry[geometriesData.key].editor?.delete()
|
||||||
|
} catch (e) {
|
||||||
|
// 删除旧图形失败
|
||||||
|
// console.warn('删除旧图形失败:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let editor = null
|
||||||
|
// 检查 TMap.tools 是否存在
|
||||||
|
if (TMap.tools) {
|
||||||
|
// 创建图形编辑器 - 支持拖动中心点和调整半径
|
||||||
|
try {
|
||||||
|
editor = new TMap.tools.GeometryEditor({
|
||||||
map: map,
|
map: map,
|
||||||
overlayList: [
|
overlayList: [
|
||||||
{
|
{
|
||||||
overlay: multiCircle,
|
overlay: multiCircle,
|
||||||
id: geometriesData.key,
|
id: geometriesData.key,
|
||||||
|
selectedStyleId: 'highlight'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT,
|
actionMode: TMap.tools.constants?.EDITOR_ACTION?.INTERACT || 0, // 交互模式,支持拖动中心点和调整半径
|
||||||
activeOverlayId: geometriesData.key, // 激活图层
|
activeOverlayId: null, // 初始不激活,等待用户选择
|
||||||
selectable: true // 开启点选功能
|
selectable: true ,// 开启点选功能
|
||||||
|
snappable: true // 开启吸附
|
||||||
|
})
|
||||||
|
editor.setKeyboardDeleteEnable(false);
|
||||||
|
|
||||||
|
// 监听调整开始事件 - 禁用地图拖拽
|
||||||
|
editor.on('adjust_start', () => {
|
||||||
|
currentMap?.setDraggable(false)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 监听调整完成事件
|
||||||
editor.on('adjust_complete', (data: any) => {
|
editor.on('adjust_complete', (data: any) => {
|
||||||
|
if (data?.center && data.radius !== undefined) {
|
||||||
geometriesData.center = { lat: data.center.lat, lng: data.center.lng }
|
geometriesData.center = { lat: data.center.lat, lng: data.center.lng }
|
||||||
geometriesData.radius = parseInt(data.radius)
|
geometriesData.radius = parseInt(data.radius)
|
||||||
|
}
|
||||||
|
setTimeout(() => currentMap?.setDraggable(true), 100)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听调整中事件(实时更新)
|
||||||
|
editor.on('adjust', (data: any) => {
|
||||||
|
if (data?.center && data.radius !== undefined) {
|
||||||
|
geometriesData.center = { lat: data.center.lat, lng: data.center.lng }
|
||||||
|
geometriesData.radius = parseInt(data.radius)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听选中事件
|
||||||
|
editor.on('select', () => {
|
||||||
|
// 只有在用户点击地图上的图形时才触发,而不是在切换页面时
|
||||||
|
if (onSelect) {
|
||||||
|
onSelect(geometriesData.key)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('创建编辑器失败:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 为圆形添加点击事件监听器
|
||||||
|
multiCircle.on('click', () => {
|
||||||
|
// 先选中当前图形,使其高亮显示
|
||||||
|
if (editor) {
|
||||||
|
editor.select([geometriesData.key])
|
||||||
|
editor.setActiveOverlay?.(geometriesData.key)
|
||||||
|
}
|
||||||
|
// 然后触发选中回调
|
||||||
|
if (onSelect) {
|
||||||
|
onSelect(geometriesData.key)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
geometry[geometriesData.key] = { graphical: multiCircle, editor }
|
geometry[geometriesData.key] = { graphical: multiCircle, editor }
|
||||||
@ -64,10 +130,11 @@ export const createCircle = (map: any, geometriesData: any) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* 在地图上创建一个多边形
|
* 在地图上创建一个多边形
|
||||||
* @param map
|
* @param map 地图实例
|
||||||
* @param geometriesData
|
* @param geometriesData 多边形数据
|
||||||
|
* @param onSelect 图形被选中时的回调函数
|
||||||
*/
|
*/
|
||||||
export const createPolygon = (map: any, geometriesData: any) => {
|
export const createPolygon = (map: any, geometriesData: any, onSelect?: (key: string) => void) => {
|
||||||
const TMap = (window as any).TMap
|
const TMap = (window as any).TMap
|
||||||
const LatLng = TMap.LatLng
|
const LatLng = TMap.LatLng
|
||||||
|
|
||||||
@ -86,6 +153,17 @@ export const createPolygon = (map: any, geometriesData: any) => {
|
|||||||
Math.floor(Math.random() * 255)
|
Math.floor(Math.random() * 255)
|
||||||
]
|
]
|
||||||
|
|
||||||
|
// 如果已存在该图形,先删除
|
||||||
|
if (geometry[geometriesData.key]) {
|
||||||
|
try {
|
||||||
|
geometry[geometriesData.key].graphical.remove(geometriesData.key)
|
||||||
|
geometry[geometriesData.key].editor?.delete()
|
||||||
|
} catch (e) {
|
||||||
|
// 删除旧多边形失败
|
||||||
|
// console.warn('删除旧多边形失败:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const multiPolygon = new TMap.MultiPolygon({
|
const multiPolygon = new TMap.MultiPolygon({
|
||||||
map: map,
|
map: map,
|
||||||
styles: {
|
styles: {
|
||||||
@ -94,6 +172,9 @@ export const createPolygon = (map: any, geometriesData: any) => {
|
|||||||
showBorder: true,
|
showBorder: true,
|
||||||
borderColor: `rgb(${color.toString()})`,
|
borderColor: `rgb(${color.toString()})`,
|
||||||
borderWidth: 2
|
borderWidth: 2
|
||||||
|
}),
|
||||||
|
highlight: new TMap.PolygonStyle({
|
||||||
|
color: 'rgba(255, 255, 0, 0.6)'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
geometries: [
|
geometries: [
|
||||||
@ -107,23 +188,70 @@ export const createPolygon = (map: any, geometriesData: any) => {
|
|||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
const editor = new TMap.tools.GeometryEditor({
|
let editor = null
|
||||||
|
// 检查 TMap.tools 是否存在
|
||||||
|
if (TMap.tools) {
|
||||||
|
// 创建图形编辑器 - 支持拖动边框和调整形状
|
||||||
|
try {
|
||||||
|
editor = new TMap.tools.GeometryEditor({
|
||||||
map: map,
|
map: map,
|
||||||
overlayList: [
|
overlayList: [
|
||||||
{
|
{
|
||||||
overlay: multiPolygon,
|
overlay: multiPolygon,
|
||||||
id: geometriesData.key,
|
id: geometriesData.key,
|
||||||
|
selectedStyleId: 'highlight'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT,
|
actionMode: TMap.tools.constants?.EDITOR_ACTION?.INTERACT || 0, // 交互模式,支持拖动边框和调整形状
|
||||||
activeOverlayId: geometriesData.key, // 激活图层
|
activeOverlayId: null, // 初始不激活,等待用户选择
|
||||||
selectable: true, // 开启点选功能
|
selectable: true, // 开启点选功能
|
||||||
|
snappable: true // 开启吸附
|
||||||
})
|
})
|
||||||
|
|
||||||
editor.on('adjust_complete', (data: any) => {
|
editor.setKeyboardDeleteEnable(false);
|
||||||
geometriesData.paths = data.paths.map(item => {
|
// 监听调整开始事件 - 禁用地图拖拽
|
||||||
return { lat: item.lat, lng: item.lng}
|
editor.on('adjust_start', () => {
|
||||||
|
currentMap?.setDraggable(false)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 监听调整完成事件
|
||||||
|
editor.on('adjust_complete', (data: any) => {
|
||||||
|
if (data?.paths) {
|
||||||
|
geometriesData.paths = data.paths.map((item: any) => ({ lat: item.lat, lng: item.lng }))
|
||||||
|
}
|
||||||
|
setTimeout(() => currentMap?.setDraggable(true), 100)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听调整中事件(实时更新)
|
||||||
|
editor.on('adjust', (data: any) => {
|
||||||
|
if (data?.paths) {
|
||||||
|
geometriesData.paths = data.paths.map((item: any) => ({ lat: item.lat, lng: item.lng }))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听选中事件
|
||||||
|
editor.on('select', () => {
|
||||||
|
// 只有在用户点击地图上的图形时才触发,而不是在切换页面时
|
||||||
|
if (onSelect) {
|
||||||
|
onSelect(geometriesData.key)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('创建编辑器失败:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 为多边形添加点击事件监听器
|
||||||
|
multiPolygon.on('click', () => {
|
||||||
|
// 先选中当前图形,使其高亮显示
|
||||||
|
if (editor) {
|
||||||
|
editor.select([geometriesData.key])
|
||||||
|
editor.setActiveOverlay?.(geometriesData.key)
|
||||||
|
}
|
||||||
|
// 然后触发选中回调
|
||||||
|
if (onSelect) {
|
||||||
|
onSelect(geometriesData.key)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
geometry[geometriesData.key] = { graphical: multiPolygon, editor }
|
geometry[geometriesData.key] = { graphical: multiPolygon, editor }
|
||||||
@ -131,25 +259,68 @@ export const createPolygon = (map: any, geometriesData: any) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* 删除图形
|
* 删除图形
|
||||||
* @param key
|
|
||||||
*/
|
*/
|
||||||
export const deleteGeometry = (key: string) => {
|
export const deleteGeometry = (key: string) => {
|
||||||
if (!geometry[key]) {
|
if (!geometry[key]) return
|
||||||
return
|
try {
|
||||||
|
geometry[key].graphical?.remove(key)
|
||||||
|
geometry[key].editor?.delete()
|
||||||
|
delete geometry[key]
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('删除图形失败:', e)
|
||||||
}
|
}
|
||||||
geometry[key].graphical.remove(key)
|
}
|
||||||
geometry[key].editor.delete()
|
|
||||||
|
/**
|
||||||
|
* 清空所有图形
|
||||||
|
*/
|
||||||
|
export const clearAllGeometry = () => {
|
||||||
|
Object.keys(geometry).forEach(deleteGeometry)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存地图引用,用于控制地图拖拽
|
||||||
|
let currentMap: any = null
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置地图引用
|
||||||
|
* @param map 地图实例
|
||||||
|
*/
|
||||||
|
export const setMapInstance = (map: any) => {
|
||||||
|
currentMap = map
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 选中图形
|
* 选中图形
|
||||||
* @param key
|
|
||||||
*/
|
*/
|
||||||
export const selectGeometry = (key: string) => {
|
export const selectGeometry = (key: string) => {
|
||||||
if (!geometry[key] || !geometry[key].editor) {
|
if (!geometry[key]?.editor) return
|
||||||
return
|
|
||||||
|
try {
|
||||||
|
// 取消其他图形的选中状态
|
||||||
|
Object.keys(geometry).forEach(k => {
|
||||||
|
if (k !== key && geometry[k]?.editor) {
|
||||||
|
geometry[k].editor.deselect?.()
|
||||||
|
geometry[k].editor.setActiveOverlay?.(null)
|
||||||
}
|
}
|
||||||
geometry[key].editor.select([key])
|
})
|
||||||
|
// 选中当前图形
|
||||||
|
geometry[key].editor.select?.([key])
|
||||||
|
geometry[key].editor.setActiveOverlay?.(key)
|
||||||
|
} catch (e) {
|
||||||
|
// 删除图形失败
|
||||||
|
// console.error('选中图形失败:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取消选中所有图形
|
||||||
|
*/
|
||||||
|
export const deselectAllGeometry = () => {
|
||||||
|
Object.keys(geometry).forEach(k => {
|
||||||
|
geometry[k]?.editor?.deselect?.()
|
||||||
|
geometry[k]?.editor?.setActiveOverlay?.(null)
|
||||||
|
})
|
||||||
|
currentMap?.setDraggable(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
511
admin/src/utils/tianditu.ts
Normal file
511
admin/src/utils/tianditu.ts
Normal file
@ -0,0 +1,511 @@
|
|||||||
|
const geometry: any = {}
|
||||||
|
|
||||||
|
// 保存地图引用,用于控制地图拖拽
|
||||||
|
let currentMap: any = null
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置地图引用
|
||||||
|
* @param map 地图实例
|
||||||
|
*/
|
||||||
|
export const setMapInstance = (map: any) => {
|
||||||
|
currentMap = map
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 在天地图上创建一个圆形
|
||||||
|
* @param map 天地图实例
|
||||||
|
* @param geometriesData 圆形数据
|
||||||
|
* @param onChange 图形变化时的回调函数
|
||||||
|
* @param onSelect 图形被选中时的回调函数
|
||||||
|
*/
|
||||||
|
export const createCircle = (map: any, geometriesData: any, onChange?: (data: any) => void, onSelect?: (key: string) => void) => {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (!T) return null
|
||||||
|
|
||||||
|
geometriesData.radius = geometriesData.radius ?? 1000
|
||||||
|
geometriesData.center = geometriesData.center ?? { lat: map.getCenter().lat, lng: map.getCenter().lng }
|
||||||
|
|
||||||
|
const color = [
|
||||||
|
Math.floor(Math.random() * 255),
|
||||||
|
Math.floor(Math.random() * 255),
|
||||||
|
Math.floor(Math.random() * 255)
|
||||||
|
]
|
||||||
|
// 保存原始样式
|
||||||
|
const originalStyle = {
|
||||||
|
color: geometriesData.color || `rgba(${color.toString()}, .4)`,
|
||||||
|
weight: geometriesData.weight || 3,
|
||||||
|
opacity: geometriesData.opacity || 0.8,
|
||||||
|
fillColor: geometriesData.fillColor || `rgba(${color.toString()}, .4)`,
|
||||||
|
fillOpacity: geometriesData.fillOpacity || 0.3
|
||||||
|
}
|
||||||
|
const circle = new T.Circle(new T.LngLat(geometriesData.center.lng, geometriesData.center.lat), geometriesData.radius, originalStyle)
|
||||||
|
|
||||||
|
// 如果已存在该图形,先删除
|
||||||
|
if (geometry[geometriesData.key]) {
|
||||||
|
try {
|
||||||
|
if (geometry[geometriesData.key].editTimer) {
|
||||||
|
clearTimeout(geometry[geometriesData.key].editTimer)
|
||||||
|
}
|
||||||
|
map.removeOverLay(geometry[geometriesData.key].graphical)
|
||||||
|
} catch (e) {
|
||||||
|
// 删除旧图形失败
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
map.addOverLay(circle)
|
||||||
|
|
||||||
|
// 保存几何数据的引用,确保在事件监听器中可用
|
||||||
|
const circleData = { ...geometriesData }
|
||||||
|
|
||||||
|
// 保存上一次的中心点和半径
|
||||||
|
let preCenter = { ...circleData.center }
|
||||||
|
let preRadius = circleData.radius
|
||||||
|
|
||||||
|
// 监听地图触摸结束事件,检测圆形变化
|
||||||
|
const handleTouchEnd = () => {
|
||||||
|
if (!circle.isEditable()) return
|
||||||
|
|
||||||
|
if (geometry[circleData.key]?.editTimer) {
|
||||||
|
clearTimeout(geometry[circleData.key].editTimer)
|
||||||
|
}
|
||||||
|
|
||||||
|
geometry[circleData.key].editTimer = setTimeout(() => {
|
||||||
|
const curCenter = circle.getCenter()
|
||||||
|
const curRadius = circle.getRadius()
|
||||||
|
|
||||||
|
// 中心点改变了
|
||||||
|
if (curCenter.lng !== preCenter.lng || curCenter.lat !== preCenter.lat) {
|
||||||
|
circleData.center = { lat: curCenter.lat, lng: curCenter.lng }
|
||||||
|
preCenter = { ...circleData.center }
|
||||||
|
// console.log('圆形中心点改变了', circleData.center)
|
||||||
|
// 调用回调函数
|
||||||
|
if (onChange) {
|
||||||
|
onChange(circleData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 半径改变了
|
||||||
|
if (curRadius !== preRadius) {
|
||||||
|
circleData.radius = curRadius
|
||||||
|
preRadius = curRadius
|
||||||
|
// console.log('圆形半径改变了', curRadius)
|
||||||
|
// 调用回调函数
|
||||||
|
if (onChange) {
|
||||||
|
onChange(circleData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听圆形点击事件
|
||||||
|
const handleClick = () => {
|
||||||
|
// 调用选择回调函数
|
||||||
|
if (onSelect) {
|
||||||
|
onSelect(circleData.key)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始时不启用编辑功能,只有在选中时才启用
|
||||||
|
// circle.enableEdit()
|
||||||
|
|
||||||
|
// 添加事件监听
|
||||||
|
map.addEventListener('touchend', handleTouchEnd)
|
||||||
|
map.addEventListener('mouseup', handleTouchEnd)
|
||||||
|
circle.addEventListener('click', handleClick)
|
||||||
|
|
||||||
|
geometry[circleData.key] = { graphical: circle, handleTouchEnd, handleClick, originalStyle }
|
||||||
|
return circle
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 在天地图上创建一个矩形
|
||||||
|
* @param map 天地图实例
|
||||||
|
* @param geometriesData 矩形数据
|
||||||
|
*/
|
||||||
|
export const createRectangle = (map: any, geometriesData: any) => {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (!T) return null
|
||||||
|
|
||||||
|
const { lat, lng } = map.getCenter()
|
||||||
|
|
||||||
|
geometriesData.bounds = geometriesData.bounds ?? {
|
||||||
|
southwest: { lat: lat - 0.005, lng: lng - 0.005 },
|
||||||
|
northeast: { lat: lat + 0.005, lng: lng + 0.005 }
|
||||||
|
}
|
||||||
|
|
||||||
|
const lngLats = [
|
||||||
|
new T.LngLat(geometriesData.bounds.southwest.lng, geometriesData.bounds.southwest.lat),
|
||||||
|
new T.LngLat(geometriesData.bounds.northeast.lng, geometriesData.bounds.southwest.lat),
|
||||||
|
new T.LngLat(geometriesData.bounds.northeast.lng, geometriesData.bounds.northeast.lat),
|
||||||
|
new T.LngLat(geometriesData.bounds.southwest.lng, geometriesData.bounds.northeast.lat)
|
||||||
|
]
|
||||||
|
const color = [
|
||||||
|
Math.floor(Math.random() * 255),
|
||||||
|
Math.floor(Math.random() * 255),
|
||||||
|
Math.floor(Math.random() * 255)
|
||||||
|
]
|
||||||
|
|
||||||
|
const rectangle = new T.Polygon(lngLats, {
|
||||||
|
color: geometriesData.color || `rgba(${color.toString()}, .4)`,
|
||||||
|
weight: geometriesData.weight || 3,
|
||||||
|
opacity: geometriesData.opacity || 0.8,
|
||||||
|
fillColor: geometriesData.fillColor || `rgba(${color.toString()}, .4)`,
|
||||||
|
fillOpacity: geometriesData.fillOpacity || 0.3
|
||||||
|
})
|
||||||
|
|
||||||
|
map.addOverLay(rectangle)
|
||||||
|
geometry[geometriesData.key] = { graphical: rectangle }
|
||||||
|
return rectangle
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 在天地图上创建一个多边形
|
||||||
|
* @param map 天地图实例
|
||||||
|
* @param geometriesData 多边形数据
|
||||||
|
* @param onChange 图形变化时的回调函数
|
||||||
|
* @param onSelect 图形被选中时的回调函数
|
||||||
|
*/
|
||||||
|
export const createPolygon = (map: any, geometriesData: any, onChange?: (data: any) => void, onSelect?: (key: string) => void) => {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (!T) return null
|
||||||
|
|
||||||
|
const { lat, lng } = map.getCenter()
|
||||||
|
|
||||||
|
geometriesData.paths = geometriesData.paths ?? [
|
||||||
|
{ lat: lat + 0.01, lng: lng + 0.01 },
|
||||||
|
{ lat: lat - 0.01, lng: lng + 0.01 },
|
||||||
|
{ lat: lat - 0.01, lng: lng - 0.01 },
|
||||||
|
{ lat: lat + 0.01, lng: lng - 0.01 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const lngLats = geometriesData.paths.map((item: any) => new T.LngLat(item.lng, item.lat))
|
||||||
|
const color = [
|
||||||
|
Math.floor(Math.random() * 255),
|
||||||
|
Math.floor(Math.random() * 255),
|
||||||
|
Math.floor(Math.random() * 255)
|
||||||
|
]
|
||||||
|
// 保存原始样式
|
||||||
|
const originalStyle = {
|
||||||
|
color: geometriesData.color || `rgba(${color.toString()}, .4)`,
|
||||||
|
weight: geometriesData.weight || 3,
|
||||||
|
opacity: geometriesData.opacity || 0.8,
|
||||||
|
fillColor: geometriesData.fillColor || `rgba(${color.toString()}, .4)`,
|
||||||
|
fillOpacity: geometriesData.fillOpacity || 0.3
|
||||||
|
}
|
||||||
|
const polygon = new T.Polygon(lngLats, originalStyle)
|
||||||
|
|
||||||
|
// 如果已存在该图形,先删除
|
||||||
|
if (geometry[geometriesData.key]) {
|
||||||
|
try {
|
||||||
|
if (geometry[geometriesData.key].editTimer) {
|
||||||
|
clearTimeout(geometry[geometriesData.key].editTimer)
|
||||||
|
}
|
||||||
|
map.removeOverLay(geometry[geometriesData.key].graphical)
|
||||||
|
} catch (e) {
|
||||||
|
// 删除旧图形失败
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
map.addOverLay(polygon)
|
||||||
|
|
||||||
|
// 保存上一次的路径
|
||||||
|
let prePaths = JSON.parse(JSON.stringify(geometriesData.paths))
|
||||||
|
|
||||||
|
// 保存几何数据的引用,确保在事件监听器中可用
|
||||||
|
const polygonData = { ...geometriesData }
|
||||||
|
|
||||||
|
// 监听地图触摸结束事件,检测多边形变化
|
||||||
|
const handleTouchEnd = () => {
|
||||||
|
if (!polygon.isEditable()) return
|
||||||
|
|
||||||
|
if (geometry[polygonData.key]?.editTimer) {
|
||||||
|
clearTimeout(geometry[polygonData.key].editTimer)
|
||||||
|
}
|
||||||
|
|
||||||
|
geometry[polygonData.key].editTimer = setTimeout(() => {
|
||||||
|
try {
|
||||||
|
const curLngLats = polygon.getLngLats()
|
||||||
|
|
||||||
|
// 确保 curLngLats 是数组
|
||||||
|
if (Array.isArray(curLngLats)) {
|
||||||
|
// 检查 curLngLats[0] 是否是数组(多边形可能返回嵌套数组)
|
||||||
|
let pathsArray = curLngLats
|
||||||
|
if (Array.isArray(curLngLats[0])) {
|
||||||
|
pathsArray = curLngLats[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
const curPaths = pathsArray.map((lngLat: any) => {
|
||||||
|
// 检查 lngLat 是否是数组 [lng, lat]
|
||||||
|
if (Array.isArray(lngLat)) {
|
||||||
|
return {
|
||||||
|
lat: lngLat[1],
|
||||||
|
lng: lngLat[0]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 否则,假设是对象 { lat, lng }
|
||||||
|
return {
|
||||||
|
lat: lngLat.lat,
|
||||||
|
lng: lngLat.lng
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 检查路径是否改变
|
||||||
|
const pathsChanged = JSON.stringify(curPaths) !== JSON.stringify(prePaths)
|
||||||
|
|
||||||
|
if (pathsChanged) {
|
||||||
|
polygonData.paths = curPaths
|
||||||
|
prePaths = JSON.parse(JSON.stringify(polygonData.paths))
|
||||||
|
// 调用回调函数
|
||||||
|
if (onChange) {
|
||||||
|
onChange(polygonData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error('curLngLats 不是数组:', curLngLats)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取多边形路径失败:', error)
|
||||||
|
}
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听多边形点击事件
|
||||||
|
const handleClick = () => {
|
||||||
|
// 调用选择回调函数
|
||||||
|
if (onSelect) {
|
||||||
|
onSelect(polygonData.key)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始时不启用编辑功能,只有在选中时才启用
|
||||||
|
// polygon.enableEdit()
|
||||||
|
|
||||||
|
// 添加事件监听
|
||||||
|
map.addEventListener('touchend', handleTouchEnd)
|
||||||
|
map.addEventListener('mouseup', handleTouchEnd)
|
||||||
|
polygon.addEventListener('click', handleClick)
|
||||||
|
|
||||||
|
geometry[polygonData.key] = { graphical: polygon, handleTouchEnd, handleClick, originalStyle }
|
||||||
|
return polygon
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除图形
|
||||||
|
* @param map 地图实例
|
||||||
|
* @param key 图形key
|
||||||
|
*/
|
||||||
|
export const deleteGeometry = (map: any, key: string) => {
|
||||||
|
if (!geometry[key]) return
|
||||||
|
try {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (T && geometry[key].graphical) {
|
||||||
|
// 清除定时器
|
||||||
|
if (geometry[key].editTimer) {
|
||||||
|
clearTimeout(geometry[key].editTimer)
|
||||||
|
}
|
||||||
|
// 移除事件监听器
|
||||||
|
if (geometry[key].handleTouchEnd) {
|
||||||
|
map.removeEventListener('touchend', geometry[key].handleTouchEnd)
|
||||||
|
map.removeEventListener('mouseup', geometry[key].handleTouchEnd)
|
||||||
|
}
|
||||||
|
// 移除点击事件监听器
|
||||||
|
if (geometry[key].handleClick) {
|
||||||
|
geometry[key].graphical.removeEventListener('click', geometry[key].handleClick)
|
||||||
|
}
|
||||||
|
// 移除覆盖物
|
||||||
|
map.removeOverLay(geometry[key].graphical)
|
||||||
|
}
|
||||||
|
delete geometry[key]
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('删除图形失败:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 清空所有图形
|
||||||
|
* @param map 地图实例
|
||||||
|
*/
|
||||||
|
export const clearAllGeometry = (map: any) => {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (T) {
|
||||||
|
// 先清除所有图形的事件监听器和定时器
|
||||||
|
Object.keys(geometry).forEach(key => {
|
||||||
|
if (geometry[key].editTimer) {
|
||||||
|
clearTimeout(geometry[key].editTimer)
|
||||||
|
}
|
||||||
|
if (geometry[key].handleTouchEnd) {
|
||||||
|
map.removeEventListener('touchend', geometry[key].handleTouchEnd)
|
||||||
|
map.removeEventListener('mouseup', geometry[key].handleTouchEnd)
|
||||||
|
}
|
||||||
|
if (geometry[key].handleClick) {
|
||||||
|
geometry[key].graphical.removeEventListener('click', geometry[key].handleClick)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 一次性清空地图上的所有覆盖物
|
||||||
|
map.clearOverLays()
|
||||||
|
}
|
||||||
|
// 清空几何对象存储
|
||||||
|
Object.keys(geometry).forEach(key => delete geometry[key])
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选中图形
|
||||||
|
* @param key 图形key
|
||||||
|
*/
|
||||||
|
export const selectGeometry = (key: string) => {
|
||||||
|
if (!geometry[key]?.graphical) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 先取消所有图形的选中状态
|
||||||
|
deselectAllGeometry()
|
||||||
|
|
||||||
|
// 设置选中状态
|
||||||
|
geometry[key].graphical.setSelected?.(true)
|
||||||
|
|
||||||
|
// 启用当前图形的编辑功能
|
||||||
|
geometry[key].graphical.enableEdit()
|
||||||
|
|
||||||
|
const color = [
|
||||||
|
Math.floor(Math.random() * 255),
|
||||||
|
Math.floor(Math.random() * 255),
|
||||||
|
Math.floor(Math.random() * 255)
|
||||||
|
]
|
||||||
|
|
||||||
|
// 修改样式,使其显示为选中状态
|
||||||
|
geometry[key].graphical.setStyle({
|
||||||
|
color: '#1890ff', // 选中时的边框颜色
|
||||||
|
weight: 2, // 选中时的边框宽度
|
||||||
|
opacity: 1, // 选中时的边框透明度
|
||||||
|
fillColor: `rgba(${color.toString()}, .6)`, // 选中时的填充颜色
|
||||||
|
fillOpacity: 1// 选中时的填充透明度
|
||||||
|
})
|
||||||
|
} catch (e) {
|
||||||
|
console.error('选中图形失败:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取消选中所有图形
|
||||||
|
*/
|
||||||
|
export const deselectAllGeometry = () => {
|
||||||
|
Object.keys(geometry).forEach(key => {
|
||||||
|
try {
|
||||||
|
// 取消选中状态
|
||||||
|
geometry[key]?.graphical?.setSelected?.(false)
|
||||||
|
|
||||||
|
// 禁用编辑功能
|
||||||
|
geometry[key]?.graphical?.disableEdit?.()
|
||||||
|
|
||||||
|
// 恢复原始样式
|
||||||
|
if (geometry[key]?.originalStyle) {
|
||||||
|
geometry[key].graphical.setStyle(geometry[key].originalStyle)
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('取消选中图形失败:', e)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建点标记
|
||||||
|
* @param map 天地图实例
|
||||||
|
* @returns 标记实例
|
||||||
|
*/
|
||||||
|
export const createMarker = (map: any) => {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (!T) return null
|
||||||
|
|
||||||
|
const { lat, lng } = map.getCenter()
|
||||||
|
const marker = new T.Marker(new T.LngLat(lng, lat))
|
||||||
|
map.addOverLay(marker)
|
||||||
|
return marker
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 逆地址解析
|
||||||
|
* @param params 参数 { mapKey, lat, lng }
|
||||||
|
* @returns Promise
|
||||||
|
*/
|
||||||
|
export const latLngToAddress = (params: any) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (!T) {
|
||||||
|
reject(new Error('天地图服务未加载'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const geocoder = new T.Geocoder()
|
||||||
|
const lngLat = new T.LngLat(params.lng, params.lat)
|
||||||
|
|
||||||
|
geocoder.getLocation(lngLat, (result: any) => {
|
||||||
|
if (result && result.status === '0') {
|
||||||
|
const addrComp = result.addressComponent || {}
|
||||||
|
let detailAddress = ''
|
||||||
|
|
||||||
|
if (result.formattedAddress) {
|
||||||
|
detailAddress = result.formattedAddress
|
||||||
|
} else if (result.address) {
|
||||||
|
detailAddress = result.address
|
||||||
|
} else {
|
||||||
|
const parts = []
|
||||||
|
if (addrComp.road) parts.push(addrComp.road)
|
||||||
|
if (addrComp.address) parts.push(addrComp.address)
|
||||||
|
if (addrComp.poi) parts.push(addrComp.poi)
|
||||||
|
detailAddress = parts.join('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const addressData = {
|
||||||
|
location: { lat: params.lat, lng: params.lng },
|
||||||
|
address: addrComp ?
|
||||||
|
`${ addrComp.province || '' }${ addrComp.city || '' }${ addrComp.county || '' }` : '',
|
||||||
|
formatted_addresses: {
|
||||||
|
recommend: detailAddress
|
||||||
|
},
|
||||||
|
address_component: {
|
||||||
|
province: addrComp.province || '',
|
||||||
|
city: addrComp.city || '',
|
||||||
|
district: addrComp.county || '',
|
||||||
|
street: addrComp.road || '',
|
||||||
|
street_number: addrComp.address || ''
|
||||||
|
},
|
||||||
|
addressComponent: addrComp,
|
||||||
|
formatted_address: detailAddress
|
||||||
|
}
|
||||||
|
resolve(addressData)
|
||||||
|
} else {
|
||||||
|
reject(new Error(result?.msg || '地址解析失败'))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 地址解析
|
||||||
|
* @param params 参数 { mapKey, address }
|
||||||
|
* @returns Promise
|
||||||
|
*/
|
||||||
|
export const addressToLatLng = (params: any) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const T = (window as any).T
|
||||||
|
if (!T) {
|
||||||
|
reject(new Error('天地图服务未加载'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const geocoder = new T.Geocoder()
|
||||||
|
geocoder.getPoint(params.address, (result: any) => {
|
||||||
|
if (result && result.status === '0' && result.location) {
|
||||||
|
const lat = result.location.lat
|
||||||
|
const lng = result.location.lon || result.location.lng
|
||||||
|
if (lat && lng) {
|
||||||
|
resolve({ lat, lng })
|
||||||
|
} else {
|
||||||
|
reject(new Error('坐标解析失败'))
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
reject(new Error(result?.msg || '未找到该地址'))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user