import { areaCodeToArr, getContourByCode } from '@/utils/cesium/mapUtil'
|
import { useStore } from 'vuex'
|
|
const { VITE_APP_REGION_URL } = import.meta.env
|
const defaultDir = `${VITE_APP_REGION_URL}/100000/`
|
// 获取文件路径
|
const getFiler = async url => {
|
const res = await fetch(url)
|
return await res.json()
|
}
|
|
export const useAreaBoundary = options => {
|
const {
|
initFly = false, //初始飞行到轮廓
|
} = options || {}
|
let map = null //地图实例
|
// 地图层级
|
const scalingJudgment = [
|
{ name: '县', zoomRange: [9.1, 20] },
|
{ name: '市', zoomRange: [5.1, 9.1] },
|
{ name: '省', zoomRange: [0, 5.1] },
|
]
|
const store = useStore()
|
const userAreaCode = computed(() => store.state.user.userInfo.detail.areaCode)
|
const areaCode = userAreaCode.value
|
const hierarchy = areaCodeToArr(areaCode.slice(0, 6))
|
const jsonPath = hierarchy.join('/')
|
let active = null //当前放大所属层级
|
let geoJsonLayer = null
|
let maxGeoJson = null //最大边界
|
|
// 初始化各个层级对应geojson
|
async function initLevelGJson() {
|
// 省级账号
|
if (hierarchy.length === 1) {
|
maxGeoJson = await getFiler(`${defaultDir}${jsonPath}/indexDistrict.json`) //区县边界
|
const gJson2 = await getFiler(`${defaultDir}${jsonPath}/index.json`) //市边界
|
scalingJudgment[0].gJson = maxGeoJson
|
scalingJudgment[1].gJson = gJson2
|
scalingJudgment[2].gJson = gJson2
|
}
|
// 市
|
if (hierarchy.length === 2) {
|
maxGeoJson = await getFiler(`${defaultDir}${jsonPath}/index.json`)
|
scalingJudgment[0].gJson = maxGeoJson
|
scalingJudgment[1].gJson = maxGeoJson
|
scalingJudgment[2].gJson = maxGeoJson
|
}
|
if (hierarchy.length === 3) {
|
maxGeoJson = await getContourByCode(areaCode.slice(0, 6))
|
scalingJudgment[0].gJson = maxGeoJson
|
scalingJudgment[1].gJson = maxGeoJson
|
scalingJudgment[2].gJson = maxGeoJson
|
}
|
}
|
|
// flyMaxBoundary
|
function flyMaxBoundary() {
|
let bj = L.geoJSON(maxGeoJson, {
|
style: feature => ({
|
color: 'rgba(255,120,0,0)',
|
fillOpacity: 0,
|
}),
|
}).addTo(map)
|
map.fitBounds(bj.getBounds())
|
map.removeLayer(bj)
|
}
|
|
// 渲染边界轮廓
|
function renderOutline(row) {
|
geoJsonLayer && map.removeLayer(geoJsonLayer)
|
geoJsonLayer = L.geoJSON(row.gJson, {
|
style: feature => ({
|
color: '#00F9EC', // 边界线颜色
|
weight: 2, // 边界线宽度
|
fillOpacity: 0, // 填充透明度
|
}),
|
}).addTo(map)
|
}
|
|
// 缩放回调
|
function zoomendChange() {
|
let zoom = map.getZoom()
|
for (let [index, item] of scalingJudgment.entries()) {
|
if (zoom > item.zoomRange[0] && zoom <= item.zoomRange[1]) {
|
if (active === item.name) return
|
active = item.name
|
renderOutline(item)
|
break
|
}
|
}
|
}
|
|
// 初始化边界
|
async function initBoundary(mapObj) {
|
map = mapObj
|
await initLevelGJson()
|
initFly && flyMaxBoundary()
|
zoomendChange()
|
map.on('zoomend', zoomendChange)
|
}
|
|
return {
|
initBoundary,
|
flyMaxBoundary,
|
}
|
}
|
