Skip to content

P
pptist
Commit 8097de2f authored by 罗超's avatar 罗超
Browse files
Options

新增地图主题样式

parent 5c7aba38
Hide whitespace changes
Inline Side-by-side
Showing with 617 additions and 58 deletions
.env.development
View file @ 8097de2f
VUE_APP_API_URL = 'http://192.168.10.214/api/common/post'
VUE_APP_API_URL = 'https://reborn.oytour.com/api/common/post'
VUE_APP_UPLOADURLAPI_URL = 'http://192.168.10.214:8120'
VUE_APP_SHARE_URL = 'http://127.0.0.1:8080'
\ No newline at end of file
components.d.ts
View file @ 8097de2f
......@@ -20,6 +20,7 @@ declare module 'vue' {
Divider: typeof import('./src/components/Divider.vue')['default']
Drawer: typeof import('./src/components/Drawer.vue')['default']
EditableInput: typeof import('./src/components/ColorPicker/EditableInput.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert']
ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElButton: typeof import('element-plus/es')['ElButton']
......@@ -89,6 +90,7 @@ declare module 'vue' {
Tabs: typeof import('./src/components/Tabs.vue')['default']
TextArea: typeof import('./src/components/TextArea.vue')['default']
TextAttributes: typeof import('./src/components/Maps/MapAttributes/TextAttributes.vue')['default']
ThemeSetting: typeof import('./src/components/Maps/ThemeSetting/ThemeSetting.vue')['default']
Tools: typeof import('./src/components/Maps/Tools.vue')['default']
WritingBoard: typeof import('./src/components/WritingBoard.vue')['default']
}
......
src/components/Maps/MapScriptForm.vue
View file @ 8097de2f
<template>
<div class="script-form bg-white rounded">
<div class="script-form bg-white rounded light-shadow">
<div class="q-pa-md">
<div class="text-h6">行程表单</div>
<div class="text-small q-mt-lg">你需要的国家：</div>
......
src/components/Maps/ThemeSetting/ThemeSetting.vue 0 → 100644
View file @ 8097de2f
<template>
<div class="theme-box bg-white rounded light-shadow">
<div class="q-pa-md row items-center">
<div class="text-h6 col">选择预设样式</div>
<el-button link type="primary" @click="()=>closeHandler()">
<el-icon style="margin-right: 5px;font-size: 16px;"><Close /></el-icon>
</el-button>
</div>
<el-scrollbar class="q-pa-md full-width" max-height="50vh">
<div class="theme-items rounded q-mb-md" v-for="x in themes">
<img :src="x.url" />
<div class="overlayer column flex-center items-center">
<div class="pingfangr text-center" style="font-size: 28px;color: #f5f5f5;">{{ x.label }}</div>
<el-button type="primary q-mt-md" @click="()=>setThemeHandler(x.style?x.style:null)">使用这个主题</el-button>
</div>
</div>
</el-scrollbar>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import UseThemeConfig from './UseThemeConfig'
import { Close } from '@element-plus/icons-vue'
const emit = defineEmits<{
(event: 'close'): void,
(event: 'change',playload:any): void
}>()
const {themes,setTheme } = UseThemeConfig();
const setThemeHandler = (t:any)=>{
setTheme(t)
emit('change',t)
}
const closeHandler = ()=>{
emit('close')
}
</script>
<style>
.theme-box {
position: absolute;
z-index: 9;
top: 5px;
right: 5px;
width: 480px;
max-height: 80vh;
overflow-y: auto;
}
.theme-box .theme-items{
overflow: hidden;
position: relative;
}
.theme-box .theme-items .overlayer{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
display: none;
}
.theme-box .theme-items:hover .overlayer{
display: flex;
}
.theme-box .theme-items img{
width: 100%;
height: auto;
}
</style>
\ No newline at end of file
src/components/Maps/ThemeSetting/UseThemeConfig.ts 0 → 100644
View file @ 8097de2f
import { useMapStore } from '@/store'
import { MapTheme } from "@/types/mapTheme"
import { ref } from "vue"
export default() => {
const map = useMapStore()
const whiteLight:MapTheme={
fillColor:['#FFFFFF'],
mapBackground:'#CDE8FF',
line:{
color:'#949494',
width:2,
type:2
},
text:{
color:'#131313',
size:24,
fontFamily:'pingfangr'
},
tag:{
size:0.75,
color:'#050505',
border:6,
borderColor:'#FFFFFF'
},
border:1,
borderColor:'#F1F1F1'
}
const whiteRed:MapTheme={
fillColor:['#FFFFFF'],
mapBackground:'#E5E5E5',
line:{
color:'#707070',
width:2,
type:2
},
text:{
color:'#000000',
size:22,
fontFamily:'DengXian-Bold'
},
tag:{
size:0.5,
color:'#991B04',
border:5,
borderColor:'#FFFFFF'
},
border:1,
borderColor:'#F1F1F1'
}
const coffer:MapTheme={
fillColor:['#543E2C'],
mapBackground:'#423323',
line:{
color:'#707070',
width:2,
type:2
},
text:{
color:'#FFFBEF',
size:24,
fontFamily:'SourceHanSansCN-Regular'
},
tag:{
size:0.5,
color:'#3C2919',
border:5,
borderColor:'#543E2C'
},
border:1,
borderColor:'#5F4734'
}
const black:MapTheme={
fillColor:['#212121'],
mapBackground:'#FFFFFF',
line:{
color:'#B09B80',
width:2,
type:2
},
text:{
color:'#FFFFFF',
size:20,
fontFamily:'SourceHanSansCN-Light'
},
tag:{
size:0.6,
color:'#B09B80',
border:4,
borderColor:'#212121'
},
border:1,
borderColor:'#353535'
}
const blue:MapTheme={
fillColor:['#1953C1'],
mapBackground:'#DAE2ED',
line:{
color:'#000000',
width:1,
type:2
},
text:{
color:'#04101C',
size:20,
fontFamily:'SourceHanSansCN-Medium'
},
tag:{
size:0.4,
color:'#04101C',
border:2,
borderColor:'#1953C1'
},
border:4,
borderColor:'#DAE2ED'
}
const zangQingStyle:MapTheme={
fillColor:['#182832'],
mapBackground:'#283B47',
line:{
color:'#F5F8F5',
width:2,
type:2
},
text:{
color:'#F5F8F5',
size:20,
fontFamily:'SourceHanSansCN-Regular'
},
tag:{
size:0.5,
color:'#F5F8F5',
border:10,
borderColor:'#182832'
},
border:1,
borderColor:'#233642'
}
const redMoreStyle:MapTheme={
fillColor:['#E5899B','#ECC195','#CDDCA2','#F99268'],
mapBackground:'#FFFFFF',
line:{
color:'#000000',
width:1,
type:2
},
text:{
color:'#000000',
size:18,
fontFamily:'SourceHanSansCN-Regular'
},
tag:{
size:0.4,
color:'#04101C',
border:0,
borderColor:'#FFFFFF'
},
border:6,
borderColor:'#FFFFFF'
}
const huoli:MapTheme={
fillColor:['#6FAACE','#B0D8DE','#66C097','#9ECD74'],
mapBackground:'#FFFFFF',
line:{
color:'#000000',
width:1,
type:2
},
text:{
color:'#04101C',
size:18,
fontFamily:'SourceHanSansCN-Regular'
},
tag:{
size:0.4,
color:'#04101C',
border:2,
borderColor:'#1953C1'
},
border:4,
borderColor:'#FFFFFF'
}
const yellow:MapTheme={
fillColor:['#0000001a'],
mapBackground:'#EDF261',
line:{
color:'#000000',
width:2,
type:2
},
text:{
color:'#000000',
size:26,
fontFamily:'microsoft yahei ui light'
},
tag:{
size:1,
color:'#000000',
border:10,
borderColor:'#D5D957'
},
border:1,
borderColor:'#C9CD52'
}
const red:MapTheme={
fillColor:['#00000033'],
mapBackground:'#8D2505',
line:{
color:'#FFFFFF',
width:2,
type:2
},
text:{
color:'#FFFFFF',
size:26,
fontFamily:'microsoft yahei ui light'
},
tag:{
size:1,
color:'#FFFFFF',
border:10,
borderColor:'#00000033'
},
border:1,
borderColor:'#0000001a'
}
const green:MapTheme={
fillColor:['#FFFFFF33'],
mapBackground:'#146F2E',
line:{
color:'#FFFFFF',
width:2,
type:2
},
text:{
color:'#FFFFFF',
size:26,
fontFamily:'microsoft yahei ui light'
},
tag:{
size:1,
color:'#FFFFFF',
border:10,
borderColor:'#438C58'
},
border:1,
borderColor:'#619D72'
}
const themes = ref<{label:string,url:string,style?:MapTheme}[]>([
{
label:"浅白色",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710396691000_106.png",
style:whiteLight
},
{
label:"浅白红",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710396691000_340.png",
style:whiteRed
},
{
label:"深咖",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710396691000_705.png",
style:coffer
},
{
label:"藏青",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710396691000_334.png",
style:zangQingStyle
},
{
label:"黑金",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710396691000_30.png",
style:black
},
{
label:"克莱姆因蓝",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710396691000_810.png",
style:blue
},
{
label:"活力混搭",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710396691000_769.png",
style:huoli
},
{
label:"热力混搭",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710396691000_893.png",
style:redMoreStyle
},
{
label:"生机绿",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710496081000_990.png",
style:green
},
{
label:"魅力红",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710496081000_274.png",
style:red
},
{
label:"柠檬黄",
url:"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1710496081000_326.png",
style:yellow
}
])
const setTheme = (theme:MapTheme|null)=>{
map.setCurrentTheme(theme)
}
return {
themes,
setTheme
}
}
\ No newline at end of file
src/components/Maps/index.vue
View file @ 8097de2f
......@@ -4,9 +4,9 @@
<div class="row items-center">
<div class="text-title col">地图创作</div>
<el-button link type="primary" size="mini" v-if="ConfigId" @click="loadTripMap"><el-icon style="margin-right: 5px;font-size: 16px;"><Loading /></el-icon>行程渲染</el-button>
<el-button link size="mini" @click="openThemeHandler"><IconTheme style="font-size: 16px;margin-right: 5px;" />预设主题</el-button>
<el-button link size="mini" @click="createScriptHandler"><el-icon style="margin-right: 5px;font-size: 16px;"><MapLocation /></el-icon>行程表单</el-button>
<el-button link size="mini" @click="exportMapImage"><el-icon style="margin-right: 5px;font-size: 16px;"><Download /></el-icon>生成</el-button>
<el-button link size="mini" @click="readyExportHandler"><el-icon style="margin-right: 5px;font-size: 16px;"><Download /></el-icon>生成</el-button>
<el-button link size="mini" @click="closed"><el-icon style="margin-right: 5px;font-size: 16px;"><Close /></el-icon>退出</el-button>
</div>
</template>
......@@ -16,9 +16,22 @@
<map-line v-if="operaIndex==2 && createLineStatus && canOpera" :parent="mapRef" :position="mouse" @success="createLineStatus=false"></map-line>
<map-attributes></map-attributes>
<MapScriptForm v-if="formVisable" @close="()=>formVisable=false" @finish="(result:any)=>createScriptMap(result)"></MapScriptForm>
<ThemeSetting v-if="themeVisable" @close="()=>themeVisable=false" @change="(playload:any)=>setTheme(playload)"></ThemeSetting>
</div>
</el-dialog>
<el-dialog v-model="showExport" title="导出提醒">
<main>
<el-alert title="注意：当前地图仍然没有保存功能，导出后无法继续编辑" type="warning" :closable="false"/>
<el-checkbox label="当前地图包含背景颜色，你是否希望导出背景" v-model="isNeedBackground" class="q-mt-lg" v-if="isHaveBg" />
</main>
<template #footer>
<span class="dialog-footer">
<el-button @click="showExport = false">取消</el-button>
<el-button type="primary" @click="exportMapImage"> 确认导出 </el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts">
......@@ -26,6 +39,7 @@ import tools from './Tools.vue'
import MapAttributes from './MapAttributes/index.vue';
import MapScriptForm from './MapScriptForm.vue'
import mapLine from './Line.vue'
import ThemeSetting from './ThemeSetting/ThemeSetting.vue'
import { onMounted, provide, ref, watch } from 'vue';
import useMap from './useMap'
import { useMapStore,useScreenStore } from '@/store/index'
......@@ -54,13 +68,17 @@ const mouse = ref<{x:number,y:number}>({
y:0
})
const formVisable = ref(false)
const themeVisable = ref(false)
const mapStore = useMapStore()
const createLineStatus = ref(false)
const loadingStatus = ref(true)
const showExport = ref(false)
const dataLoadingStatus = ref(false)
const isNeedBackground=ref(false)
const { operaIndex,canOpera,marker } = storeToRefs(mapStore)
const { ConfigId } = storeToRefs(useScreenStore())
const { initMap,setCountry,setMarks,setLines,disposeAll,exportPng,lineTransformSpline,splineTransformLine,changeMarkStyleToCurrent } =useMap(mapRef,loadingStatus)
const isHaveBg=ref(false)
const { initMap,setCountry,setMarks,setLines,disposeAll,exportPng,lineTransformSpline,splineTransformLine,changeMarkStyleToCurrent,setTheme,isHaveBackground } =useMap(mapRef,loadingStatus)
const tripInfo = ref<any>()
provide("splinetoline", splineTransformLine);
provide("linetoSpline", lineTransformSpline);
......@@ -134,54 +152,60 @@ const createScriptMap = (r:any)=>{
formVisable.value=false
disposeAll()
initMap()
setCountry(r.countries)
let points:{latitude:number,longitude:number}[][] = []
let cities = r.cities.map((x:any,i:number)=> {
let city = {
name:x.Label,
lat:x.data.center[1],
lng:x.data.center[0]
}
if(i>0){
let t = r.cities[i-1]
let p = [
{
latitude: t.data.center[1],
longitude: t.data.center[0]
},
{
latitude:city.lat,
longitude:city.lng
}
]
points.push(p)
}
return city
})
setMarks(cities)
setLines(points)
setTimeout(() => {
setCountry(r.countries)
let points:{latitude:number,longitude:number}[][] = []
let cities = r.cities.map((x:any,i:number)=> {
let city = {
name:x.label,
lat:x.data.center[1],
lng:x.data.center[0]
}
if(i>0){
let t = r.cities[i-1]
let p = [
{
latitude: t.data.center[1],
longitude: t.data.center[0]
},
{
latitude:city.lat,
longitude:city.lng
}
]
points.push(p)
}
return city
})
console.log(cities)
setMarks(cities)
setLines(points)
}, 1000);
}
const createScriptHandler = ()=>{
formVisable.value= true
formVisable.value= !formVisable.value
themeVisable.value = false
}
const openThemeHandler = ()=>{
themeVisable.value=!themeVisable.value;
formVisable.value=false
}
const exportMapImage = () => {
ElMessageBox.confirm('地图导出后无法继续编辑，是否确认导出','提示',{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
let png = await exportPng()
if(png!='') emit('success',png)
else {
ElMessage.error({
message: '地图导出失败，请重试',
})
}
})
.catch((error) => { })
const readyExportHandler = ()=>{
showExport.value=true
isHaveBg.value = isHaveBackground()
}
const exportMapImage = async () => {
showExport.value=false
let png = await exportPng(isNeedBackground.value)
if(png!='') emit('success',png)
else {
ElMessage.error({
message: '地图导出失败，请重试',
})
}
}
const closed = ()=>{
......@@ -193,6 +217,10 @@ onMounted(()=>{
initMap()
//ConfigId.value = 9765
}, 2000);
// setTimeout(() => {
// let t=['JP', 'KR']
// }, 4000);
})
......
src/components/Maps/useMap.ts
View file @ 8097de2f
......@@ -3,17 +3,18 @@ import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import am4geodata_worldHigh from "@amcharts/amcharts4-geodata/worldUltra";
import { useMapStore } from '@/store/index'
import { useFontStore, useMapStore } from '@/store/index'
import { storeToRefs } from 'pinia';
import am4geodata_data_countries from "@amcharts/amcharts4-geodata/data/countries";
import am5geodata_lang_cn_ZH from "@amcharts/amcharts4-geodata/lang/cn_ZH";
import AliyunUpload from '@/utils/upload/aliyun';
import { MapTheme } from '@/types/mapTheme';
export default (MapDOM: Ref<HTMLElement | undefined>, loadingStatus: Ref<boolean>) => {
const mapStore = useMapStore()
const { operaIndex, fillColor, fillType, canOpera, newLine, lineSeries, removeMark, labelSeries, execut,splineSeries } = storeToRefs(mapStore)
const { operaIndex, fillColor, fillType, canOpera, newLine, lineSeries, removeMark, labelSeries, execut,splineSeries,currentTheme } = storeToRefs(mapStore)
mapStore.setAllCountries(am5geodata_lang_cn_ZH)
const eventName = ref<string>('')
......@@ -108,7 +109,8 @@ export default (MapDOM: Ref<HTMLElement | undefined>, loadingStatus: Ref<boolean
map.dispose()
}
const exportPng = (): Promise<string> => {
const exportPng = (showBackground:boolean): Promise<string> => {
if(!showBackground) map.background.fillOpacity = 0
const tt = map.config
countrySeries.exporting.getJSON("json").then(async r=>{
......@@ -143,6 +145,10 @@ export default (MapDOM: Ref<HTMLElement | undefined>, loadingStatus: Ref<boolean
})
}
const isHaveBackground = () => {
return map.background.fillOpacity>0
}
const createMarkImageHandler = (e: any) => {
let markerPath = mapStore.getMarker
let imageSeries = map.series.push(new am4maps.MapImageSeries())
......@@ -226,7 +232,9 @@ export default (MapDOM: Ref<HTMLElement | undefined>, loadingStatus: Ref<boolean
label.fontSize = 13;
label.fontFamily = 'pingfangr'
label.fill = am4core.color(fillColor.value.realColor)
label.currentText = x.name
label.text = x.name
console.log(x.name)
// labelChildren.children.getIndex(0).hide()
// label.marginBotton=0
label.y = 6
......@@ -330,6 +338,8 @@ export default (MapDOM: Ref<HTMLElement | undefined>, loadingStatus: Ref<boolean
url: countrySeries.geodataSource.url
})
} else if (countriesData.length > 1) {
worldSeries.hide()
countrySeries.show()
let idArray: any[] = []
for (let i = 0; i < countriesData.length; i++) {
const item = countriesData[i];
......@@ -342,12 +352,9 @@ export default (MapDOM: Ref<HTMLElement | undefined>, loadingStatus: Ref<boolean
})
idArray.push(item.id)
}
countrySeries.geodata = am4geodata_worldHigh
countrySeries.include = idArray
countrySeries.invalidateData()
worldSeries.hide();
countrySeries.show();
setTimeout(() => {
try {
map.zoomToMapObject(countrySeries.getPolygonById(idArray![0]))
......@@ -720,6 +727,94 @@ export default (MapDOM: Ref<HTMLElement | undefined>, loadingStatus: Ref<boolean
}
const setLineTheme = ()=>{
map.series.values.forEach(x=>{
if(x.className=='MapSplineSeries'){
let t = x as am4maps.MapSplineSeries
t.mapLines.values.forEach(y=>{
y.stroke = am4core.color(currentTheme.value!.line.color)
y.strokeWidth = currentTheme.value!.line.width
})
} else if(x.className=='MapArcSeries'){
let t = x as am4maps.MapArcSeries
t.mapLines.values.forEach(y=>{
y.stroke = am4core.color(currentTheme.value!.line.color)
y.strokeWidth = currentTheme.value!.line.width
})
}
})
}
const setImageTheme = ()=>{
map.series.values.forEach(x=>{
if(x.className=='MapImageSeries'){
let t = x as am4maps.MapImageSeries
if(t.mapImages && t.mapImages.values.length>0 && t.mapImages!.getIndex(0)!.children.getIndex(0)?.className!="Label"){
let temp = t.mapImages!.getIndex(0)!.children.getIndex(0)!
temp.fill = am4core.color(currentTheme.value!.tag.color)
temp.scale =currentTheme.value!.tag.size
if(!temp.path) {
temp.strokeWidth = currentTheme.value!.tag.border
temp.stroke = am4core.color(currentTheme.value!.tag.borderColor)
}
}
let cl:am4core.Sprite|undefined = undefined
if(t.mapImages.length>1 && t.mapImages!.getIndex(1)!.children.length>1){
let lab:any = undefined
lab = t.mapImages!.getIndex(1)!.children.getIndex(1)
if(lab){
useFontStore().loadFontToDocument([currentTheme.value!.text.fontFamily??""])
lab.fontSize = currentTheme.value!.text.size
lab.fill = am4core.color(currentTheme.value!.text.color)
lab.fontFamily = currentTheme.value!.text.fontFamily
}
}
}
})
}
const setLableTheme = () => {
map.series.values.forEach(x=>{
if(x.className=='MapImageSeries' && x.children.length>0){
let t = x as am4maps.MapImageSeries
if(t.mapImages &&t.mapImages.values.length>0 && t.mapImages!.getIndex(0)!.children.getIndex(0)!.className=="Label"){
let lab = t.mapImages!.getIndex(0)!.children.getIndex(0)! as am4core.Label
lab.fontSize = currentTheme.value!.text.size
lab.fill = am4core.color(currentTheme.value!.text.color)
lab.fontFamily = currentTheme.value!.text.fontFamily??""
useFontStore().loadFontToDocument([currentTheme.value!.text.fontFamily??""])
}
}
})
}
const setTheme = (n: MapTheme|null)=>{
if(n){
map.background.fill = am4core.color(n.mapBackground);
map.background.fillOpacity = 1;
if(!countrySeries.include) countryPolygon.polygon.fill = am4core.color(n.fillColor[0])
else{
countrySeries.mapPolygons.values.forEach((x,i) => {
let color = i<n.fillColor.length?n.fillColor[i]:n.fillColor[n.fillColor.length-1]
x.fill = am4core.color(color);
})
}
console.log(countrySeries.mapPolygons)
countrySeries.mapPolygons.template.stroke = am4core.color(n.borderColor);
countrySeries.mapPolygons.template.strokeWidth = n.border
if(!countrySeries.include) countrySeries.geodataSource.load();
setLineTheme()
setImageTheme()
setLableTheme()
//console.log(map.series)
}
}
watch(() => newLine.value, (newVal: number[]) => {
let points: am4core.IGeoPoint[] = []
......@@ -752,7 +847,9 @@ export default (MapDOM: Ref<HTMLElement | undefined>, loadingStatus: Ref<boolean
}
})
// watch(()=> currentTheme.value,(n: MapTheme|null)=>{
// setTheme(n)
// })
return {
initMap,
......@@ -761,8 +858,10 @@ export default (MapDOM: Ref<HTMLElement | undefined>, loadingStatus: Ref<boolean
setLines,
disposeAll,
exportPng,
isHaveBackground,
lineTransformSpline,
splineTransformLine,
changeMarkStyleToCurrent
changeMarkStyleToCurrent,
setTheme
}
}
\ No newline at end of file
src/store/map.ts
View file @ 8097de2f
......@@ -2,6 +2,7 @@
import { defineStore } from "pinia";
import {MapArcSeries,MapImageSeries,MapSplineSeries} from "@amcharts/amcharts4/maps";
import { Lang } from "@amcharts/amcharts4-geodata/.internal/Lang";
import { MapTheme } from "@/types/mapTheme";
export interface MapFill{
color:number,
......@@ -34,7 +35,8 @@ interface MapState{
checkedCountries:MapCountryInfo[],
allCountries:Lang|null,
execut:MapCountryOpera|null
splineSeries:MapSplineSeries|undefined
splineSeries:MapSplineSeries|undefined,
currentTheme:MapTheme|null
}
export const useMapStore = defineStore('map',{
......@@ -56,7 +58,8 @@ export const useMapStore = defineStore('map',{
checkedCountries:[],
allCountries:null,
execut:null,
splineSeries:undefined
splineSeries:undefined,
currentTheme:null
}),
getters:{
getCurrent(state){
......@@ -132,6 +135,9 @@ export const useMapStore = defineStore('map',{
},
setCountriesChange(val:MapCountryOpera|null){
this.execut = val
},
setCurrentTheme(theme:MapTheme|null){
this.currentTheme = theme
}
// removeCurrentMark(){
// if(this.map && this.current && this.current._className=='MapImageSeries'){
......
src/types/mapTheme.ts 0 → 100644
View file @ 8097de2f
export interface MapLineStyle{
color:string,
width:number,
type:1|2 //1代表直线 2代表曲线
}
export interface TextStyle {
size: number,
color: string,
fontFamily?: string
}
export interface TagStyle {
size: number,
color: string,
border: number,
borderColor: string
}
export interface MapTheme {
mapBackground: string,
fillColor: string[],
line: MapLineStyle,
text: TextStyle,
tag: TagStyle,
border:number,
borderColor:string
}
\ No newline at end of file
Markdown is supported
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