Skip to content
GitLab
Commit 016f5b1c authored by 奔跑的面条's avatar 奔跑的面条
Browse files

perf: 优化高德地图

parent f6af0818
master-fetch-dev dev master-fetch v2.1.1 v1.1.4
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 359 additions and 188 deletions
+359 -188
src/api/mock/map.json
+ 65
- 45
View file @ 016f5b1c
{
"point": [
"markers": [
{
"name": "北京",
"value": [116.405285, 39.904989, 200]
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "郑州",
"value": [113.665412, 34.757975, 888]
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "青海",
"value": [101.778916, 36.623178, 666]
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "宁夏回族自治区",
"value": [106.278179, 38.46637, 66]
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "哈尔滨市",
"value": [126.642464, 45.756967, 101]
}
],
"map": [
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "北京市",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "河北省",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "江苏省",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "福建省",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "山东省",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "河南省",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "湖北省",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "广西壮族自治区",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "海南省",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "青海省",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
},
{
"name": "新疆维吾尔自治区",
"value": "@integer(0, 1000)"
"name": "某某地市",
"value": "@integer(2, 20)",
"position": ["@integer(100, 130)", "@integer(30, 50)"]
}
],
"pieces": [
{ "gte": 1000, "label": ">1000" },
{ "gte": 600, "lte": 999, "label": "600-999" },
{ "gte": 200, "lte": 599, "label": "200-599" },
{ "gte": 50, "lte": 199, "label": "49-199" },
{ "gte": 10, "lte": 49, "label": "10-49" },
{ "lte": 9, "label": "<9" }
]
}
src/packages/components/Charts/Bars/CapsuleChart/config.vue
+ 1
- 1
View file @ 016f5b1c
......@@ -31,7 +31,7 @@
</SettingItemBox>
<SettingItemBox name="颜色">
<setting-item v-for="(item, index) in optionData.colors" :key="index" :name="`颜色${index}`">
<n-color-picker v-model:value="optionData.colors[index]" size="small"></n-color-picker>
<n-color-picker v-model:value="optionData.colors[index]" size="small" :modes="['hex']"></n-color-picker>
</setting-item>
</SettingItemBox>
</collapse-item>
......
src/packages/components/Charts/Maps/MapAmap/config.ts
+ 67
- 11
View file @ 016f5b1c
......@@ -5,20 +5,76 @@ import { chartInitConfig } from '@/settings/designSetting'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
export enum ThemeEnum {
NORMAL = 'normal',
DARK = 'dark',
LIGHT = 'light',
WHITES_MOKE = 'whitesmoke',
FRESH = 'fresh',
GREY = 'grey',
GRAFFITI = 'graffiti',
MACARON = 'macaron',
BLUE = 'blue',
DARKBLUE = 'darkblue',
WINE = 'wine'
}
export enum LangEnum {
ZH_CN = 'zh_cn',
EN = 'en',
ZH_EN = 'zh_en'
}
export enum ViewModeEnum {
PLANE = '2D',
STEREOSCOPIC = '3D'
}
export enum FeaturesEnum {
BG = 'bg',
POINT = 'point',
ROAD = 'road',
BUILDING = 'building'
}
export enum MarkerEnum {
// 圆圈
CIRCLE_MARKER = 'CircleMarker',
// 定位标点
MARKER = 'Marker',
// 暂无
NONE = 'none'
}
export const option = {
dataset: dataJson,
amapKey: 'aa76ad84f92f661980f710cbe966b7f6',
amapStyleKey: 'normal',
amapStyleKeyCustom: '',
amapLon: 116.397428,
amapLat: 39.90923,
amapZindex: 10,
viewMode: '2D',
pitch: 60,
skyColor: '#53A9DE',
lang: 'zh_cn',
features: ['bg', 'point', 'road', 'building']
mapOptions: {
pitch: 60,
skyColor: '#53A9DE',
amapKey: 'd5f3e16589dbecae64d05fe90e2ba4f2',
amapStyleKey: ThemeEnum.DARK,
amapStyleKeyCustom: '',
amapLon: 116.397428,
amapLat: 39.90923,
amapZindex: 11,
marker: {
fillColor: '#E98984FF',
fillOpacity: 0.5,
strokeColor: 'white',
strokeWeight: 2,
strokeOpacity: 0.5,
zIndex: 10,
bubble: true,
cursor: 'pointer',
clickable: true
},
mapMarkerType: MarkerEnum.CIRCLE_MARKER,
viewMode: ViewModeEnum.PLANE,
lang: LangEnum.ZH_CN,
features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
}
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = MapAmapConfig.key
public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
......
src/packages/components/Charts/Maps/MapAmap/config.vue
+ 121
- 93
View file @ 016f5b1c
<template>
<collapse-item name="基础配置">
<setting-item-box name="Key" :alone="true">
<setting-item>
<n-input v-model:value="optionData.amapKey" size="small"></n-input>
</setting-item>
</setting-item-box>
<collapse-item name="基础" :expanded="true">
<setting-item-box name="语言类型" :alone="true">
<setting-item>
<n-select size="small" v-model:value="optionData.lang" :options="langOptions" />
<n-select size="small" v-model:value="optionData.mapOptions.lang" :options="langOptions" />
</setting-item>
</setting-item-box>
<setting-item-box name="主题样式" :alone="true">
<setting-item>
<n-select size="small" v-model:value="optionData.amapStyleKey" :options="themeOptions" />
<setting-item-box name="Key" :alone="true">
<setting-item name="请务必使用自己的高德应用 key">
<n-input v-model:value="optionData.mapOptions.amapKey" size="small"></n-input>
</setting-item>
</setting-item-box>
<setting-item-box name="自定义地图样式ID" :alone="true">
<setting-item>
<n-input size="small" v-model:value="optionData.amapStyleKeyCustom" />
<n-input size="small" v-model:value="optionData.mapOptions.amapStyleKeyCustom" />
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="地图配置">
<n-checkbox-group v-model:value="optionData.features">
<n-space item-style="display: flex;">
<n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
</n-space>
</n-checkbox-group>
</collapse-item>
<collapse-item name="相机配置">
<setting-item-box name="经度" :alone="true">
<collapse-item name="地图" :expanded="true">
<setting-item-box name="主题">
<setting-item>
<n-input-number v-model:value="optionData.amapLon" size="small"></n-input-number>
<n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
</setting-item>
</setting-item-box>
<setting-item-box name="纬度" :alone="true">
<setting-item>
<n-input-number v-model:value="optionData.amapLat" size="small"></n-input-number>
</setting-item>
<setting-item-box name="内容" :alone="true">
<n-checkbox-group v-model:value="optionData.mapOptions.features">
<n-space item-style="display: flex;">
<n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
</n-space>
</n-checkbox-group>
</setting-item-box>
<setting-item-box name="初始缩放" :alone="true">
<setting-item>
<n-input-number v-model:value="optionData.amapZindex" size="small"></n-input-number>
<setting-item-box name="位置">
<setting-item name="经度">
<n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
<template #suffix>°</template>
</n-input-number>
</setting-item>
<setting-item name="纬度">
<n-input-number v-model:value="optionData.mapOptions.amapLat" :show-button="false" size="small">
<template #suffix>°</template>
</n-input-number>
</setting-item>
<setting-item name="初始缩放">
<n-input-number v-model:value="optionData.mapOptions.amapZindex" :min="0" size="small"></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="展示模式" :alone="true">
<setting-item-box name="模式" :alone="true">
<setting-item>
<n-radio-group v-model:value="optionData.viewMode" name="radiogroup">
<n-radio-group v-model:value="optionData.mapOptions.viewMode" name="radiogroup">
<n-space>
<n-radio v-for="song in viewModeOptions" :key="song.value" :value="song.value">
{{ song.label }}
......@@ -55,117 +55,145 @@
</n-radio-group>
</setting-item>
</setting-item-box>
<template v-if="optionData.viewMode === '3D'">
<setting-item-box name="天空色" :alone="true">
<setting-item>
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.skyColor"></n-color-picker>
<template v-if="optionData.mapOptions.viewMode === '3D'">
<setting-item-box>
<setting-item name="天空色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.mapOptions.skyColor"></n-color-picker>
</setting-item>
</setting-item-box>
<setting-item-box name="俯仰角" :alone="true">
<setting-item>
<n-input-number v-model:value="optionData.pitch" :min="0" :max="83" size="small"></n-input-number>
<setting-item name="俯仰角">
<n-input-number v-model:value="optionData.mapOptions.pitch" :min="0" :max="83" size="small"></n-input-number>
</setting-item>
</setting-item-box>
</template>
</collapse-item>
<collapse-item name="标记" :expanded="true">
<setting-item-box name="样式">
<setting-item name="类型">
<n-select size="small" v-model:value="optionData.mapOptions.mapMarkerType" :options="MarkerOptions" />
</setting-item>
<setting-item name="颜色">
<n-color-picker v-model:value="optionData.mapOptions.marker.fillColor" size="small"></n-color-picker>
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType, ref } from 'vue'
import { option } from './config'
import { PropType } from 'vue'
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const props = defineProps({
defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
const langOptions = ref([
const themeOptions = [
{
value: 'zh_cn',
label: '中文简体'
value: ThemeEnum.NORMAL,
label: '标准'
},
{
value: 'en',
label: '英文'
value: ThemeEnum.DARK,
label: '幻影黑'
},
{
value: 'zh_en',
label: '中英文对照'
}
])
const viewModeOptions = ref([
{
value: '2D',
label: '2D'
value: ThemeEnum.LIGHT,
label: '月光银'
},
{
value: '3D',
label: '3D'
}
])
const featuresOptions = ref([
value: ThemeEnum.WHITES_MOKE,
label: '远山黛'
},
{
value: 'bg',
label: '显示地图背景'
value: ThemeEnum.FRESH,
label: '草色青'
},
{
value: 'point',
label: '显示标识'
value: ThemeEnum.GREY,
label: '雅士灰'
},
{
value: 'road',
label: '显示道路'
value: ThemeEnum.GRAFFITI,
label: '涂鸦'
},
{
value: 'building',
label: '显示建筑'
}
])
const themeOptions = ref([
value: ThemeEnum.MACARON,
label: '马卡龙'
},
{
value: 'normal',
label: '标准'
value: ThemeEnum.BLUE,
label: '靛青蓝'
},
{
value: 'dark',
label: '幻影黑'
value: ThemeEnum.DARKBLUE,
label: '极夜蓝'
},
{
value: 'light',
label: '月光银'
value: ThemeEnum.WINE,
label: '酱籽'
}
]
const langOptions = [
{
value: LangEnum.ZH_CN,
label: '中文简体'
},
{
value: 'whitesmoke',
label: '远山黛'
value: LangEnum.EN,
label: '英文'
},
{
value: 'fresh',
label: '草色青'
value: LangEnum.ZH_EN,
label: '中英文对照'
}
]
const viewModeOptions = [
{
value: ViewModeEnum.PLANE,
label: '2D'
},
{
value: 'grey',
label: '雅士灰'
value: ViewModeEnum.STEREOSCOPIC,
label: '3D'
}
]
const featuresOptions = [
{
value: FeaturesEnum.BG,
label: '显示地图背景'
},
{
value: 'graffiti',
label: '涂鸦'
value: FeaturesEnum.POINT,
label: '显示标识'
},
{
value: 'macaron',
label: '马卡龙'
value: FeaturesEnum.ROAD,
label: '显示道路'
},
{
value: 'blue',
label: '靛青蓝'
value: FeaturesEnum.BUILDING,
label: '显示建筑'
}
]
const MarkerOptions = [
{
value: MarkerEnum.CIRCLE_MARKER,
label: '圆形标点'
},
{
value: 'darkblue',
label: '极夜蓝'
value: MarkerEnum.MARKER,
label: '定位标点'
},
{
value: 'wine',
label: '酱籽'
value: MarkerEnum.NONE,
label: '隐藏标点'
}
])
]
</script>
src/packages/components/Charts/Maps/MapAmap/data.json
+ 13
- 8
View file @ 016f5b1c
{
"points": [
"markers": [
{
"icon": "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png",
"position": [116.300467, 39.907761],
"title": "我是一个文本"
"name": "某某地市",
"value": 10,
"title": "1",
"position": [116.300467, 39.907761]
},
{
"icon": "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png",
"position": [116.368904, 39.913423]
"name": "某某地市",
"value": 15,
"title": "3",
"position": [116.400567, 39.908761]
},
{
"icon": "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png",
"position": [116.305467, 39.807761]
"name": "某某地市",
"value": 20,
"title": "2",
"position": [116.200467, 39.937761]
}
]
}
src/packages/components/Charts/Maps/MapAmap/index.vue
+ 81
- 28
View file @ 016f5b1c
<template>
<div class="box">
<div id="container" style="width: 100%; height: 100%; position: relative"></div>
</div>
<div ref="vChartRef"></div>
</template>
<script setup lang="ts">
import { ref, PropType, toRefs, watch } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { CreateComponentType } from '@/packages/index.d'
import { reactive, ref, shallowRef, PropType, toRefs, watch } from 'vue'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { MarkerEnum } from './config'
import { isArray } from '@/utils'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
......@@ -20,25 +23,31 @@ let {
amapLon,
amapLat,
amapZindex,
mapMarkerType,
lang,
amapStyleKeyCustom,
features,
viewMode,
pitch,
skyColor
} = toRefs(props.chartConfig.option)
skyColor,
marker
} = toRefs(props.chartConfig.option.mapOptions)
let map = shallowRef(null)
let markers = ref([])
let mapIns: any = null
let markers: any = []
let AMapIns: any = null
const vChartRef = ref<HTMLElement>()
const ininMap = () => {
const initMap = (newData: any) => {
// 初始化
AMapLoader.load({
key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
version: '1.4.8', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
})
.then(AMap => {
map = new AMap.Map('container', {
AMapIns = AMap
mapIns = new AMap.Map(vChartRef.value, {
resizeEnable: true,
zoom: amapZindex.value, // 地图显示的缩放级别
center: [amapLon.value, amapLat.value],
......@@ -47,31 +56,75 @@ const ininMap = () => {
features: features.value,
pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
skyColor: skyColor.value,
viewMode: viewMode.value // 地图模式
})
markers?.value.forEach((marker: any) => {
// 创建点实例
if (!/\d/.test(marker.icon || marker.position)) {
return
}
var marker = new AMap.Marker({
icon: marker?.icon,
position: [marker.position[0], marker.position[1]],
title: marker?.title,
offset: new AMap.Pixel(-13, -30)
})
marker.setMap(map)
viewMode: viewMode.value, // 地图模式
willReadFrequently: true
})
dataHandle(props.chartConfig.option.dataset)
})
.catch(e => {})
}
const dataHandle = (newData: any) => {
if (!mapIns && !AMapIns) {
initMap(props.chartConfig.option)
return
}
if (isArray(newData.markers)) {
// 先清除旧标记
mapIns.remove(markers)
markers = []
// 记录新标记
if (mapMarkerType.value === MarkerEnum.MARKER) {
newData.markers.forEach((markerItem: any) => {
const markerInstance = new AMapIns.Marker({
position: [markerItem.position[0], markerItem.position[1]],
offset: new AMapIns.Pixel(-13, -30)
})
markers.push(markerInstance)
markerInstance.setMap(mapIns)
})
} else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) {
newData.markers.forEach((markerItem: any) => {
const markerInstance = new AMapIns.CircleMarker({
center: [markerItem.position[0], markerItem.position[1]],
radius: markerItem.value,
...marker.value
})
markers.push(markerInstance)
markerInstance.setMap(mapIns)
})
}
}
}
const stopWatch = watch(
() => props.chartConfig.option.mapOptions,
option => {
initMap(option)
},
{
immediate: true,
deep: true
}
)
watch(
() => props.chartConfig.option,
() => props.chartConfig.option.dataset,
newData => {
markers.value = newData.dataset.points
ininMap()
try {
dataHandle(newData)
} catch (error) {
console.log(error)
}
},
{ immediate: true, deep: true }
{
deep: false
}
)
// 预览
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
stopWatch()
dataHandle(newData)
})
</script>
src/styles/pages/index.scss
+ 9
- 1
View file @ 016f5b1c
// 页面全局样式
\ No newline at end of file
// 页面全局样式
// 去除高德地图 logo
.amap-logo {
display: none !important;
opacity: 0 !important;
}
.amap-copyright {
opacity: 0 !important;
}
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue
+ 1
- 0
View file @ 016f5b1c
......@@ -73,6 +73,7 @@
<n-text>SQL 类型不支持 Get 请求，请使用其它方式</n-text>
</template>
<template v-else>
<n-tag type="warning">需要后台提供专门处理 sql 的接口</n-tag>
<setting-item-box name="键名">
<n-tag type="primary" :bordered="false" style="width: 40px; font-size: 16px"> sql </n-tag>
</setting-item-box>
......
src/views/chart/ContentEdit/components/EditTools/index.vue
+ 1
- 1
View file @ 016f5b1c
......@@ -274,7 +274,7 @@ $asideBottom: 70px;
flex-direction: column-reverse;
height: auto;
right: 20px;
padding: 20px 8px;
padding: 30px 8px;
bottom: $asideBottom;
overflow: hidden;
transition: height ease 0.4s;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

免费DevSecOps平台，让您的项目体验完整的DevSecOps流程，让项目更安全