Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 aea522a2 作者: 方治民
操作

feat: 新增 Echarts 组件，完善 Mapbox 组件及小部件

上级 19ce46c4
正在显示 包含 2680 行增加 和 177 行删除
src/components/Echarts/index.ts 0 → 100644
export * from './src/hook'
export { default as Echarts } from './src/index.vue'
src/components/Echarts/src/echarts.module.js 0 → 100644
import { merge } from 'lodash-es'
import { loadEchartsLibs } from '/@/components/Echarts/src/tools'
import * as EchartsHelper from './inject'
// 全局注入工具函数
window.EchartsHelper = EchartsHelper
export default {
data() {
return {
option: {},
}
},
methods: {
loadLibs: loadEchartsLibs,
init() {
// 如果已经初始化过了，就直接更新配置项
if (this.chart && this.chart.setOption) {
this.chart.setOption(this.option)
return
}
// 初始化组件
const chart = window.echarts.init(document.getElementById(this.option.id))
// 设置图表配置项
chart.setOption(this.option)
this.chart = chart
},
changeOption(option) {
if (!option?.id) {
return
}
this.option = merge(this.option, option)
if (typeof window.echarts === 'object' && typeof window.echarts.init === 'function') {
this.init()
} else {
this.loadLibs().then(() => {
this.init()
})
}
},
},
}
src/components/Echarts/src/hook.ts 0 → 100644
import type { EChartsOption } from 'echarts'
import { tryOnMounted } from '@vueuse/core'
import { isProdMode } from '@/utils/env'
// 组件名称
export const name = 'Echarts'
export interface EchartsInstance {
setOption: (option: Partial<EChartsOption>) => Promise<void>
}
/**
* 注册 Echarts 实例
* @param option Echarts 配置项
*/
export function useEcharts<T extends EchartsInstance, P extends EChartsOption>(
option?: P,
): [(instance: T) => void, EchartsInstance] {
const instanceRef = ref<T>()
function register(instance: T) {
if (isProdMode()) {
if (instance === unref(instanceRef)) {
return
}
onUnmounted(() => {
instanceRef.value = null
})
}
instanceRef.value = instance
option && instance?.setOption(option)
}
function getInstance() {
const instance = unref(instanceRef)
if (!instance) {
console.warn('Echarts instance is undefined!')
}
return instance as T
}
return [
register,
{
setOption: (option: Partial<P>): Promise<void> => {
return new Promise((resolve) => {
tryOnMounted(() => {
getInstance()?.setOption(option)
resolve()
})
})
},
},
]
}
src/components/Echarts/src/index.vue 0 → 100644
<!-- renderjs 逻辑层 -->
<script>
import { nanoid } from 'nanoid'
export default {
emits: ['register'],
data() {
return {
id: nanoid(),
option: {},
}
},
mounted() {
this.$emit('register', this)
},
methods: {
setOption(option) {
this.option = {
id: this.id,
...option,
}
},
},
}
</script>
<!-- renderjs 视图层模块 -->
<script module="echarts" lang="renderjs" src="./echarts.module.js"></script>
<template>
<!-- #ifdef APP-PLUS || H5 -->
<view class="wrap echarts" :id="id" :option="option" :change:option="echarts.changeOption" />
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<view class="wrap empty">非 APP、H5 环境不支持</view>
<!-- #endif -->
</template>
<style lang="less" scoped>
//
</style>
src/components/Echarts/src/inject.ts 0 → 100644
export function symbolWeatherReplace(data: Recordable) {
return data
}
src/components/Echarts/src/tools.ts 0 → 100644
import { appendScript } from '/@/utils/dom'
/**
* 加载 Echarts 依赖库
*/
export function loadEchartsLibs() {
const id = 'echarts'
const version = '5.4.3'
const resource = `static/js/${id}/${version}/${id}`
return Promise.all([appendScript(id, `${resource}.min.js`)])
}
src/components/Map/Mapbox/hook.ts
......@@ -5,7 +5,7 @@ import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM, HandlerUtil } from './index'
import type { GeoJSONSourceDataUrlParams, HandlerUtilType, MapboxConfig, MapboxInstance } from './index'
import { API_URL, API_URL_PREFIX } from '/@/utils/net'
import { isProdMode } from '@/utils/env'
import { getToken } from '@/utils/auth'
import { useUserStoreWithOut } from '@/store/modules/user'
// 组件名称
export const name = 'Mapbox'
......@@ -45,6 +45,7 @@ export function useMapbox<T extends MapboxInstance, P extends MapboxConfig>(
return [
register,
{
setRegion: (region: string) => getInstance()?.setRegion(region),
setConfig: (config: Partial<P>) => getInstance()?.setConfig(config),
isReady: computed(() => instanceRef?.value?.isReady) as unknown as ComputedRef<boolean>,
......@@ -105,7 +106,7 @@ export function addDefaultSplotLayer(
map: MapboxInstance,
id: string,
layer?: Partial<mapboxgl.Layer>,
beforeId = 'fill-placeholder',
beforeId: string = 'fill-placeholder',
) {
map.addLayer(
merge(
......@@ -139,8 +140,8 @@ export function addDefaultSymbolLayer(
map: MapboxInstance,
id: string,
layer?: Partial<mapboxgl.Layer>,
beforeId = 'symbol-placeholder',
popop = true,
beforeId: string = 'symbol-placeholder',
popop: boolean = true,
) {
map.addLayer(
merge(
......@@ -190,9 +191,10 @@ export function flyTo(
* @returns source url
*/
export function buildGeoJSONSourceDataUrl(config: GeoJSONSourceDataUrlParams | string): string {
const userStore = useUserStoreWithOut()
const baseURL = `${API_URL}${API_URL_PREFIX}`
const defaultParams = {
Authorization: getToken(),
Authorization: userStore.getToken,
}
const url = typeof config === 'string' ? config : config.url
......
src/components/Map/Mapbox/index.ts
// @unocss-ignore
import type { Ref } from 'vue'
import type mapboxgl from 'mapbox-gl'
import { toRaw } from 'vue'
......@@ -56,16 +58,6 @@ export const defaultStyle: mapboxgl.Style = {
type: 'vector',
url: `${host}/api/tilesets/100000/tilejson`,
},
/** 湖南省 */
'430000': {
type: 'vector',
url: `${host}/api/tilesets/430000/tilejson`,
},
/** 湖南省 mask */
'430000.mask': {
type: 'vector',
url: `${host}/api/tilesets/430000.mask/tilejson`,
},
/** 湖南省-城市聚合 */
'430000.city': {
type: 'vector',
......@@ -86,64 +78,22 @@ export const defaultStyle: mapboxgl.Style = {
type: 'vector',
url: `${host}/api/tilesets/430000.area.label/tilejson`,
},
/** 湖南省-乡镇聚合 */
'430000.town': {
type: 'vector',
url: `${host}/api/tilesets/430000.town/tilejson`,
},
/** 湖南省-乡镇聚合名称 */
'430000.town.label': {
type: 'vector',
url: `${host}/api/tilesets/430000.town.label/tilejson`,
},
// // ============ 流域河流数据源 ============
// /** 湖南省-全流域及遮罩 */
// '430000.watershed-quan-liu-yu': {
// type: 'vector',
// url: `${host}/api/tilesets/watershed-quan-liu-yu/tilejson`,
// minzoom: 0,
// maxzoom: 11,
// bounds: [87.638275, 8.296956, 136.638275, 44.385598],
// },
// /** 湖南省-大河流域 */
// '430000.watershed-big': {
// type: 'vector',
// url: `${host}/api/tilesets/watershed-big/tilejson`,
// minzoom: 1,
// maxzoom: 13,
// bounds: [107.264454, 23.925618, 114.296651, 30.548506],
// },
// /** 湖南省-大河流域名称 */
// '430000.watershed-big-label': {
// type: 'vector',
// url: `${host}/api/tilesets/watershed-big-label/tilejson`,
// minzoom: 0,
// maxzoom: 0,
// bounds: [109.539, 26.6586, 112.632, 29.6013],
// },
// /** 湖南省-中小河流域 */
// '430000.watershed-medium': {
// type: 'vector',
// url: `${host}/api/tilesets/watershed-medium/tilejson`,
// minzoom: 0,
// maxzoom: 11,
// bounds: [107.264454, 23.925618, 114.296644, 30.548506],
// },
// /** 湖南省-中小河流域名称 */
// '430000.watershed-medium-label': {
// type: 'vector',
// url: `${host}/api/tilesets/watershed-medium-label/tilejson`,
// minzoom: 0,
// maxzoom: 0,
// bounds: [108.3062, 24.5421, 114.074, 30.0494],
// },
// /** 湖南省-上中下游边界 */
// '430000.watershed-big-medium': {
// type: 'vector',
// url: `${host}/api/tilesets/watershed-big-medium/tilejson`,
// minzoom: 0,
// maxzoom: 12,
// bounds: [107.264454, 23.925618, 114.296651, 30.548506],
// },
// /** 湖南省-二级河流 */
// '430000.river-secondary': {
// type: 'vector',
// url: `${host}/api/tilesets/river-secondary/tilejson`,
// minzoom: 0,
// maxzoom: 9,
// bounds: [87.638275, 8.296956, 136.638275, 44.385598],
// },
// 聚合数据源
'430000.combine': {
type: 'vector',
url: `${host}/api/tilesets/combine/tilejson`,
},
},
layers: [
// 默认图层 - 影像底图
......@@ -209,17 +159,39 @@ export const defaultStyle: mapboxgl.Style = {
},
},
// 城市边界
// 河流边界
{
id: `430000.city-line`,
source: '430000.city',
'source-layer': '430000.city',
id: 'secondary-river',
type: 'fill',
source: '430000.combine',
'source-layer': 'riversecondary',
layout: { visibility: 'none' },
paint: { 'fill-color': 'hsl(209, 83%, 79%)' },
},
{
id: 'thirdlevel-river',
type: 'line',
source: '430000.combine',
'source-layer': 'rivertertiary',
layout: { visibility: 'none' },
paint: { 'line-color': 'hsl(209, 83%, 79%)' },
},
// 乡镇边界
{
id: `430000.town-line`,
source: '430000.town',
'source-layer': '430000.town',
type: 'line',
layout: {
visibility: 'none',
},
paint: {
'line-width': 1,
'line-color': '#ccc',
'line-color': '#d5d5d5',
'line-dasharray': [3, 3],
},
minzoom: 5,
minzoom: 7.8,
},
// 县城边界
......@@ -228,53 +200,37 @@ export const defaultStyle: mapboxgl.Style = {
source: '430000.area',
'source-layer': '430000.area',
type: 'line',
paint: {
'line-width': 1,
'line-color': '#ccc',
},
minzoom: 8,
},
// ============ 省市县边界图层 ============
{
id: '430000-mask',
type: 'fill',
source: '430000.mask',
'source-layer': '430000.mask',
layout: {
visibility: 'visible',
visibility: 'none',
},
paint: {
'fill-color': '#F4F5F7',
'line-width': 1,
'line-color': '#bfbfbf',
},
minzoom: 5,
minzoom: 6.5,
},
// 城市边界
{
id: `430000-shadow`,
id: `430000.city-line`,
source: '430000.city',
'source-layer': '430000.city',
type: 'line',
source: '430000',
'source-layer': '430000',
layout: {
'line-join': 'round',
'line-cap': 'round',
visibility: 'none',
},
paint: {
'line-width': 4,
'line-blur': 92.7,
'line-offset': -4,
'line-color': '#444',
'line-width': 1,
'line-color': '#ababab',
},
minzoom: 5,
},
// 遮罩占位图层
{
id: `430000-line`,
source: '430000',
'source-layer': '430000',
type: 'line',
paint: {
'line-width': 2,
'line-color': '#444',
},
id: 'mask-placeholder',
type: 'background',
layout: { visibility: 'none' },
},
// 城市名称
......@@ -294,6 +250,7 @@ export const defaultStyle: mapboxgl.Style = {
'text-line-height': 1.2,
'text-letter-spacing': 0.1,
'text-max-width': 8,
visibility: 'none',
},
paint: {
'text-color': '#333',
......@@ -302,9 +259,9 @@ export const defaultStyle: mapboxgl.Style = {
'text-halo-blur': 1,
},
minzoom: 5,
maxzoom: 8,
maxzoom: 6.5,
},
// 县城名称
// 区县名称
{
id: `430000.area-label`,
source: '430000.area.label',
......@@ -313,14 +270,39 @@ export const defaultStyle: mapboxgl.Style = {
layout: {
'text-field': '{name}',
'text-size': 12,
'text-allow-overlap': true,
'text-ignore-placement': true,
'text-justify': 'center',
'text-anchor': 'center',
'text-padding': 0,
'text-line-height': 1.2,
'text-letter-spacing': 0.1,
'text-max-width': 8,
visibility: 'none',
},
paint: {
'text-color': '#333',
'text-halo-color': '#fff',
'text-halo-width': 2,
'text-halo-blur': 1,
},
minzoom: 6.5,
maxzoom: 8.5,
},
// 乡镇名称
{
id: `430000.town-label`,
source: '430000.town.label',
'source-layer': '430000.town.label',
type: 'symbol',
layout: {
'text-field': '{name}',
'text-size': 12,
'text-justify': 'center',
'text-anchor': 'center',
'text-padding': 0,
'text-line-height': 1.2,
'text-letter-spacing': 0.1,
'text-max-width': 8,
visibility: 'visible',
},
paint: {
'text-color': '#333',
......@@ -328,7 +310,7 @@ export const defaultStyle: mapboxgl.Style = {
'text-halo-width': 2,
'text-halo-blur': 1,
},
minzoom: 8,
minzoom: 8.5,
},
// 数值渲染占位图层
......@@ -340,6 +322,14 @@ export const defaultStyle: mapboxgl.Style = {
],
}
export function buildTileJsonURL(tileset: string) {
return `${host}/api/tilesets/${tileset}/tilejson`
}
export function buildJsonAssetURL(tileset: string) {
return `${host}/api/assets/json/${tileset}.json`
}
interface LayerOption {
label: string
value: string
......@@ -391,7 +381,7 @@ class LayerControl implements mapboxgl.IControl {
},
layout: { visibility: layer.active ? 'visible' : 'none' },
},
'background',
'sky',
)
}
})
......@@ -616,7 +606,7 @@ export interface MapControlOptions {
// 经纬度拾取
info?: boolean
// 定位控件
geolocate?: Recordable
geolocate?: { initial?: boolean; fn?: any }
// 面积测算控件
measure?: boolean
// 距离测算控件
......@@ -717,17 +707,29 @@ export function loadMapControl(mapboxgl: any, map: mapboxgl.Map, options?: MapCo
// 定位
if (options.geolocate) {
const geolocate = new mapboxgl.GeolocateControl({
fitBoundsOptions: {
maxZoom: 15,
duration: 0,
},
positionOptions: {
enableHighAccuracy: true,
timeout: 10000,
},
trackUserLocation: true,
trackUserLocation: false,
showUserHeading: true,
})
// #ifdef APP-PLUS
geolocate.geolocation = options.geolocate
// #endif
map.addControl(geolocate, 'top-right')
map.addControl(geolocate, 'bottom-right')
// 初始化定位
if (options.geolocate.initial) {
// 由于定位控件初始化需要时间，所以延迟 0.5 秒后再触发定位
setTimeout(() => {
geolocate.trigger()
}, 500)
}
}
}
......@@ -833,6 +835,13 @@ export function sendRequest(url: string, method = 'GET', data = {}) {
*/
export interface MapboxConfig {
/**
* 地图行政区域编码，最小支持到区县级别
* @example 430000
* @default ''
* FIEXD: 目前仅支持湖南省，其他省份暂不支持
*/
region?: string
/**
* Mapbox 构造函数参数
* @link https://docs.mapbox.com/mapbox-gl-js/api/map/
*/
......@@ -859,6 +868,12 @@ export interface MapboxConfig {
*/
align?: 'bottom-left' | 'bottom-right'
}
/**
* 扩展配置
*/
extra?: {
control?: MapControlOptions
}
// =============== 自定义事件 =================
/**
......@@ -874,6 +889,13 @@ export interface MapboxConfig {
* @param data 请求回来的数据（默认情况下将过滤掉一些大字段或数据集，例如：jsonObject、liveVos）
*/
onSourceRequestHandle?: (data: { id: string; url: string; data: Recordable }) => void
/**
* 监听地图事件
* 可以用来处理地图点击事件、自定义事件等
* @param e 事件对象
*/
onMapEvent?: (e: { type: 'click' | 'custom' | string; name: string; data: Recordable }) => void
}
/**
......@@ -881,6 +903,12 @@ export interface MapboxConfig {
*/
export interface MapboxInstance {
/**
* 设置地图行政区域编码，例如: 430000, 设置后地图的遮罩层将仅包含该区域的边界
* FIXED: 暂时仅支持湖南省
* @param region 地图显示行政区域编码
*/
setRegion: (region: string) => void
/**
* 设置地图组件配置
* @param config 地图配置
*/
......@@ -1026,12 +1054,20 @@ function isPlainObject(obj: any): boolean {
return proto === null || proto === Object.prototype
}
interface PointFeatureMap {
/**
* 时序按钮标记
*/
timing?: boolean
[key: string]: any
}
/**
* 数据处理工具
*/
export const HandlerUtil = {
isPlainObject,
createDefaultPointFeature(station: Station, map = {} as Recordable): GeoJSON.Feature<GeoJSON.Geometry> {
createDefaultPointFeature(station: Station, map = {} as PointFeatureMap): GeoJSON.Feature<GeoJSON.Geometry> {
return {
type: 'Feature',
geometry: {
......@@ -1039,6 +1075,7 @@ export const HandlerUtil = {
coordinates: [Number(station.lon), Number(station.lat)],
},
properties: {
...station,
key: station.key,
suffix: station.suffix,
value: station.value,
......@@ -1065,9 +1102,19 @@ export const HandlerUtil = {
}
if (isPlainObject(map)) {
// 时序按钮标记
const timing = map.timing
if (timing) {
delete map.timing
}
for (const key in map) {
htmls.push(`<div class="popup-row"><span class="popup-title">${key}：</span>${map[key]}</div>`)
}
if (timing) {
htmls.push(`<div class="popup-row timing">{{timing}}</div>`)
}
}
htmls.push('</div>')
......
src/components/Map/Mapbox/index.vue
<script>
import { nanoid } from 'nanoid'
import { useUserStoreWithOut } from '@/store/modules/user'
import { getRegionConfig } from '@/components/Map/Mapbox/regions'
// FIXED: 重要说明
// renderjs 组件暂不支持 setup 组件写法，对 ts 支持也不友好，这里的写法需要参考 vue2 的写法
......@@ -18,6 +20,7 @@
data() {
return {
id: nanoid(),
onMapEvent: noop,
onLoadedEvent: noop,
onSourceRequestHandleEvent: noop,
onSourceRequestHandleErrorEvent: noop,
......@@ -38,7 +41,7 @@
setPaintPropertyOptions: undefined,
setLayoutPropertyOptions: undefined,
flyToOptions: undefined,
positionOptions: undefined,
regionOptions: undefined,
// change options 锁，结合 event，配合数组实现先进先出队列控制
changeLock: false,
......@@ -57,27 +60,6 @@
this.$emit('register', this)
},
methods: {
getCurrentPosition() {
// 获取用户定位
uni.getLocation({
type: 'wgs84',
success: (res) => {
// 更新定位
// 加入到 change 事件队列中
this.changeOptionsQueue.push({
fn: 'position',
coords: res,
timestamp: Date.now(),
})
// 尝试触发 change 事件
this.tryTriggerChange()
},
fail: () => {
Message.toast('获取位置失败,请打开定位权限')
},
})
},
onMapLoad(data) {
this.loaded = true
Message.hideLoading()
......@@ -91,8 +73,8 @@
// 触发 onSourceRequestHandle 事件
this.onSourceRequestHandleEvent?.(data)
},
onSourceRequestErrorHandle(data) {
console.debug('📢 Request Error Handle', data)
async onSourceRequestErrorHandle(data) {
console.debug('❌ Request Error Handle', data)
// 触发 onSourceRequestErrorHandle 事件
this.onSourceRequestErrorHandleEvent?.(data)
......@@ -102,7 +84,8 @@
const { status, message } = JSON.parse(data)
if (status === 401) {
// 跳转到登录页
uni.reLaunch({ url: '/pages/login/login' })
const userStore = useUserStoreWithOut()
await userStore.logout()
Message.toast('登录信息过期,请重新登录!')
} else {
Message.toast(message)
......@@ -113,6 +96,12 @@
}
}
},
// 监听地图事件(on,custom...)
onEventHandle(event) {
console.debug('📢 Map Event', event)
// 触发事件
this.onMapEvent?.(event)
},
// 尝试触发事件, 通过 changeLock 控制
tryTriggerChange() {
if (!this.changeLock && this.changeOptionsQueue.length) {
......@@ -123,19 +112,50 @@
},
// 监听地图配置从逻辑层到视图层的响应式变化事件
onMapOptionsChangeEvent(event) {
console.debug('🔊 Map Event', event)
console.debug('🔊 Map Options Change Event', event)
this.changeLock = false
this.tryTriggerChange()
},
/**
* 解析区域编码获得区域配置
* @param {string} code 区域编码
*/
analysisRegion(code) {
const region = code || '43'
const regionConfig = getRegionConfig(region)
return {
region,
regionConfig,
}
},
// 设置地图区域编码，用于覆盖遮罩层
setRegion(value) {
const { region, regionConfig } = this.analysisRegion(value)
// 加入到 change 事件队列中
this.changeOptionsQueue.push({
fn: 'region',
region,
regionConfig,
})
// 尝试触发 change 事件
this.tryTriggerChange()
},
// 设置地图配置
setConfig(config) {
const { region, regionConfig } = this.analysisRegion(config?.region)
this.options = {
container: this.id,
style: config?.style,
options: config?.options,
attribution: config?.attribution,
extra: config?.extra,
region,
regionConfig,
}
this.onMapEvent = config?.onMapEvent || noop
this.onLoadedEvent = config?.onLoaded || noop
this.onSourceRequestHandleEvent = config?.onSourceRequestHandle || noop
this.onSourceRequestErrorHandleEvent = config?.onSourceRequestErrorHandle || noop
......@@ -319,6 +339,24 @@
// 尝试触发 change 事件
this.tryTriggerChange()
},
// 获取当前位置
getCurrentPosition() {
// 获取用户定位
uni.getLocation({
type: 'wgs84',
success: (res) => {
// 更新定位
this.position = {
coords: res,
_: Date.now(),
}
},
fail: () => {
Message.toast('获取位置失败,请打开定位权限')
},
})
},
},
}
</script>
......@@ -355,8 +393,8 @@
:change:removeOptions="mapbox.changeRemoveOptions"
:flyToOptions="flyToOptions"
:change:flyToOptions="mapbox.changeFlyToOptions"
:positionOptions="positionOptions"
:change:positionOptions="mapbox.changePositionOptions"
:regionOptions="regionOptions"
:change:regionOptions="mapbox.changeRegionOptions"
/>
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
......
src/components/Map/Mapbox/mapbox.module.js
import qs from 'qs'
import { merge, omit } from 'lodash-es'
import { HandlerUtil, defaultStyle, loadMapControl, loadMapboxLibs, sendRequest } from '/@/components/Map/Mapbox'
import {
HandlerUtil,
buildTileJsonURL,
defaultStyle,
loadMapControl,
loadMapboxLibs,
sendRequest,
} from '/@/components/Map/Mapbox'
// renderjs 官方文档
// https://uniapp.dcloud.io/tutorial/renderjs.html
......@@ -44,14 +51,45 @@ async function request(url, handler) {
return { data: body, raw: body }
}
// 全局暴露 popup 事件处理方法
window.onPopupContentEventHandle = function () {
if (popupFeature && $vm) {
// 获取当前 popup 点位的图层和属性
const layer = popupFeature.layer.id
const properties = popupFeature.properties
delete properties.popup
// 调用逻辑层方法
$vm.$ownerInstance.callMethod('onEventHandle', {
type: 'custom',
name: 'timing',
data: {
type: 'click',
layer,
properties,
},
})
}
}
const defaultEmptyGeoJSON = {
type: 'FeatureCollection',
features: [],
}
let $vm = null
let popup = null
let popupFeature = null
export default {
mounted() {},
data() {
return {
config: {},
}
},
mounted() {
// eslint-disable-next-line @typescript-eslint/no-this-alias
$vm = this
},
methods: {
loadLibs: loadMapboxLibs,
initMap(options) {
......@@ -100,9 +138,10 @@ export default {
// 加载地图控件
map.on('load', () => {
// #ifdef APP-PLUS
if (options?.control?.geolocate) {
if (options?.extra?.control?.geolocate) {
window.navigator.permissions = undefined
options.control.geolocate = {
options.extra.control.geolocate = {
...options.extra.control.geolocate,
geolocation: {
getCurrentPosition: (onPositionSuccess, _onPositionError, options) => {
this.onPositionSuccess = onPositionSuccess
......@@ -114,10 +153,11 @@ export default {
// #endif
// 加载地图图层
this.initMapLayers()
this.initMapLayers(this.config)
.then(() => {
// 调用逻辑层方法
this.loaded = true
console.debug('Mapbox map loaded', map)
this.$ownerInstance.callMethod('onMapLoad', {
center: map.getCenter(),
})
......@@ -134,13 +174,144 @@ export default {
}
// 加载地图控件
loadMapControl(mapboxgl, map, options?.control)
loadMapControl(mapboxgl, map, options?.extra?.control)
})
.catch(console.error)
})
},
initMapLayers() {
// TODO: 加载地图图层
initMapLayers({ region, regionConfig }) {
// TODO
// 1. 检查遮罩数据源是否存在，不存在则添加，存在则先移除再添加
// 2. 检查遮罩图层是否存在，不存在则添加，存在则先移除再添加
// 3. 对一些数据图层进行过滤，只显示当前区域的数据
// 4. 重置地图中心点和缩放级别
if (region && regionConfig) {
const { properties } = regionConfig
const id = properties.code
// 检查遮罩数据源是否存在，存在则先移除
if (this.map.getSource(id)) {
this.map.removeSource(id)
this.map.removeSource(`${id}.mask`)
}
// 检查遮罩图层是否存在，存在则先移除
if (this.map.getLayer(id)) {
this.map.removeLayer(`${id}.line`)
this.map.removeLayer(`${id}.mask`)
this.map.removeLayer(`${id}.shadow`)
}
// 添加边界数据源
this.map.addSource(id, {
type: 'vector',
url: buildTileJsonURL(id),
})
// 添加遮罩数据源
this.map.addSource(`${id}.mask`, {
type: 'vector',
url: buildTileJsonURL(`${id}.mask`),
})
// 添加遮罩图层
this.map.addLayer(
{
id: `${id}.mask`,
type: 'fill',
source: `${id}.mask`,
'source-layer': `${id}.mask`,
paint: {
'fill-color': '#F4F5F7',
},
},
'mask-placeholder',
)
// 添加阴影图层
this.map.addLayer(
{
id: `${id}.shadow`,
type: 'line',
source: id,
'source-layer': id,
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-width': 4,
'line-blur': 92.7,
'line-offset': -4,
'line-color': '#444',
},
},
'mask-placeholder',
)
// 添加边界图层
this.map.addLayer(
{
id: `${id}.line`,
source: id,
'source-layer': id,
type: 'line',
paint: {
'line-width': 2,
'line-color': '#444',
},
},
'mask-placeholder',
)
// 解析区域编码
const splits = region.match(/.{1,2}/g)
if (splits && splits.length > 0) {
// 解构省市区编码
const [_, city, area] = splits
// 视角飞行到最佳位置
this.map.flyTo({
center: [properties.lat, properties.lon],
zoom: properties.zoom || (area ? 10.5 : city ? 6.5 : 5.5),
essential: true,
// speed: 0.2,
duration: 0,
})
// 重置图层过滤
this.map.setFilter(`430000.city-label`, null)
this.map.setFilter(`430000.area-label`, null)
this.map.setFilter(`430000.town-label`, null)
// 图层数据过滤
if (area) {
this.map.setLayoutProperty('430000.city-label', 'visibility', 'none')
this.map.setLayoutProperty('430000.area-label', 'visibility', 'visible')
this.map.setFilter(`430000.area-label`, [
'all',
['==', ['get', 'city'], city],
['==', ['get', 'area'], area],
])
this.map.setFilter(`430000.town-label`, [
'all',
['==', ['get', 'city'], city],
['==', ['get', 'area'], area],
])
} else if (city) {
this.map.setLayoutProperty('430000.city-label', 'visibility', 'visible')
this.map.setLayoutProperty('430000.area-label', 'visibility', 'visible')
this.map.setFilter(`430000.city-label`, ['==', ['get', 'city'], city])
this.map.setFilter(`430000.area-label`, ['==', ['get', 'city'], city])
this.map.setFilter(`430000.town-label`, ['==', ['get', 'city'], city])
} else {
this.map.setLayoutProperty('430000.city-label', 'visibility', 'visible')
this.map.setLayoutProperty('430000.area-label', 'visibility', 'visible')
}
setTimeout(() => {
this.map.setLayoutProperty('430000.city-line', 'visibility', 'visible')
this.map.setLayoutProperty('430000.area-line', 'visibility', 'visible')
this.map.setLayoutProperty('430000.town-line', 'visibility', 'visible')
}, 500)
}
}
return Promise.resolve()
},
// 检测触发变更时候的有效性
......@@ -160,6 +331,7 @@ export default {
return
}
this.config = options
if (typeof window.mapboxgl === 'object') {
this.initMap(options)
} else {
......@@ -168,6 +340,14 @@ export default {
})
}
},
changeRegionOptions(options) {
if (this.checkOnChangeValidity(options)) {
this.initMapLayers(options).then(() => {
this.config.region = options.region
this.config.regionConfig = options.regionConfig
})
}
},
changeFlyToOptions(options) {
if (this.checkOnChangeValidity(options)) {
this.map.flyTo(options)
......@@ -183,6 +363,8 @@ export default {
if (this.map.getSource(options.id)) {
// 移除弹窗
popup && popup.remove()
popup = null
popupFeature = null
// 清空数据
this.map.getSource(options.id).setData(defaultEmptyGeoJSON)
} else {
......@@ -204,6 +386,7 @@ export default {
})
})
.catch((e) => {
console.error(e)
this.$ownerInstance.callMethod('onSourceRequestErrorHandle', e.message)
})
}
......@@ -226,13 +409,18 @@ export default {
this.map.on('click', options.layer.id, (e) => {
const feature = e.features[0]
if (feature && feature.properties?.popup) {
popupFeature = feature
popup = new window.mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML(
feature.properties.popup
.replace('{key}', feature.properties.key)
.replace('{value}', feature.properties.value)
.replace('{suffix}', feature.properties.suffix || ''),
.replace('{suffix}', feature.properties.suffix || '')
.replace(
'{{timing}}',
`<button onclick="onPopupContentEventHandle()"><i class="icon"></i>查看时序</button>`,
),
)
.addTo(this.map)
}
......@@ -268,19 +456,24 @@ export default {
if (this.checkOnChangeValidity(options)) {
// TODO: 事件绑定与解绑，待优化，目前无法起到解绑的作用
if (options.event === 'on') {
this.map.on(options.type, options.layer, () => {})
this.map.on(options.type, options.layer, (e) => {
this.$ownerInstance.callMethod('onEventHandle', {
type: options.type,
layer: options.layer,
event: e,
})
})
} else if (options.event === 'off') {
this.map.off(options.type, options.layer, () => {})
}
}
},
// 变更定位坐标
changePositionOptions(options) {
if (this.checkOnChangeValidity(options)) {
changePosition(position) {
if (!this.loaded) {
return
}
this.onPositionSuccess?.(options)
this.onPositionSuccess?.(position)
},
},
}
src/components/Map/Mapbox/regions.ts 0 → 100644
export function getRegionConfig(region: string): GeoJSON.Feature<GeoJSON.Point> {
return HUNAN_REGIONS[String(region || '43').padEnd(6, '0')]
}
export const HUNAN_REGIONS = {
'430000': {
id: 430000,
type: 'Feature',
properties: { name: '湖南省', province: '43', code: '430000', lat: 111.6, lon: 26.77 },
geometry: { type: 'Point', coordinates: [112.947314, 28.18616] },
},
'430100': {
type: 'Feature',
properties: {
code: '430100',
name: '长沙市',
province: '43',
city: '01',
lat: 113.063841,
lon: 27.733286,
},
geometry: { type: 'Point', coordinates: [112.94731408395079, 28.186160323597434] },
id: 430100,
},
'430102': {
type: 'Feature',
properties: {
code: '430102',
name: '芙蓉区',
province: '43',
city: '01',
area: '02',
lat: 113.037078,
lon: 28.173557,
},
geometry: { type: 'Point', coordinates: [113.05437645657373, 28.20653329485] },
id: 430102,
},
'430103': {
type: 'Feature',
properties: {
code: '430103',
name: '天心区',
province: '43',
city: '01',
area: '03',
lat: 112.980946,
lon: 28.032686,
zoom: 10.2,
},
geometry: { type: 'Point', coordinates: [113.001393866701, 28.05535994531411] },
id: 430103,
},
'430104': {
type: 'Feature',
properties: {
code: '430104',
name: '岳麓区',
province: '43',
city: '01',
area: '04',
lat: 112.794972,
lon: 28.050464,
zoom: 9.13,
},
geometry: { type: 'Point', coordinates: [112.82078004151099, 28.127273962284654] },
id: 430104,
},
'430105': {
type: 'Feature',
properties: {
code: '430105',
name: '开福区',
province: '43',
city: '01',
area: '05',
lat: 112.99086,
lon: 28.261982,
zoom: 10.2,
},
geometry: { type: 'Point', coordinates: [113.01352150727135, 28.321854790235914] },
id: 430105,
},
'430111': {
type: 'Feature',
properties: {
code: '430111',
name: '雨花区',
province: '43',
city: '01',
area: '11',
lat: 113.077807,
lon: 27.993345,
zoom: 9.7,
},
geometry: { type: 'Point', coordinates: [113.08509584496585, 28.02659000045035] },
id: 430111,
},
'430112': {
type: 'Feature',
properties: {
code: '430112',
name: '望城区',
province: '43',
city: '01',
area: '12',
lat: 112.825566,
lon: 28.262214,
zoom: 9.13,
},
geometry: { type: 'Point', coordinates: [112.81639480061067, 28.352447870633075] },
id: 430112,
},
'430121': {
type: 'Feature',
properties: {
code: '430121',
name: '长沙县',
province: '43',
city: '01',
area: '21',
lat: 113.200784,
lon: 28.241158,
zoom: 8.7,
},
geometry: { type: 'Point', coordinates: [113.24173828096262, 28.36048710860851] },
id: 430121,
},
'430181': {
type: 'Feature',
properties: {
code: '430181',
name: '浏阳市',
province: '43',
city: '01',
area: '81',
lat: 113.714812,
lon: 27.999539,
zoom: 7.8,
},
geometry: { type: 'Point', coordinates: [113.5459169226901, 28.191562533925126] },
id: 430181,
},
'430182': {
type: 'Feature',
properties: {
code: '430182',
name: '宁乡市',
province: '43',
city: '01',
area: '82',
lat: 112.3414,
lon: 27.973983,
zoom: 8.0,
},
geometry: { type: 'Point', coordinates: [112.40649207520309, 28.140232914573463] },
id: 430182,
},
'430200': {
type: 'Feature',
properties: {
code: '430200',
name: '株洲市',
province: '43',
city: '02',
lat: 113.497479,
lon: 26.68148,
},
geometry: { type: 'Point', coordinates: [113.45863700259983, 27.17324281159717] },
id: 430200,
},
'430202': {
type: 'Feature',
properties: {
code: '430202',
name: '荷塘区',
province: '43',
city: '02',
area: '02',
lat: 113.23018156274084,
lon: 27.925302464047284,
},
geometry: { type: 'Point', coordinates: [113.23018156274084, 27.925302464047284] },
id: 430202,
},
'430203': {
type: 'Feature',
properties: {
code: '430203',
name: '芦淞区',
province: '43',
city: '02',
area: '03',
lat: 113.24698009554513,
lon: 27.79908514489288,
},
geometry: { type: 'Point', coordinates: [113.24698009554513, 27.79908514489288] },
id: 430203,
},
'430204': {
type: 'Feature',
properties: {
code: '430204',
name: '石峰区',
province: '43',
city: '02',
area: '04',
lat: 113.15515241404151,
lon: 27.95431125444443,
},
geometry: { type: 'Point', coordinates: [113.15515241404151, 27.95431125444443] },
id: 430204,
},
'430211': {
type: 'Feature',
properties: {
code: '430211',
name: '天元区',
province: '43',
city: '02',
area: '11',
lat: 113.05348277072393,
lon: 27.656610002756196,
},
geometry: { type: 'Point', coordinates: [113.05348277072393, 27.656610002756196] },
id: 430211,
},
'430212': {
type: 'Feature',
properties: {
code: '430212',
name: '渌口区',
province: '43',
city: '02',
area: '12',
lat: 113.14148219276399,
lon: 27.53589000981881,
},
geometry: { type: 'Point', coordinates: [113.14148219276399, 27.53589000981881] },
id: 430212,
},
'430223': {
type: 'Feature',
properties: {
code: '430223',
name: '攸县',
province: '43',
city: '02',
area: '23',
lat: 113.41776287174375,
lon: 27.12484017663232,
},
geometry: { type: 'Point', coordinates: [113.41776287174375, 27.12484017663232] },
id: 430223,
},
'430224': {
type: 'Feature',
properties: {
code: '430224',
name: '茶陵县',
province: '43',
city: '02',
area: '24',
lat: 113.5853739913709,
lon: 26.775446031888727,
},
geometry: { type: 'Point', coordinates: [113.5853739913709, 26.775446031888727] },
id: 430224,
},
'430225': {
type: 'Feature',
properties: {
code: '430225',
name: '炎陵县',
province: '43',
city: '02',
area: '25',
lat: 113.81390906426675,
lon: 26.37128675809254,
},
geometry: { type: 'Point', coordinates: [113.81390906426675, 26.37128675809254] },
id: 430225,
},
'430281': {
type: 'Feature',
properties: {
code: '430281',
name: '醴陵市',
province: '43',
city: '02',
area: '81',
lat: 113.45580938383763,
lon: 27.631846337532107,
},
geometry: { type: 'Point', coordinates: [113.45580938383763, 27.631846337532107] },
id: 430281,
},
'430300': {
type: 'Feature',
properties: {
code: '430300',
name: '湘潭市',
province: '43',
city: '03',
lat: 112.544741,
lon: 27.522009,
zoom: 7.5,
},
geometry: { type: 'Point', coordinates: [112.56078254464227, 27.783882570619102] },
id: 430300,
},
'430302': {
type: 'Feature',
properties: {
code: '430302',
name: '雨湖区',
province: '43',
city: '03',
area: '02',
lat: 112.83482964810315,
lon: 27.976488551057646,
},
geometry: { type: 'Point', coordinates: [112.83482964810315, 27.976488551057646] },
id: 430302,
},
'430304': {
type: 'Feature',
properties: {
code: '430304',
name: '岳塘区',
province: '43',
city: '03',
area: '04',
lat: 113.02604947538589,
lon: 27.932358033588123,
},
geometry: { type: 'Point', coordinates: [113.02604947538589, 27.932358033588123] },
id: 430304,
},
'430321': {
type: 'Feature',
properties: {
code: '430321',
name: '湘潭县',
province: '43',
city: '03',
area: '21',
lat: 112.71284604417524,
lon: 27.634472286773402,
},
geometry: { type: 'Point', coordinates: [112.71284604417524, 27.634472286773402] },
id: 430321,
},
'430381': {
type: 'Feature',
properties: {
code: '430381',
name: '湘乡市',
province: '43',
city: '03',
area: '81',
lat: 112.35026227262158,
lon: 27.79863766702213,
},
geometry: { type: 'Point', coordinates: [112.35026227262158, 27.79863766702213] },
id: 430381,
},
'430382': {
type: 'Feature',
properties: {
code: '430382',
name: '韶山市',
province: '43',
city: '03',
area: '82',
lat: 112.50567036797644,
lon: 27.910599242437524,
},
geometry: { type: 'Point', coordinates: [112.50567036797644, 27.910599242437524] },
id: 430382,
},
'430400': {
type: 'Feature',
properties: {
code: '430400',
name: '衡阳市',
province: '43',
city: '04',
lat: 112.420741,
lon: 26.404885,
zoom: 6.9,
},
geometry: { type: 'Point', coordinates: [112.47610888762907, 26.7375778746171] },
id: 430400,
},
'430405': {
type: 'Feature',
properties: {
code: '430405',
name: '珠晖区',
province: '43',
city: '04',
area: '05',
lat: 112.68696610206781,
lon: 26.87391584344994,
},
geometry: { type: 'Point', coordinates: [112.68696610206781, 26.87391584344994] },
id: 430405,
},
'430406': {
type: 'Feature',
properties: {
code: '430406',
name: '雁峰区',
province: '43',
city: '04',
area: '06',
lat: 112.5752243405455,
lon: 26.827935559661043,
},
geometry: { type: 'Point', coordinates: [112.5752243405455, 26.827935559661043] },
id: 430406,
},
'430407': {
type: 'Feature',
properties: {
code: '430407',
name: '石鼓区',
province: '43',
city: '04',
area: '07',
lat: 112.57497402340871,
lon: 26.9836871143345,
},
geometry: { type: 'Point', coordinates: [112.57497402340871, 26.9836871143345] },
id: 430407,
},
'430408': {
type: 'Feature',
properties: {
code: '430408',
name: '蒸湘区',
province: '43',
city: '04',
area: '08',
lat: 112.52837378535621,
lon: 26.87900098454944,
},
geometry: { type: 'Point', coordinates: [112.52837378535621, 26.87900098454944] },
id: 430408,
},
'430412': {
type: 'Feature',
properties: {
code: '430412',
name: '南岳区',
province: '43',
city: '04',
area: '12',
lat: 112.69158084046752,
lon: 27.256543172779402,
},
geometry: { type: 'Point', coordinates: [112.69158084046752, 27.256543172779402] },
id: 430412,
},
'430421': {
type: 'Feature',
properties: {
code: '430421',
name: '衡阳县',
province: '43',
city: '04',
area: '21',
lat: 112.35186976414064,
lon: 27.05687870339835,
},
geometry: { type: 'Point', coordinates: [112.35186976414064, 27.05687870339835] },
id: 430421,
},
'430422': {
type: 'Feature',
properties: {
code: '430422',
name: '衡南县',
province: '43',
city: '04',
area: '22',
lat: 112.61105260143303,
lon: 26.77491260483389,
},
geometry: { type: 'Point', coordinates: [112.61105260143303, 26.77491260483389] },
id: 430422,
},
'430423': {
type: 'Feature',
properties: {
code: '430423',
name: '衡山县',
province: '43',
city: '04',
area: '23',
lat: 112.67825470803591,
lon: 27.266136674254117,
},
geometry: { type: 'Point', coordinates: [112.67825470803591, 27.266136674254117] },
id: 430423,
},
'430424': {
type: 'Feature',
properties: {
code: '430424',
name: '衡东县',
province: '43',
city: '04',
area: '24',
lat: 113.06032278203054,
lon: 27.010648299875783,
},
geometry: { type: 'Point', coordinates: [113.06032278203054, 27.010648299875783] },
id: 430424,
},
'430426': {
type: 'Feature',
properties: {
code: '430426',
name: '祁东县',
province: '43',
city: '04',
area: '26',
lat: 111.97169918717914,
lon: 26.78031135277974,
},
geometry: { type: 'Point', coordinates: [111.97169918717914, 26.78031135277974] },
id: 430426,
},
'430481': {
type: 'Feature',
properties: {
code: '430481',
name: '耒阳市',
province: '43',
city: '04',
area: '81',
lat: 112.93351733304152,
lon: 26.426348798470926,
},
geometry: { type: 'Point', coordinates: [112.93351733304152, 26.426348798470926] },
id: 430481,
},
'430482': {
type: 'Feature',
properties: {
code: '430482',
name: '常宁市',
province: '43',
city: '04',
area: '82',
lat: 112.38259954265503,
lon: 26.306887486948213,
},
geometry: { type: 'Point', coordinates: [112.38259954265503, 26.306887486948213] },
id: 430482,
},
'430500': {
type: 'Feature',
properties: {
code: '430500',
name: '邵阳市',
province: '43',
city: '05',
lat: 110.93368,
lon: 26.292349,
},
geometry: { type: 'Point', coordinates: [111.0657451002648, 26.993649529252057] },
id: 430500,
},
'430502': {
type: 'Feature',
properties: {
code: '430502',
name: '双清区',
province: '43',
city: '05',
area: '02',
lat: 111.55530340500314,
lon: 27.263082354823595,
},
geometry: { type: 'Point', coordinates: [111.55530340500314, 27.263082354823595] },
id: 430502,
},
'430503': {
type: 'Feature',
properties: {
code: '430503',
name: '大祥区',
province: '43',
city: '05',
area: '03',
lat: 111.49326956803311,
lon: 27.142929775243413,
},
geometry: { type: 'Point', coordinates: [111.49326956803311, 27.142929775243413] },
id: 430503,
},
'430511': {
type: 'Feature',
properties: {
code: '430511',
name: '北塔区',
province: '43',
city: '05',
area: '11',
lat: 111.40437052038251,
lon: 27.25561599748525,
},
geometry: { type: 'Point', coordinates: [111.40437052038251, 27.25561599748525] },
id: 430511,
},
'430522': {
type: 'Feature',
properties: {
code: '430522',
name: '新邵县',
province: '43',
city: '05',
area: '22',
lat: 111.49148850060558,
lon: 27.414895145108115,
},
geometry: { type: 'Point', coordinates: [111.49148850060558, 27.414895145108115] },
id: 430522,
},
'430523': {
type: 'Feature',
properties: {
code: '430523',
name: '邵阳县',
province: '43',
city: '05',
area: '23',
lat: 111.33058189944263,
lon: 27.00724427161972,
},
geometry: { type: 'Point', coordinates: [111.33058189944263, 27.00724427161972] },
id: 430523,
},
'430524': {
type: 'Feature',
properties: {
code: '430524',
name: '隆回县',
province: '43',
city: '05',
area: '24',
lat: 110.94057733444437,
lon: 27.32853240223401,
},
geometry: { type: 'Point', coordinates: [110.94057733444437, 27.32853240223401] },
id: 430524,
},
'430525': {
type: 'Feature',
properties: {
code: '430525',
name: '洞口县',
province: '43',
city: '05',
area: '25',
lat: 110.64148920827904,
lon: 27.072170176893916,
},
geometry: { type: 'Point', coordinates: [110.64148920827904, 27.072170176893916] },
id: 430525,
},
'430527': {
type: 'Feature',
properties: {
code: '430527',
name: '绥宁县',
province: '43',
city: '05',
area: '27',
lat: 110.18151929130823,
lon: 26.726961809835785,
},
geometry: { type: 'Point', coordinates: [110.18151929130823, 26.726961809835785] },
id: 430527,
},
'430528': {
type: 'Feature',
properties: {
code: '430528',
name: '新宁县',
province: '43',
city: '05',
area: '28',
lat: 110.94829152313683,
lon: 26.572558228033692,
},
geometry: { type: 'Point', coordinates: [110.94829152313683, 26.572558228033692] },
id: 430528,
},
'430529': {
type: 'Feature',
properties: {
code: '430529',
name: '城步苗族自治县',
province: '43',
city: '05',
area: '29',
lat: 110.35420494792562,
lon: 26.40467468131861,
},
geometry: { type: 'Point', coordinates: [110.35420494792562, 26.40467468131861] },
id: 430529,
},
'430581': {
type: 'Feature',
properties: {
code: '430581',
name: '武冈市',
province: '43',
city: '05',
area: '81',
lat: 110.76263623048962,
lon: 26.82798674191223,
},
geometry: { type: 'Point', coordinates: [110.76263623048962, 26.82798674191223] },
id: 430581,
},
'430582': {
type: 'Feature',
properties: {
code: '430582',
name: '邵东市',
province: '43',
city: '05',
area: '82',
lat: 111.81084801729804,
lon: 27.200427377116863,
},
geometry: { type: 'Point', coordinates: [111.81084801729804, 27.200427377116863] },
id: 430582,
},
'430600': {
type: 'Feature',
properties: {
code: '430600',
name: '岳阳市',
province: '43',
city: '06',
lat: 113.233427,
lon: 28.701148,
zoom: 6.8,
},
geometry: { type: 'Point', coordinates: [113.33482979091914, 28.930510638979946] },
id: 430600,
},
'430602': {
type: 'Feature',
properties: {
code: '430602',
name: '岳阳楼区',
province: '43',
city: '06',
area: '02',
lat: 113.2273788800502,
lon: 29.321471399927535,
},
geometry: { type: 'Point', coordinates: [113.2273788800502, 29.321471399927535] },
id: 430602,
},
'430603': {
type: 'Feature',
properties: {
code: '430603',
name: '云溪区',
province: '43',
city: '06',
area: '03',
lat: 113.34170292255776,
lon: 29.50552302886432,
},
geometry: { type: 'Point', coordinates: [113.34170292255776, 29.50552302886432] },
id: 430603,
},
'430611': {
type: 'Feature',
properties: {
code: '430611',
name: '君山区',
province: '43',
city: '06',
area: '11',
lat: 112.8509773815636,
lon: 29.472513376783258,
},
geometry: { type: 'Point', coordinates: [112.8509773815636, 29.472513376783258] },
id: 430611,
},
'430621': {
type: 'Feature',
properties: {
code: '430621',
name: '岳阳县',
province: '43',
city: '06',
area: '21',
lat: 113.29367495155445,
lon: 29.151911801431325,
},
geometry: { type: 'Point', coordinates: [113.29367495155445, 29.151911801431325] },
id: 430621,
},
'430623': {
type: 'Feature',
properties: {
code: '430623',
name: '华容县',
province: '43',
city: '06',
area: '23',
lat: 112.67454884643132,
lon: 29.516436023696293,
},
geometry: { type: 'Point', coordinates: [112.67454884643132, 29.516436023696293] },
id: 430623,
},
'430624': {
type: 'Feature',
properties: {
code: '430624',
name: '湘阴县',
province: '43',
city: '06',
area: '24',
lat: 112.86927918923033,
lon: 28.664172870059232,
},
geometry: { type: 'Point', coordinates: [112.86927918923033, 28.664172870059232] },
id: 430624,
},
'430626': {
type: 'Feature',
properties: {
code: '430626',
name: '平江县',
province: '43',
city: '06',
area: '26',
lat: 113.63907369373845,
lon: 28.782792570952022,
},
geometry: { type: 'Point', coordinates: [113.63907369373845, 28.782792570952022] },
id: 430626,
},
'430681': {
type: 'Feature',
properties: {
code: '430681',
name: '汨罗市',
province: '43',
city: '06',
area: '81',
lat: 113.1437868146439,
lon: 28.777241116633878,
},
geometry: { type: 'Point', coordinates: [113.1437868146439, 28.777241116633878] },
id: 430681,
},
'430682': {
type: 'Feature',
properties: {
code: '430682',
name: '临湘市',
province: '43',
city: '06',
area: '82',
lat: 113.44829550308913,
lon: 29.44118515533238,
},
geometry: { type: 'Point', coordinates: [113.44829550308913, 29.44118515533238] },
id: 430682,
},
'430700': {
type: 'Feature',
properties: {
code: '430700',
name: '常德市',
province: '43',
city: '07',
lat: 111.430724,
lon: 28.733161,
},
geometry: { type: 'Point', coordinates: [111.40741912540925, 29.236025739338878] },
id: 430700,
},
'430702': {
type: 'Feature',
properties: {
code: '430702',
name: '武陵区',
province: '43',
city: '07',
area: '02',
lat: 111.71260475773451,
lon: 29.064937752547728,
},
geometry: { type: 'Point', coordinates: [111.71260475773451, 29.064937752547728] },
id: 430702,
},
'430703': {
type: 'Feature',
properties: {
code: '430703',
name: '鼎城区',
province: '43',
city: '07',
area: '03',
lat: 111.6958329812305,
lon: 28.99611247762044,
},
geometry: { type: 'Point', coordinates: [111.6958329812305, 28.99611247762044] },
id: 430703,
},
'430721': {
type: 'Feature',
properties: {
code: '430721',
name: '安乡县',
province: '43',
city: '07',
area: '21',
lat: 112.13450230282321,
lon: 29.46732283208645,
},
geometry: { type: 'Point', coordinates: [112.13450230282321, 29.46732283208645] },
id: 430721,
},
'430722': {
type: 'Feature',
properties: {
code: '430722',
name: '汉寿县',
province: '43',
city: '07',
area: '22',
lat: 111.9790776242697,
lon: 28.775909032519653,
},
geometry: { type: 'Point', coordinates: [111.9790776242697, 28.775909032519653] },
id: 430722,
},
'430723': {
type: 'Feature',
properties: {
code: '430723',
name: '澧县',
province: '43',
city: '07',
area: '23',
lat: 111.6554838097881,
lon: 29.741385737517206,
},
geometry: { type: 'Point', coordinates: [111.6554838097881, 29.741385737517206] },
id: 430723,
},
'430724': {
type: 'Feature',
properties: {
code: '430724',
name: '临澧县',
province: '43',
city: '07',
area: '24',
lat: 111.62601912674303,
lon: 29.475168006320974,
},
geometry: { type: 'Point', coordinates: [111.62601912674303, 29.475168006320974] },
id: 430724,
},
'430725': {
type: 'Feature',
properties: {
code: '430725',
name: '桃源县',
province: '43',
city: '07',
area: '25',
lat: 111.27185567498358,
lon: 28.908872776554933,
},
geometry: { type: 'Point', coordinates: [111.27185567498358, 28.908872776554933] },
id: 430725,
},
'430726': {
type: 'Feature',
properties: {
code: '430726',
name: '石门县',
province: '43',
city: '07',
area: '26',
lat: 111.16677132796482,
lon: 29.705480660977415,
},
geometry: { type: 'Point', coordinates: [111.16677132796482, 29.705480660977415] },
id: 430726,
},
'430781': {
type: 'Feature',
properties: {
code: '430781',
name: '津市市',
province: '43',
city: '07',
area: '81',
lat: 111.85517969780484,
lon: 29.460203935328597,
},
geometry: { type: 'Point', coordinates: [111.85517969780484, 29.460203935328597] },
id: 430781,
},
'430800': {
type: 'Feature',
properties: {
code: '430800',
name: '张家界市',
province: '43',
city: '08',
lat: 110.519328,
lon: 29.005154,
zoom: 6.9,
},
geometry: { type: 'Point', coordinates: [110.42905377199926, 29.405159070851166] },
id: 430800,
},
'430802': {
type: 'Feature',
properties: {
code: '430802',
name: '永定区',
province: '43',
city: '08',
area: '02',
lat: 110.5133655479532,
lon: 29.100252934170626,
},
geometry: { type: 'Point', coordinates: [110.5133655479532, 29.100252934170626] },
id: 430802,
},
'430811': {
type: 'Feature',
properties: {
code: '430811',
name: '武陵源区',
province: '43',
city: '08',
area: '11',
lat: 110.48367879156638,
lon: 29.331114195473724,
},
geometry: { type: 'Point', coordinates: [110.48367879156638, 29.331114195473724] },
id: 430811,
},
'430821': {
type: 'Feature',
properties: {
code: '430821',
name: '慈利县',
province: '43',
city: '08',
area: '21',
lat: 110.97888525412722,
lon: 29.31267701923531,
},
geometry: { type: 'Point', coordinates: [110.97888525412722, 29.31267701923531] },
id: 430821,
},
'430822': {
type: 'Feature',
properties: {
code: '430822',
name: '桑植县',
province: '43',
city: '08',
area: '22',
lat: 110.10455348730405,
lon: 29.6081855797352,
},
geometry: { type: 'Point', coordinates: [110.10455348730405, 29.6081855797352] },
id: 430822,
},
'430900': {
type: 'Feature',
properties: {
code: '430900',
name: '益阳市',
province: '43',
city: '09',
lat: 111.80421,
lon: 28.08103,
},
geometry: { type: 'Point', coordinates: [111.75759950292462, 28.389017179871054] },
id: 430900,
},
'430902': {
type: 'Feature',
properties: {
code: '430902',
name: '资阳区',
province: '43',
city: '09',
area: '02',
lat: 112.26774837804294,
lon: 28.672304695727536,
},
geometry: { type: 'Point', coordinates: [112.26774837804294, 28.672304695727536] },
id: 430902,
},
'430903': {
type: 'Feature',
properties: {
code: '430903',
name: '赫山区',
province: '43',
city: '09',
area: '03',
lat: 112.42827979393694,
lon: 28.413667599414474,
},
geometry: { type: 'Point', coordinates: [112.42827979393694, 28.413667599414474] },
id: 430903,
},
'430921': {
type: 'Feature',
properties: {
code: '430921',
name: '南县',
province: '43',
city: '09',
area: '21',
lat: 112.44130331631172,
lon: 29.251784265538014,
},
geometry: { type: 'Point', coordinates: [112.44130331631172, 29.251784265538014] },
id: 430921,
},
'430922': {
type: 'Feature',
properties: {
code: '430922',
name: '桃江县',
province: '43',
city: '09',
area: '22',
lat: 111.9788721714533,
lon: 28.467955009053846,
},
geometry: { type: 'Point', coordinates: [111.9788721714533, 28.467955009053846] },
id: 430922,
},
'430923': {
type: 'Feature',
properties: {
code: '430923',
name: '安化县',
province: '43',
city: '09',
area: '23',
lat: 111.40082428138818,
lon: 28.233232888403453,
},
geometry: { type: 'Point', coordinates: [111.40082428138818, 28.233232888403453] },
id: 430923,
},
'430981': {
type: 'Feature',
properties: {
code: '430981',
name: '沅江市',
province: '43',
city: '09',
area: '81',
lat: 112.50089581209599,
lon: 28.916582582117094,
},
geometry: { type: 'Point', coordinates: [112.50089581209599, 28.916582582117094] },
id: 430981,
},
'431000': {
type: 'Feature',
properties: {
code: '431000',
name: '郴州市',
province: '43',
city: '10',
lat: 113.174094,
lon: 25.267215,
},
geometry: { type: 'Point', coordinates: [113.03426122060888, 25.960711797927825] },
id: 431000,
},
'431002': {
type: 'Feature',
properties: {
code: '431002',
name: '北湖区',
province: '43',
city: '10',
area: '02',
lat: 112.8603739081492,
lon: 25.676803625471432,
},
geometry: { type: 'Point', coordinates: [112.8603739081492, 25.676803625471432] },
id: 431002,
},
'431003': {
type: 'Feature',
properties: {
code: '431003',
name: '苏仙区',
province: '43',
city: '10',
area: '03',
lat: 113.04903992690875,
lon: 25.854975847004248,
},
geometry: { type: 'Point', coordinates: [113.04903992690875, 25.854975847004248] },
id: 431003,
},
'431021': {
type: 'Feature',
properties: {
code: '431021',
name: '桂阳县',
province: '43',
city: '10',
area: '21',
lat: 112.6145289820538,
lon: 25.858304100235213,
},
geometry: { type: 'Point', coordinates: [112.6145289820538, 25.858304100235213] },
id: 431021,
},
'431022': {
type: 'Feature',
properties: {
code: '431022',
name: '宜章县',
province: '43',
city: '10',
area: '22',
lat: 112.98307352927853,
lon: 25.35377147492103,
},
geometry: { type: 'Point', coordinates: [112.98307352927853, 25.35377147492103] },
id: 431022,
},
'431023': {
type: 'Feature',
properties: {
code: '431023',
name: '永兴县',
province: '43',
city: '10',
area: '23',
lat: 113.10712408844373,
lon: 26.178289490152817,
},
geometry: { type: 'Point', coordinates: [113.10712408844373, 26.178289490152817] },
id: 431023,
},
'431024': {
type: 'Feature',
properties: {
code: '431024',
name: '嘉禾县',
province: '43',
city: '10',
area: '24',
lat: 112.40578037476992,
lon: 25.630956809378976,
},
geometry: { type: 'Point', coordinates: [112.40578037476992, 25.630956809378976] },
id: 431024,
},
'431025': {
type: 'Feature',
properties: {
code: '431025',
name: '临武县',
province: '43',
city: '10',
area: '25',
lat: 112.5580873801755,
lon: 25.382447796561063,
},
geometry: { type: 'Point', coordinates: [112.5580873801755, 25.382447796561063] },
id: 431025,
},
'431026': {
type: 'Feature',
properties: {
code: '431026',
name: '汝城县',
province: '43',
city: '10',
area: '26',
lat: 113.63807314437123,
lon: 25.609015492382653,
},
geometry: { type: 'Point', coordinates: [113.63807314437123, 25.609015492382653] },
id: 431026,
},
'431027': {
type: 'Feature',
properties: {
code: '431027',
name: '桂东县',
province: '43',
city: '10',
area: '27',
lat: 113.89127171187062,
lon: 25.974885169989438,
},
geometry: { type: 'Point', coordinates: [113.89127171187062, 25.974885169989438] },
id: 431027,
},
'431028': {
type: 'Feature',
properties: {
code: '431028',
name: '安仁县',
province: '43',
city: '10',
area: '28',
lat: 113.36302129296655,
lon: 26.57906345240132,
},
geometry: { type: 'Point', coordinates: [113.36302129296655, 26.57906345240132] },
id: 431028,
},
'431081': {
type: 'Feature',
properties: {
code: '431081',
name: '资兴市',
province: '43',
city: '10',
area: '81',
lat: 113.40058490444207,
lon: 25.975670305481366,
},
geometry: { type: 'Point', coordinates: [113.40058490444207, 25.975670305481366] },
id: 431081,
},
'431100': {
type: 'Feature',
properties: {
code: '431100',
name: '永州市',
province: '43',
city: '11',
lat: 111.7183,
lon: 25.173925,
},
geometry: { type: 'Point', coordinates: [111.7416062371912, 25.951811794383925] },
id: 431100,
},
'431102': {
type: 'Feature',
properties: {
code: '431102',
name: '零陵区',
province: '43',
city: '11',
area: '02',
lat: 111.55553448031758,
lon: 26.14780552161849,
},
geometry: { type: 'Point', coordinates: [111.55553448031758, 26.14780552161849] },
id: 431102,
},
'431103': {
type: 'Feature',
properties: {
code: '431103',
name: '冷水滩区',
province: '43',
city: '11',
area: '03',
lat: 111.60293938240702,
lon: 26.548297585691408,
},
geometry: { type: 'Point', coordinates: [111.60293938240702, 26.548297585691408] },
id: 431103,
},
'431121': {
type: 'Feature',
properties: {
code: '431121',
name: '祁阳县',
province: '43',
city: '11',
area: '21',
lat: 111.94631312198649,
lon: 26.495727084112442,
},
geometry: { type: 'Point', coordinates: [111.94631312198649, 26.495727084112442] },
id: 431121,
},
'431122': {
type: 'Feature',
properties: {
code: '431122',
name: '东安县',
province: '43',
city: '11',
area: '22',
lat: 111.36564723490737,
lon: 26.495431710870363,
},
geometry: { type: 'Point', coordinates: [111.36564723490737, 26.495431710870363] },
id: 431122,
},
'431123': {
type: 'Feature',
properties: {
code: '431123',
name: '双牌县',
province: '43',
city: '11',
area: '23',
lat: 111.68023339268507,
lon: 25.926714417073473,
},
geometry: { type: 'Point', coordinates: [111.68023339268507, 25.926714417073473] },
id: 431123,
},
'431124': {
type: 'Feature',
properties: {
code: '431124',
name: '道县',
province: '43',
city: '11',
area: '24',
lat: 111.62976720388347,
lon: 25.48272502173264,
},
geometry: { type: 'Point', coordinates: [111.62976720388347, 25.48272502173264] },
id: 431124,
},
'431125': {
type: 'Feature',
properties: {
code: '431125',
name: '江永县',
province: '43',
city: '11',
area: '25',
lat: 111.2683147354019,
lon: 25.20222755314931,
},
geometry: { type: 'Point', coordinates: [111.2683147354019, 25.20222755314931] },
id: 431125,
},
'431126': {
type: 'Feature',
properties: {
code: '431126',
name: '宁远县',
province: '43',
city: '11',
area: '26',
lat: 112.01649011439686,
lon: 25.676554968597507,
},
geometry: { type: 'Point', coordinates: [112.01649011439686, 25.676554968597507] },
id: 431126,
},
'431127': {
type: 'Feature',
properties: {
code: '431127',
name: '蓝山县',
province: '43',
city: '11',
area: '27',
lat: 112.18281610315154,
lon: 25.321074398054705,
},
geometry: { type: 'Point', coordinates: [112.18281610315154, 25.321074398054705] },
id: 431127,
},
'431128': {
type: 'Feature',
properties: {
code: '431128',
name: '新田县',
province: '43',
city: '11',
area: '28',
lat: 112.22263983583727,
lon: 25.84740084494276,
},
geometry: { type: 'Point', coordinates: [112.22263983583727, 25.84740084494276] },
id: 431128,
},
'431129': {
type: 'Feature',
properties: {
code: '431129',
name: '江华瑶族自治县',
province: '43',
city: '11',
area: '29',
lat: 111.73228282511425,
lon: 25.02747266665342,
},
geometry: { type: 'Point', coordinates: [111.73228282511425, 25.02747266665342] },
id: 431129,
},
'431200': {
type: 'Feature',
properties: {
code: '431200',
name: '怀化市',
province: '43',
city: '12',
lat: 109.964839,
lon: 27.038146,
},
geometry: { type: 'Point', coordinates: [109.93376549193455, 27.41806844326335] },
id: 431200,
},
'431202': {
type: 'Feature',
properties: {
code: '431202',
name: '鹤城区',
province: '43',
city: '12',
area: '02',
lat: 109.94361045769725,
lon: 27.626946360447516,
},
geometry: { type: 'Point', coordinates: [109.94361045769725, 27.626946360447516] },
id: 431202,
},
'431221': {
type: 'Feature',
properties: {
code: '431221',
name: '中方县',
province: '43',
city: '12',
area: '21',
lat: 110.14201631780014,
lon: 27.48984603854742,
},
geometry: { type: 'Point', coordinates: [110.14201631780014, 27.48984603854742] },
id: 431221,
},
'431222': {
type: 'Feature',
properties: {
code: '431222',
name: '沅陵县',
province: '43',
city: '12',
area: '22',
lat: 110.54133596555236,
lon: 28.562858239106827,
},
geometry: { type: 'Point', coordinates: [110.54133596555236, 28.562858239106827] },
id: 431222,
},
'431223': {
type: 'Feature',
properties: {
code: '431223',
name: '辰溪县',
province: '43',
city: '12',
area: '23',
lat: 110.23399906856866,
lon: 27.86245497946487,
},
geometry: { type: 'Point', coordinates: [110.23399906856866, 27.86245497946487] },
id: 431223,
},
'431224': {
type: 'Feature',
properties: {
code: '431224',
name: '溆浦县',
province: '43',
city: '12',
area: '24',
lat: 110.64377455063104,
lon: 27.775056932014728,
},
geometry: { type: 'Point', coordinates: [110.64377455063104, 27.775056932014728] },
id: 431224,
},
'431225': {
type: 'Feature',
properties: {
code: '431225',
name: '会同县',
province: '43',
city: '12',
area: '25',
lat: 109.720566701154,
lon: 26.91265274694139,
},
geometry: { type: 'Point', coordinates: [109.720566701154, 26.91265274694139] },
id: 431225,
},
'431226': {
type: 'Feature',
properties: {
code: '431226',
name: '麻阳苗族自治县',
province: '43',
city: '12',
area: '26',
lat: 109.74096819221954,
lon: 27.80477572603321,
},
geometry: { type: 'Point', coordinates: [109.74096819221954, 27.80477572603321] },
id: 431226,
},
'431227': {
type: 'Feature',
properties: {
code: '431227',
name: '新晃侗族自治县',
province: '43',
city: '12',
area: '27',
lat: 109.15330997959687,
lon: 27.216016737978528,
},
geometry: { coordinates: [109.15330997959687, 27.216016737978528], type: 'Point' },
id: 431227,
},
'431228': {
type: 'Feature',
properties: {
code: '431228',
name: '芷江侗族自治县',
province: '43',
city: '12',
area: '28',
lat: 109.60670870031228,
lon: 27.361569083500004,
},
geometry: { type: 'Point', coordinates: [109.60670870031228, 27.361569083500004] },
id: 431228,
},
'431229': {
type: 'Feature',
properties: {
code: '431229',
name: '靖州苗族侗族自治县',
province: '43',
city: '12',
area: '29',
lat: 109.56544327505064,
lon: 26.554838657161742,
},
geometry: { type: 'Point', coordinates: [109.56544327505064, 26.554838657161742] },
id: 431229,
},
'431230': {
type: 'Feature',
properties: {
code: '431230',
name: '通道侗族自治县',
province: '43',
city: '12',
area: '30',
lat: 109.71154332595692,
lon: 26.198655734905234,
},
geometry: { type: 'Point', coordinates: [109.71154332595692, 26.198655734905234] },
id: 431230,
},
'431281': {
type: 'Feature',
properties: {
code: '431281',
name: '洪江市',
province: '43',
city: '12',
area: '81',
lat: 110.01878196661865,
lon: 27.256748654565424,
},
geometry: { type: 'Point', coordinates: [110.01878196661865, 27.256748654565424] },
id: 431281,
},
'431300': {
type: 'Feature',
properties: {
code: '431300',
name: '娄底市',
province: '43',
city: '13',
lat: 111.611947,
lon: 27.282518,
zoom: 6.9,
},
geometry: { type: 'Point', coordinates: [111.677667188117, 27.71099136302805] },
id: 431300,
},
'431302': {
type: 'Feature',
properties: {
code: '431302',
name: '娄星区',
province: '43',
city: '13',
area: '02',
lat: 111.98755537122673,
lon: 27.750035741737094,
},
geometry: { type: 'Point', coordinates: [111.98755537122673, 27.750035741737094] },
id: 431302,
},
'431321': {
type: 'Feature',
properties: {
code: '431321',
name: '双峰县',
province: '43',
city: '13',
area: '21',
lat: 112.13962661839318,
lon: 27.461794849263505,
},
geometry: { type: 'Point', coordinates: [112.13962661839318, 27.461794849263505] },
id: 431321,
},
'431322': {
type: 'Feature',
properties: {
code: '431322',
name: '新化县',
province: '43',
city: '13',
area: '22',
lat: 111.3152264307285,
lon: 27.880228572009678,
},
geometry: { type: 'Point', coordinates: [111.3152264307285, 27.880228572009678] },
id: 431322,
},
'431381': {
type: 'Feature',
properties: {
code: '431381',
name: '冷水江市',
province: '43',
city: '13',
area: '81',
lat: 111.46825896274329,
lon: 27.674135497452824,
},
geometry: { type: 'Point', coordinates: [111.46825896274329, 27.674135497452824] },
id: 431381,
},
'431382': {
type: 'Feature',
properties: {
code: '431382',
name: '涟源市',
province: '43',
city: '13',
area: '82',
lat: 111.78308744709621,
lon: 27.74119687592407,
},
geometry: { type: 'Point', coordinates: [111.78308744709621, 27.74119687592407] },
id: 431382,
},
'433100': {
type: 'Feature',
properties: {
code: '433100',
name: '湘西土家族苗族自治州',
province: '43',
city: '31',
lat: 109.70778,
lon: 28.247456,
zoom: 6.8,
},
geometry: { type: 'Point', coordinates: [109.73313149247407, 28.430490460403302] },
id: 433100,
},
'433101': {
type: 'Feature',
properties: {
code: '433101',
name: '吉首市',
province: '43',
city: '31',
area: '01',
lat: 109.76055819701659,
lon: 28.300831512998258,
},
geometry: { type: 'Point', coordinates: [109.76055819701659, 28.300831512998258] },
id: 433101,
},
'433122': {
type: 'Feature',
properties: {
code: '433122',
name: '泸溪县',
province: '43',
city: '31',
area: '22',
lat: 109.94535577515231,
lon: 28.164097254481,
},
geometry: { type: 'Point', coordinates: [109.94535577515231, 28.164097254481] },
id: 433122,
},
'433123': {
type: 'Feature',
properties: {
code: '433123',
name: '凤凰县',
province: '43',
city: '31',
area: '23',
lat: 109.53346313796658,
lon: 28.0311076077105,
},
geometry: { type: 'Point', coordinates: [109.53346313796658, 28.0311076077105] },
id: 433123,
},
'433124': {
type: 'Feature',
properties: {
code: '433124',
name: '花垣县',
province: '43',
city: '31',
area: '24',
lat: 109.46394455809526,
lon: 28.404231328040005,
},
geometry: { type: 'Point', coordinates: [109.46394455809526, 28.404231328040005] },
id: 433124,
},
'433125': {
type: 'Feature',
properties: {
code: '433125',
name: '保靖县',
province: '43',
city: '31',
area: '25',
lat: 109.59422040807006,
lon: 28.59272649621564,
},
geometry: { type: 'Point', coordinates: [109.59422040807006, 28.59272649621564] },
id: 433125,
},
'433126': {
type: 'Feature',
properties: {
code: '433126',
name: '古丈县',
province: '43',
city: '31',
area: '26',
lat: 109.97191426812222,
lon: 28.564002304513735,
},
geometry: { type: 'Point', coordinates: [109.97191426812222, 28.564002304513735] },
id: 433126,
},
'433127': {
type: 'Feature',
properties: {
code: '433127',
name: '永顺县',
province: '43',
city: '31',
area: '27',
lat: 109.9984961148913,
lon: 29.079962858908143,
},
geometry: { type: 'Point', coordinates: [109.9984961148913, 29.079962858908143] },
id: 433127,
},
'433130': {
type: 'Feature',
properties: {
code: '433130',
name: '龙山县',
province: '43',
city: '31',
area: '30',
lat: 109.47646903781634,
lon: 29.275202241677274,
},
geometry: { type: 'Point', coordinates: [109.47646903781634, 29.275202241677274] },
id: 433130,
},
}
src/components/Map/Widgets/Legend/src/Legend.vue
......@@ -30,7 +30,7 @@
// JSON 数据
option: {
type: Object as PropType<Option>,
default: () => ({}),
default: () => ({}) as Option,
},
})
......@@ -80,6 +80,20 @@
toggleShow,
toggleExpand,
})
function getBorderColor(color: string) {
switch (color) {
case 'white':
case '#fff':
case '#ffffff':
case '#FFFFFF':
case 'rgb(255, 255, 255)':
case 'rgba(255, 255, 255, 1)':
return '#d7d7d7'
default:
return color
}
}
</script>
<template>
......@@ -107,7 +121,11 @@
<view
v-if="item.color"
class="color"
:style="{ backgroundColor: item.color, ...data.option.blockStyle }"
:style="{
backgroundColor: item.color,
border: `1rpx solid ${getBorderColor(item.color)}`,
...data.option.blockStyle,
}"
/>
<!-- 标签 -->
......@@ -209,9 +227,9 @@
}
.color {
width: 38rpx;
width: 42rpx;
height: 24rpx;
margin-right: 8rpx;
margin-right: 10rpx !important;
}
.label {
......
src/components/Map/Widgets/Legend/src/types.ts
......@@ -13,7 +13,7 @@ export interface OptionItem {
export interface Option {
// 选项
items: OptionItem[] | OptionItem[][]
items?: OptionItem[] | OptionItem[][]
// label 样式
labelStyle?: Recordable
// 色块样式
......
src/components/Map/Widgets/TimeBar/src/hook.ts
......@@ -23,10 +23,12 @@ export function useTimeBarWidget<T extends TimeBarInstance, P extends TimeBarPro
{
...fns,
getTime: () => get()?.getTime(),
setTime: (time: Dayjs[]) => get()?.setTime(time),
setTime: (time: Dayjs[], mode: boolean) => get()?.setTime(time, mode),
getCheckedOption: () => get()?.getCheckedOption(),
setCheckedOption: (index: number) => get()?.setCheckedOption(index),
getTimeBarValue: () => get()?.getTimeBarValue(),
setHourRange: (hourRange: Array<string | number> | string) => get()?.setHourRange(hourRange),
setMinuteRange: (minuteRange: Array<string | number> | string) => get()?.setMinuteRange(minuteRange),
},
]
}
......
src/components/Map/Widgets/TimeBar/src/types.ts
......@@ -32,6 +32,8 @@ export interface TimeBarTime {
format?: string
value?: Dayjs[]
onChange?: (e: TimeBarChangeEvent) => void
hourRange?: Array<number | string> | string
minuteRange?: Array<number | string> | string
}
export interface TimeBarButton {
......@@ -87,7 +89,7 @@ export interface TimeBarInstance extends BasicWidgetInstance<TimeBarProps> {
* 设置时间
* @param time 时间
*/
setTime: (time: Dayjs[]) => void
setTime: (time: Dayjs[], mode?: boolean) => void
/**
* 获取选中的选项
* @returns 选中的选项
......@@ -103,4 +105,17 @@ export interface TimeBarInstance extends BasicWidgetInstance<TimeBarProps> {
* @returns 时间栏的值
*/
getTimeBarValue: () => TimeBarChangeEvent
/**
* 设置小时可选范围
* @param hourRange
* @returns
*/
setHourRange: (hourRange: Array<number | string> | string) => void
/**
* 设置分钟可选范围
* @param minuteRange
* @returns
*/
setMinuteRange: (minuteRange: Array<number | string> | string) => void
}
src/components/Map/Widgets/ToolBox/src/ToolBox.vue
......@@ -88,6 +88,7 @@
// 打开 Select 组件
model.selectPopup.title = button.name
model.selectPopup.options = button.options ?? []
model.selectPopup.checked = button.options?.filter((item) => item.checked).map((item) => item.value) ?? []
model.selectPopup.multiple = button.multiple ?? false
model.selectPopup.show = true
} else if (button.type === 'filter') {
......@@ -108,13 +109,26 @@
multiple: false,
title: '',
options: [],
onConfirm: (e: Recordable) => {
checked: [],
onConfirm: (item: Recordable, close?: boolean) => {
if (model.selectPopup.multiple) {
item.checked = !item.checked
} else {
model.selectPopup.options.forEach((option) => (option.checked = false))
item.checked = true
}
model.activeButton?.handle({
type: 'change',
name: model.activeButton.name,
value: toRaw(e.options),
value: toRaw(
model.selectPopup.options[model.selectPopup.multiple ? 'filter' : 'find'](
(item) => item.checked,
),
),
})
model.selectPopup.onClose()
close && model.selectPopup.onClose()
},
onClose: () => (model.selectPopup.show = false),
},
......@@ -191,22 +205,79 @@
<!-- 交互组件 -->
<!-- 1. Select Popup -->
<fui-select
<!-- <fui-select
maskClosable
:type="model.selectPopup.multiple ? 'select' : 'list'"
:show="model.selectPopup.show"
:title="`选择${model.selectPopup.title}`"
:options="model.selectPopup.options"
:multiple="model.selectPopup.multiple"
@click="model.selectPopup.onConfirm"
@confirm="model.selectPopup.onConfirm"
@close="model.selectPopup.onClose"
/>
/> -->
<fui-bottom-popup
:show="model.selectPopup.show"
:z-index="900"
@close="model.selectPopup.onClose"
:safeArea="false"
>
<view class="popup-wrap">
<view class="fui-title">{{ `选择${model.selectPopup.title}` }}</view>
<view class="fui-icon__close" @tap="model.selectPopup.onClose">
<fui-icon name="close" :size="48" />
</view>
<scroll-view scroll-y class="fui-scroll__view">
<view class="fui-custom__wrap">
<!-- 多选 -->
<template v-if="model.selectPopup.multiple">
<fui-checkbox-group>
<fui-label
v-for="(item, index) in model.selectPopup.options"
:key="index"
@tap="model.selectPopup.onConfirm(item, false)"
>
<fui-list-cell>
<view class="fui-align__center">
<fui-checkbox v-model:checked="item.checked" :value="item.value" />
<text class="fui-text pl-2">{{ item.text }}</text>
</view>
</fui-list-cell>
</fui-label>
</fui-checkbox-group>
</template>
<!-- 单选 -->
<template v-else>
<!-- -->
<fui-radio-group>
<fui-label
v-for="(item, index) in model.selectPopup.options"
:key="index"
@tap="model.selectPopup.onConfirm(item, true)"
>
<fui-list-cell>
<view class="fui-align__center">
<fui-radio :checked="item.checked" :value="item.value" />
<text class="fui-text pl-2">{{ item.text }}</text>
</view>
</fui-list-cell>
</fui-label>
</fui-radio-group>
</template>
</view>
</scroll-view>
</view>
<!-- 底部安全区 -->
<fui-safe-area />
</fui-bottom-popup>
<!-- 2. 过滤 Popup -->
<fui-bottom-popup
:show="model.filterPopup.show"
:z-index="900"
@close="model.filterPopup.onClose"
:safeArea="true"
:safeArea="false"
>
<view class="popup-wrap">
<view class="fui-title">{{ model.filterPopup.title }}</view>
......@@ -268,6 +339,9 @@
</view>
</scroll-view>
</view>
<!-- 底部安全区 -->
<fui-safe-area />
</fui-bottom-popup>
</view>
</template>
......@@ -358,7 +432,7 @@
}
.popup-wrap {
height: 500rpx;
height: 520rpx;
padding-top: 30rpx;
position: relative;
}
......
src/static/js/echarts/5.4.3/echarts.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/static/js/mapbox-gl-js/2.15.0/mapbox-gl.extra.css
......@@ -170,7 +170,32 @@
.mapboxgl-popup-content .popup-row {
display: flex;
align-items: flex-start;
}
.mapboxgl-popup-content .popup-row.timing {
justify-content: center;
padding-top: 6px;
}
.mapboxgl-popup-content .popup-row.timing button {
background: #1890ff;
border: none;
padding: 4px 8px;
color: #fff;
border-radius: 5px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.mapboxgl-popup-content .popup-row.timing button .icon {
width: 14px;
height: 14px;
margin-right: 5px;
display: inline-block;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik00IDloNHYxMUg0em0xMiA0aDR2N2gtNHptLTYtOWg0djE2aC00eiIvPjwvc3ZnPg==');
}
.mapboxgl-popup-content .popup-chart-icon {
......@@ -182,6 +207,7 @@
.mapboxgl-popup-content .popup-title {
font-weight: bold;
min-width: 3em;
}
.mapboxgl-popup-content .popup-title sub {
......
src/utils/dom.ts
export function appendStylesheet(id: string, href: string) {
return new Promise((resolve, reject) => {
const element = document.getElementById(id) as HTMLLinkElement
if (element && element.href === href) {
resolve(0)
return
}
const link = document.createElement('link')
link.id = id
link.rel = 'stylesheet'
......@@ -12,9 +18,16 @@ export function appendStylesheet(id: string, href: string) {
export function appendScript(id: string, src: string) {
return new Promise((resolve, reject) => {
const element = document.getElementById(id) as HTMLScriptElement
if (element && element.src === src) {
resolve(0)
return
}
const script = document.createElement('script')
script.id = id
script.src = src
script.onload = resolve
script.onerror = script.onabort = reject
document.head.appendChild(script)
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论