mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 00:02:51 +08:00
Merge branch 'dev' into master-fetch-dev
This commit is contained in:
commit
ea9590441b
@ -16,8 +16,7 @@ export enum ThemeEnum {
|
|||||||
MACARON = 'macaron',
|
MACARON = 'macaron',
|
||||||
BLUE = 'blue',
|
BLUE = 'blue',
|
||||||
DARKBLUE = 'darkblue',
|
DARKBLUE = 'darkblue',
|
||||||
WINE = 'wine',
|
WINE = 'wine'
|
||||||
WEIXIN = 'tileLayer'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum LangEnum {
|
export enum LangEnum {
|
||||||
@ -31,6 +30,11 @@ export enum ViewModeEnum {
|
|||||||
STEREOSCOPIC = '3D'
|
STEREOSCOPIC = '3D'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const ShowHideEnum = {
|
||||||
|
SHOW: true,
|
||||||
|
HIDE: false
|
||||||
|
}
|
||||||
|
|
||||||
export enum FeaturesEnum {
|
export enum FeaturesEnum {
|
||||||
BG = 'bg',
|
BG = 'bg',
|
||||||
POINT = 'point',
|
POINT = 'point',
|
||||||
@ -71,6 +75,25 @@ export const option = {
|
|||||||
},
|
},
|
||||||
mapMarkerType: MarkerEnum.CIRCLE_MARKER,
|
mapMarkerType: MarkerEnum.CIRCLE_MARKER,
|
||||||
viewMode: ViewModeEnum.PLANE,
|
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,
|
lang: LangEnum.ZH_CN,
|
||||||
features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
|
features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
|
||||||
}
|
}
|
||||||
|
@ -22,13 +22,21 @@
|
|||||||
<n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
|
<n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
|
||||||
</setting-item>
|
</setting-item>
|
||||||
</setting-item-box>
|
</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-checkbox-group v-model:value="optionData.mapOptions.features">
|
||||||
<n-space item-style="display: flex;">
|
<n-space item-style="display: flex;">
|
||||||
<n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
|
<n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
|
||||||
</n-space>
|
</n-space>
|
||||||
</n-checkbox-group>
|
</n-checkbox-group>
|
||||||
</setting-item-box>
|
</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-box name="位置">
|
||||||
<setting-item name="经度">
|
<setting-item name="经度">
|
||||||
<n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
|
<n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
|
||||||
@ -76,11 +84,94 @@
|
|||||||
</setting-item>
|
</setting-item>
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
</collapse-item>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType } from 'vue'
|
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'
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
@ -134,10 +225,6 @@ const themeOptions = [
|
|||||||
{
|
{
|
||||||
value: ThemeEnum.WINE,
|
value: ThemeEnum.WINE,
|
||||||
label: '酱籽'
|
label: '酱籽'
|
||||||
},
|
|
||||||
{
|
|
||||||
value: ThemeEnum.WEIXIN,
|
|
||||||
label: '卫星'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
@ -170,19 +257,19 @@ const viewModeOptions = [
|
|||||||
const featuresOptions = [
|
const featuresOptions = [
|
||||||
{
|
{
|
||||||
value: FeaturesEnum.BG,
|
value: FeaturesEnum.BG,
|
||||||
label: '显示地图背景'
|
label: '区域面'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: FeaturesEnum.POINT,
|
value: FeaturesEnum.POINT,
|
||||||
label: '显示标识'
|
label: '标注'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: FeaturesEnum.ROAD,
|
value: FeaturesEnum.ROAD,
|
||||||
label: '显示道路'
|
label: '道路'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: FeaturesEnum.BUILDING,
|
value: FeaturesEnum.BUILDING,
|
||||||
label: '显示建筑'
|
label: '建筑物'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -28,9 +28,13 @@ let {
|
|||||||
amapStyleKeyCustom,
|
amapStyleKeyCustom,
|
||||||
features,
|
features,
|
||||||
viewMode,
|
viewMode,
|
||||||
|
showLabel,
|
||||||
pitch,
|
pitch,
|
||||||
skyColor,
|
skyColor,
|
||||||
marker
|
marker,
|
||||||
|
satelliteTileLayer,
|
||||||
|
roadNetTileLayer,
|
||||||
|
trafficTileLayer
|
||||||
} = toRefs(props.chartConfig.option.mapOptions)
|
} = toRefs(props.chartConfig.option.mapOptions)
|
||||||
|
|
||||||
let mapIns: any = null
|
let mapIns: any = null
|
||||||
@ -42,7 +46,7 @@ const initMap = (newData: any) => {
|
|||||||
// 初始化
|
// 初始化
|
||||||
AMapLoader.load({
|
AMapLoader.load({
|
||||||
key: amapKey.value, //api服务key--另外需要在public中使用安全密钥!!!
|
key: amapKey.value, //api服务key--另外需要在public中使用安全密钥!!!
|
||||||
version: '1.4.8', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
version: '1.4.15', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
||||||
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
|
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
|
||||||
})
|
})
|
||||||
.then(AMap => {
|
.then(AMap => {
|
||||||
@ -56,17 +60,40 @@ const initMap = (newData: any) => {
|
|||||||
pitch: pitch.value, // 地图俯仰角度,有效范围 0 度- 83 度
|
pitch: pitch.value, // 地图俯仰角度,有效范围 0 度- 83 度
|
||||||
skyColor: skyColor.value,
|
skyColor: skyColor.value,
|
||||||
viewMode: viewMode.value, // 地图模式
|
viewMode: viewMode.value, // 地图模式
|
||||||
|
showLabel: showLabel.value, // 是否显示地图文字标记
|
||||||
willReadFrequently: true
|
willReadFrequently: true
|
||||||
})
|
})
|
||||||
dataHandle(props.chartConfig.option.dataset)
|
dataHandle(props.chartConfig.option.dataset)
|
||||||
let satellite = new AMap.TileLayer.Satellite()
|
|
||||||
let roadNet = new AMap.TileLayer.RoadNet()
|
let satelliteLayer = new AMap.TileLayer.Satellite({
|
||||||
if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
|
zIndex: satelliteTileLayer.value.zIndex,
|
||||||
mapIns.add([satellite, roadNet])
|
opacity: satelliteTileLayer.value.opacity,
|
||||||
} else {
|
zooms: satelliteTileLayer.value.zooms
|
||||||
mapIns.remove([satellite, roadNet])
|
})
|
||||||
mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
|
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 => {})
|
.catch(e => {})
|
||||||
}
|
}
|
||||||
|
@ -171,7 +171,19 @@ const backLevel = () => {
|
|||||||
|
|
||||||
// 切换地图
|
// 切换地图
|
||||||
const checkOrMap = async (newData: string) => {
|
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.geo.map = newData
|
||||||
props.chartConfig.option.series.forEach((item: any) => {
|
props.chartConfig.option.series.forEach((item: any) => {
|
||||||
if (item.type === 'map') item.map = newData
|
if (item.type === 'map') item.map = newData
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<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">
|
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
|
||||||
<template #header></template>
|
<template #header></template>
|
||||||
<template #header-extra> </template>
|
<template #header-extra> </template>
|
||||||
|
@ -15,13 +15,7 @@
|
|||||||
</transition-group>
|
</transition-group>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<layout-header>
|
<layout-header></layout-header>
|
||||||
<template #left></template>
|
|
||||||
<template #right>
|
|
||||||
<go-lang-select></go-lang-select>
|
|
||||||
<go-theme-select></go-theme-select>
|
|
||||||
</template>
|
|
||||||
</layout-header>
|
|
||||||
<div class="go-login">
|
<div class="go-login">
|
||||||
<div class="go-login-carousel">
|
<div class="go-login-carousel">
|
||||||
<n-carousel
|
<n-carousel
|
||||||
|
1
types/shims-vue.d.ts
vendored
1
types/shims-vue.d.ts
vendored
@ -6,3 +6,4 @@ declare module '*.vue' {
|
|||||||
|
|
||||||
declare module 'lodash/*'
|
declare module 'lodash/*'
|
||||||
declare module 'dom-helpers'
|
declare module 'dom-helpers'
|
||||||
|
declare module 'vue3-sketch-ruler';
|
Loading…
Reference in New Issue
Block a user