Merge branch 'dev' into master-fetch-dev

This commit is contained in:
奔跑的面条 2024-03-14 12:09:36 +08:00
commit ea9590441b
7 changed files with 175 additions and 31 deletions

View File

@ -16,8 +16,7 @@ export enum ThemeEnum {
MACARON = 'macaron',
BLUE = 'blue',
DARKBLUE = 'darkblue',
WINE = 'wine',
WEIXIN = 'tileLayer'
WINE = 'wine'
}
export enum LangEnum {
@ -31,6 +30,11 @@ export enum ViewModeEnum {
STEREOSCOPIC = '3D'
}
export const ShowHideEnum = {
SHOW: true,
HIDE: false
}
export enum FeaturesEnum {
BG = 'bg',
POINT = 'point',
@ -71,6 +75,25 @@ export const option = {
},
mapMarkerType: MarkerEnum.CIRCLE_MARKER,
viewMode: ViewModeEnum.PLANE,
showLabel: ShowHideEnum.SHOW,
satelliteTileLayer: {
show: ShowHideEnum.HIDE,
zIndex: 1,
opacity: 1,
zooms: [3, 18]
},
roadNetTileLayer: {
show: ShowHideEnum.HIDE,
zIndex: 2,
opacity: 1,
zooms: [3, 18]
},
trafficTileLayer: {
show: ShowHideEnum.HIDE,
zIndex: 3,
opacity: 1,
zooms: [3, 18]
},
lang: LangEnum.ZH_CN,
features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
}

View File

@ -22,13 +22,21 @@
<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-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-space>
<n-switch v-model:value="optionData.mapOptions.showLabel" size="small" />
<n-text>是否显示</n-text>
</n-space>
</setting-item>
</setting-item-box>
<setting-item-box name="位置">
<setting-item name="经度">
<n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
@ -76,11 +84,94 @@
</setting-item>
</setting-item-box>
</collapse-item>
<collapse-item name="图层" :expanded="true">
<setting-item-box name="卫星图层">
<setting-item>
<n-space>
<n-switch v-model:value="optionData.mapOptions.satelliteTileLayer.show" size="small" />
<n-text>是否显示</n-text>
</n-space>
</setting-item>
<setting-item name="叠加顺序值">
<n-input-number
v-model:value="optionData.mapOptions.satelliteTileLayer.zIndex"
:min="0"
size="small"
></n-input-number>
</setting-item>
<setting-item name="透明度">
<n-input-number
v-model:value="optionData.mapOptions.satelliteTileLayer.opacity"
:min="0"
:max="1"
step="0.1"
size="small"
></n-input-number>
</setting-item>
<setting-item name="缩放级别范围">
<n-slider v-model:value="optionData.mapOptions.satelliteTileLayer.zooms" range :step="1" :max="18" :min="3" />
</setting-item>
</setting-item-box>
<setting-item-box name="路网图层">
<setting-item>
<n-space>
<n-switch v-model:value="optionData.mapOptions.roadNetTileLayer.show" size="small" />
<n-text>是否显示</n-text>
</n-space>
</setting-item>
<setting-item name="叠加顺序值">
<n-input-number
v-model:value="optionData.mapOptions.roadNetTileLayer.zIndex"
:min="0"
size="small"
></n-input-number>
</setting-item>
<setting-item name="透明度">
<n-input-number
v-model:value="optionData.mapOptions.roadNetTileLayer.opacity"
:min="0"
:max="1"
step="0.1"
size="small"
></n-input-number>
</setting-item>
<setting-item name="缩放级别范围">
<n-slider v-model:value="optionData.mapOptions.roadNetTileLayer.zooms" range :step="1" :max="18" :min="3" />
</setting-item>
</setting-item-box>
<setting-item-box name="实时交通">
<setting-item>
<n-space>
<n-switch v-model:value="optionData.mapOptions.trafficTileLayer.show" size="small" />
<n-text>是否显示</n-text>
</n-space>
</setting-item>
<setting-item name="叠加顺序值">
<n-input-number
v-model:value="optionData.mapOptions.trafficTileLayer.zIndex"
:min="0"
size="small"
></n-input-number>
</setting-item>
<setting-item name="透明度">
<n-input-number
v-model:value="optionData.mapOptions.trafficTileLayer.opacity"
:min="0"
:max="1"
step="0.1"
size="small"
></n-input-number>
</setting-item>
<setting-item name="缩放级别范围">
<n-slider v-model:value="optionData.mapOptions.trafficTileLayer.zooms" range :step="1" :max="18" :min="3" />
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
defineProps({
@ -134,10 +225,6 @@ const themeOptions = [
{
value: ThemeEnum.WINE,
label: '酱籽'
},
{
value: ThemeEnum.WEIXIN,
label: '卫星'
}
]
@ -170,19 +257,19 @@ const viewModeOptions = [
const featuresOptions = [
{
value: FeaturesEnum.BG,
label: '显示地图背景'
label: '区域面'
},
{
value: FeaturesEnum.POINT,
label: '显示标识'
label: '标注'
},
{
value: FeaturesEnum.ROAD,
label: '显示道路'
label: '道路'
},
{
value: FeaturesEnum.BUILDING,
label: '显示建筑'
label: '建筑'
}
]

View File

@ -28,9 +28,13 @@ let {
amapStyleKeyCustom,
features,
viewMode,
showLabel,
pitch,
skyColor,
marker
marker,
satelliteTileLayer,
roadNetTileLayer,
trafficTileLayer
} = toRefs(props.chartConfig.option.mapOptions)
let mapIns: any = null
@ -42,7 +46,7 @@ const initMap = (newData: any) => {
//
AMapLoader.load({
key: amapKey.value, //apikey--public使
version: '1.4.8', // JSAPI 1.4.15
version: '1.4.15', // JSAPI 1.4.15
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 使
})
.then(AMap => {
@ -56,17 +60,40 @@ const initMap = (newData: any) => {
pitch: pitch.value, // 0 - 83
skyColor: skyColor.value,
viewMode: viewMode.value, //
showLabel: showLabel.value, //
willReadFrequently: true
})
dataHandle(props.chartConfig.option.dataset)
let satellite = new AMap.TileLayer.Satellite()
let roadNet = new AMap.TileLayer.RoadNet()
if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
mapIns.add([satellite, roadNet])
} else {
mapIns.remove([satellite, roadNet])
mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
let satelliteLayer = new AMap.TileLayer.Satellite({
zIndex: satelliteTileLayer.value.zIndex,
opacity: satelliteTileLayer.value.opacity,
zooms: satelliteTileLayer.value.zooms
})
let roadNetLayer = new AMap.TileLayer.RoadNet({
zIndex: roadNetTileLayer.value.zIndex,
opacity: roadNetTileLayer.value.opacity,
zooms: roadNetTileLayer.value.zooms
})
let trafficLayer = new AMap.TileLayer.Traffic({
zIndex: trafficTileLayer.value.zIndex,
opacity: trafficTileLayer.value.opacity,
zooms: trafficTileLayer.value.zooms
})
mapIns.remove([satelliteLayer, roadNetLayer, trafficLayer])
if (satelliteTileLayer.value.show) {
mapIns.add([satelliteLayer])
}
if (roadNetTileLayer.value.show) {
mapIns.add([roadNetLayer])
}
if (trafficTileLayer.value.show) {
mapIns.add([trafficLayer])
}
mapIns.setMapStyle(
`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
)
})
.catch(e => {})
}

View File

@ -171,7 +171,19 @@ const backLevel = () => {
//
const checkOrMap = async (newData: string) => {
await getGeojson(newData)
if (newData === 'china') {
if (props.chartConfig.option.mapRegion.showHainanIsLands) {
//
hainanLandsHandle(true)
vEchartsSetOption()
} else {
//
hainanLandsHandle(false)
vEchartsSetOption()
}
} else {
await getGeojson(newData)
}
props.chartConfig.option.geo.map = newData
props.chartConfig.option.series.forEach((item: any) => {
if (item.type === 'map') item.map = newData

View File

@ -1,5 +1,5 @@
<template>
<n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false">
<n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false" :close-on-esc="false">
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
<template #header></template>
<template #header-extra> </template>

View File

@ -15,13 +15,7 @@
</transition-group>
</aside>
</div>
<layout-header>
<template #left></template>
<template #right>
<go-lang-select></go-lang-select>
<go-theme-select></go-theme-select>
</template>
</layout-header>
<layout-header></layout-header>
<div class="go-login">
<div class="go-login-carousel">
<n-carousel

View File

@ -5,4 +5,5 @@ declare module '*.vue' {
}
declare module 'lodash/*'
declare module 'dom-helpers'
declare module 'dom-helpers'
declare module 'vue3-sketch-ruler';