完善二次贝塞尔曲线，完善标记可以被批量处理等功能

components.d.ts

@@ -76,6 +76,7 @@ declare module 'vue' {
     Select: typeof import('./src/components/Select.vue')['default']
     SelectGroup: typeof import('./src/components/SelectGroup.vue')['default']
     Slider: typeof import('./src/components/Slider.vue')['default']
+    SpLineAttributes: typeof import('./src/components/Maps/MapAttributes/SpLineAttributes.vue')['default']
     Switch: typeof import('./src/components/Switch.vue')['default']
     SymbolContent: typeof import('./src/components/LaTeXEditor/SymbolContent.vue')['default']
     Tabs: typeof import('./src/components/Tabs.vue')['default']

src/components/Maps/MapAttributes/LineAttributes.vue

@@ -9,8 +9,11 @@
                 <IconDelete class="btn" style="font-size: 12px;" @click="removeLine" />
             </div>
         </div>
-        <div class="text-right">
-            <el-checkbox v-model="updateAllLineStatus" @click.stop="selectAllLineHandler">更新所有线条</el-checkbox>
+        <div class="row items-center">
+            <div class="col q-ml-md">
+                <el-button @click="changeToLineHandler" link size="mini" type="primary" style="font-size: 11px;">变更为双头曲线</el-button>
+            </div>
+            <el-checkbox v-model="updateAllLineStatus" @click.stop="selectAllLineHandler">同步更新</el-checkbox>
         </div>
         <div class="attr-items flex items-center">
             <i class="icon-arrow-thickness q-mr-lg" title="粗细" style="margin-top: 5px;"></i>
@@ -50,7 +53,7 @@
 <script setup lang="ts">
 import { useMapStore } from '@/store/index'
 import { storeToRefs } from 'pinia';
-import { reactive, ref } from 'vue';
+import { inject, reactive, ref } from 'vue';
 import tinycolor from 'tinycolor2';
 import { color as am4coreColor,Triangle} from "@amcharts/amcharts4/core";
 import { watch } from 'vue';
@@ -58,6 +61,7 @@ import { watch } from 'vue';
 const mapStore = useMapStore()
 const { current,lineSeries } = storeToRefs(mapStore)
 const updateAllLineStatus=ref(false)
+const lineTransfromSpine = inject("linetoSpline",(spline:any)=>{})
 const attrs = reactive({
     arrow:-1
 } as any)
@@ -167,6 +171,22 @@ const setAttribute = ()=>{
 const removeLine = ()=>{
     mapStore.removeCurrentLine()
 }
+
+const changeToLineHandler = ()=>{
+    let changes:number[]=[]
+    for (let i = 0; i < lineSeries.value?.mapLines.length!; i++) {
+        let element = lineSeries.value?.mapLines.getIndex(i);
+        if(element?.uid==current.value.uid || updateAllLineStatus.value){
+            changes.push(i)
+            element?.hide()
+            lineTransfromSpine(element)
+        }
+    }
+    changes.forEach(x=>{
+        lineSeries.value?.mapLines.removeIndex(x)
+    })
+    mapStore.setCurrent(null)
+}
 setAttribute()
 
 watch(()=>current.value,()=>{

src/components/Maps/MapAttributes/MarkAttributes.vue

@@ -9,6 +9,9 @@
                 <IconDelete class="btn" style="font-size: 12px;" @click="removeMark" />
             </div>
         </div>
+        <div class="text-right">
+            <el-checkbox v-model="updateStatus">同步更新</el-checkbox>
+        </div>
         <div class="attr-items flex items-center q-mt-lg">
             <div style="font-size: 11px;width:50px;">定位</div>
             <el-select v-model="attrs.selectObj" filterable size="mini" remote reserve-keyword placeholder="输入关键字" @change="setLocationHandler" :remote-method="searchPoiInfoHandler"  :loading="searchLoading">
@@ -40,7 +43,7 @@
             
             <div class="attr-items flex items-center q-mt-md">
                 <div style="font-size: 11px;width:50px;">对齐</div>
-                <el-select size="mini" v-model="attrs.fontAlign" @change="val=>calcLabelLocal(undefined,val as number)" placeholder="请选择">
+                <el-select size="mini" v-model="attrs.fontAlign" @change="val=>setAlignChangeHandler(val as number)" placeholder="请选择">
                     <el-option v-for="item in positions" :key="item.value" :label="item.label" :value="item.value" />
                 </el-select>
             </div>
@@ -85,7 +88,7 @@
 <script setup lang="ts">
 import { useMapStore } from '@/store/index'
 import { storeToRefs } from 'pinia';
-import { reactive, ref } from 'vue';
+import { inject, reactive, ref } from 'vue';
 import tinycolor from 'tinycolor2';
 import { color as am4coreColor,Label} from "@amcharts/amcharts4/core";
 import { watch } from 'vue';
@@ -102,6 +105,8 @@ const attrs = reactive({
     selectObj:''
 } as any)
 const options = ref<{label:string,value:string,center:number[]}[]>([])
+const changeMarkStyleToCurrent = inject("changeMarkStyleToCurrent",()=>{})
+const updateStatus = ref(false)
 const searchLoading = ref(false)
 const icons = ref<string[]>(['icon-arrow-left','icon-arrow-right','icon-arrow-leftright','icon-arrow-middle'])
 const positions = ref<{label:string,value:number}[]>([{label:'底部',value:0},{label:'顶部',value:1},{label:'靠右',value:2},{label:'靠左',value:3}])
@@ -132,10 +137,6 @@ const updateStrokeHandler = (val:any) =>{
     attrs.strokeOpacity = tinycolor(val).getAlpha()
     updateLineStyle(current.value)
 }
-const selectAllLineHandler = (val:any)=>{
-    
-    //console.log(val, updateAllLineStatus.value)
-}
 const updateLineStyle = (lineObj:any)=>{
     let chi =  lineObj.mapImages.getIndex(0).children.getIndex(0)
     let tempChi = lineObj.mapImages.template.children.getIndex(0)
@@ -152,6 +153,7 @@ const updateLineStyle = (lineObj:any)=>{
     tempChi.scale = attrs.scale
     tempChi.fillOpacity = attrs.fillOpacity
     tempChi.fill = am4coreColor(tinycolor(attrs.fill).toHexString())
+    asyncAllMarkHandler()
 }
 
 const createLabel = ()=>{
@@ -179,7 +181,7 @@ const createLabel = ()=>{
 const calcLabelLocal = (label?:Label,align:number=0) =>{
     if(!label){
         label = getCurrentLabel()
-        align = align==-1? label!.marginBottom as number:align
+        align = align==-1 && label ? label!.marginBottom as number:align
     }
     
     if(label){
@@ -237,6 +239,7 @@ const changeLabelStatus = (val:boolean)=>{
     } else {
         current.value.mapImages.removeIndex(1)
     }
+    asyncAllMarkHandler()
 }
 const updateLabFontSizeHandler = (val:number) =>{
     let lab = getCurrentLabel()
@@ -244,6 +247,7 @@ const updateLabFontSizeHandler = (val:number) =>{
         lab.fontSize=val
         setTimeout(() => {
             calcLabelLocal(undefined,-1)
+            asyncAllMarkHandler()
         }, 500);
     }
 }
@@ -252,13 +256,19 @@ const setLabelTextHandler = (val:string)=>{
     if(lab){
         lab.text=val
         calcLabelLocal(lab,lab.marginBottom)
+        asyncAllMarkHandler()
     }
 }
+const setAlignChangeHandler = (val:number)=>{
+    calcLabelLocal(undefined,val)
+    asyncAllMarkHandler()
+}
 const setLabelColorHandler = (val:string)=>{
     let lab = getCurrentLabel()
     if(lab){
         lab.fill = am4coreColor(tinycolor(val).toHex8String())
         attrs.fontColor = tinycolor(val).toHex8String()
+        asyncAllMarkHandler()
     }
 }
 
@@ -294,6 +304,12 @@ const setAttribute = ()=>{
 const removeMark = ()=>{
     mapStore.setRemoveMark(current.value)
 }
+
+const asyncAllMarkHandler = ()=>{
+    if(updateStatus.value){
+        changeMarkStyleToCurrent()
+    }
+}
 setAttribute()
 
 watch(()=>current.value,()=>{

src/components/Maps/MapAttributes/SpLineAttributes.vue

+<template>
+    <div class="attr-box">
+        <div class="box-header">
+            <div class="row items-center attr-header">
+                <img class="drag-icon"
+                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1704767732000_329.webp"
+                    alt="">
+                <div class="title col">双曲线设置</div>
+                <IconDelete class="btn" style="font-size: 12px;" @click="removeLine" />
+            </div>
+        </div>
+        <div class="row items-center">
+            <div class="col q-ml-md">
+                <el-button @click="changeToLineHandler" link size="mini" type="primary" style="font-size: 11px;">变更为线条</el-button>
+            </div>
+            <el-checkbox v-model="updateAllLineStatus" @click.stop="selectAllLineHandler">同步更新</el-checkbox>
+        </div>
+        <div class="attr-items flex items-center">
+            <i class="icon-arrow-thickness q-mr-lg" title="粗细" style="margin-top: 5px;"></i>
+            <Slider class="filter-slider" :max="50" :min="1" :step="1" :value="attrs.strokeWidth"
+                @update:value="value => updateFilter(0, value as number)" />
+        </div>
+        <div class="attr-items flex items-center">
+            <i class="icon-arrow-dasharray q-mr-lg" title="虚线" style="margin-top: 5px;"></i>
+            <Slider class="filter-slider" :max="10" :min="0" :step="0.1" :value="attrs.strokeDasharray"
+                @update:value="value => updateFilter(1, value as number)" />
+        </div>
+        <div class="attr-items flex items-center">
+            <IconRotationHorizontal class="q-mr-lg" title="横向节点" style="margin-top: 5px;" />
+            <Slider class="filter-slider" :max="10" :min="-10" :step="0.1" :value="attrs.tensionX"
+                @update:value="value => updateFilter(2, value as number)" />
+        </div>
+        <div class="attr-items flex items-center">
+            <IconRotationVertical class="q-mr-lg" title="Y轴弯曲" style="margin-top: 5px;font-weight: bold;" />
+            <Slider class="filter-slider" :max="10" :min="-10" :step="0.1" :value="attrs.tensionY"
+                @update:value="value => updateFilter(3, value as number)" />
+        </div>
+        <div class="attr-items flex grey-bg items-center" style="border-bottom: 1px;padding: 0px;">
+            <div class="col arrow-type text-center" v-for="(x,i) in icons" @click="updateLinePoint(i)" :class="{'active':attrs.arrow==i}">
+                <i :class="[x]"></i>
+            </div>
+        </div>
+        <div class="attr-items flex items-center">
+            <div class="color-box  q-mr-lg">
+                <Popover trigger="mouseenter" class="full-height full-width">
+                    <template #content>
+                        <ColorPicker :modelValue="attrs.stroke" @update:modelValue="value => updateFillHandler(value)"/>
+                    </template>
+                    <div class="full-height full-width" :style="{backgroundColor:attrs.stroke}"></div>
+                </Popover>
+                
+            </div>
+            <div>{{ attrs.stroke }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useMapStore } from '@/store/index'
+import { storeToRefs } from 'pinia';
+import { inject, reactive, ref } from 'vue';
+import tinycolor from 'tinycolor2';
+import { color as am4coreColor,Triangle} from "@amcharts/amcharts4/core";
+import { watch } from 'vue';
+
+const mapStore = useMapStore()
+const { current,splineSeries,lineSeries } = storeToRefs(mapStore)
+const updateAllLineStatus=ref(false)
+const splineTransfromLine = inject("splinetoline",(spline:any)=>{})
+const attrs = reactive({
+    arrow:-1
+} as any)
+const icons = ref<string[]>(['icon-arrow-left','icon-arrow-right','icon-arrow-leftright','icon-arrow-middle'])
+
+const updateFilter = (t: number, val: number) => {
+    switch (t) {
+        case 0:
+            attrs.strokeWidth = val
+            break;
+        case 1:
+            attrs.strokeDasharray = val
+            break;
+        case 2:
+            attrs.tensionX = val
+            break;
+        case 3:
+            attrs.tensionY = val
+            break;
+        default:
+            break;
+    }
+    updated()
+}
+const updateFillHandler = (val:any) =>{
+    attrs.stroke = val
+    attrs.opacity = tinycolor(val).getAlpha()
+    updated()
+}
+const selectAllLineHandler = (val:any)=>{
+    //console.log(val, updateAllLineStatus.value)
+}
+const updated =()=>{
+    updateLineStyle(current.value)
+    if(updateAllLineStatus.value && splineSeries.value?.mapLines.length!>1){
+        for (let i = 0; i < splineSeries.value?.mapLines.length!; i++) {
+            let element = splineSeries.value?.mapLines.getIndex(i);
+            if(element?.uid!=current.value.uid){
+                updateLineStyle(element)
+            }
+        }
+    }
+    updateLinePoint(attrs.arrow,true)
+}
+const updateLineStyle = (lineObj:any)=>{
+    lineObj.strokeWidth= attrs.strokeWidth
+    lineObj.strokeOpacity = attrs.opacity
+    lineObj.stroke = am4coreColor(tinycolor(attrs.stroke).toHex8String())
+    lineObj.children.getIndex(0).tensionX = attrs.tensionX
+    lineObj.children.getIndex(0).tensionY = attrs.tensionY
+    lineObj.strokeDasharray = `${attrs.strokeDasharray},${attrs.strokeDasharray}`
+    console.log(attrs.strokeDasharray)
+    
+}
+const updateLinePoint = (t:number,isReload:boolean=false)=>{
+    if(t==attrs.arrow && !isReload) t=-1
+    console.log(t)
+    for (let i = 0; i < splineSeries.value?.mapLines.length!; i++) {
+        let element = splineSeries.value?.mapLines.getIndex(i);
+        if(element?.uid==current.value.uid || updateAllLineStatus.value){
+            element!.lineObjects.clear()
+            if(t==0){
+                createPoint(0,element)
+            } else if(t==1){
+                createPoint(1,element)
+            } else if(t==2){
+                createPoint(0,element)
+                createPoint(1,element)
+            } else if(t==3){
+                createPoint(0.5,element)
+            }
+        }
+    }
+    
+    attrs.arrow=t
+}
+
+
+const createPoint = (point:number,lineObj:any)=>{
+
+    console.log(lineObj.lineObjects)
+    let rotation = point == 0?270:90
+    let bullet = lineObj.lineObjects.create();
+    bullet.position = point;
+    bullet.nonScaling = true;
+    bullet.width = attrs.strokeWidth + 10
+    bullet.height = attrs.strokeWidth + 10
+    bullet.strokeWidth = 0
+
+    var tria = bullet.createChild(Triangle);
+    tria.width = attrs.strokeWidth + 10
+    tria.height = attrs.strokeWidth + 10
+    tria.fill = am4coreColor(tinycolor(attrs.stroke).toHexString());
+    tria.strokeWidth = point;
+    tria.rotation = rotation
+    tria.x = point == 0? -tria.width:tria.width
+    tria.y = point == 0? tria.width/2:-tria.width/2
+}
+const setAttribute = ()=>{
+    attrs.strokeWidth=current.value.strokeWidth
+    attrs.stroke=tinycolor(current.value.stroke.hex).setAlpha(current.value.strokeOpacity).toHex8String()
+    attrs.opacity=current.value.strokeOpacity
+    attrs.tensionX = current.value.children.getIndex(0).tensionX
+    attrs.tensionY = current.value.children.getIndex(0).tensionY
+    attrs.strokeDasharray=current.value.strokeDasharray && current.value.strokeDasharray!=''?parseInt(current.value.strokeDasharray.split(',')[0]):0
+    if(current.value.lineObjects.length>0){
+        if(current.value.lineObjects.length==2) attrs.arrow=2
+        else{
+            let p = current.value.lineObjects.getIndex(0).position
+            attrs.arrow = p==0.5?3:p
+        }
+    }
+}
+const removeLine = ()=>{
+    splineSeries.value?.mapLines.removeValue(current.value)
+    mapStore.setCurrent(null)
+}
+const changeToLineHandler = ()=>{
+    let changes:number[]=[]
+    for (let i = 0; i < splineSeries.value?.mapLines.length!; i++) {
+        let element = splineSeries.value?.mapLines.getIndex(i);
+        if(element?.uid==current.value.uid || updateAllLineStatus.value){
+            changes.push(i)
+            element?.hide()
+            splineTransfromLine(element)
+        }
+    }
+    changes.forEach(x=>{
+        splineSeries.value?.mapLines.removeIndex(x)
+    })
+    mapStore.setCurrent(null)
+}
+setAttribute()
+
+watch(()=>current.value,()=>{
+    setAttribute()
+})
+</script>
\ No newline at end of file

src/components/Maps/MapAttributes/index.vue

@@ -4,6 +4,7 @@
     <MarkAttributes v-if="current && current._className=='MapImageSeries'"></MarkAttributes>
     <TextAttributes v-if="current && current._className=='Label'"></TextAttributes>
     <CountriesAttrbutes v-if="current && current=='Country'"></CountriesAttrbutes>
+    <SpLineAttributes v-if="current && current._className=='MapSpline'"></SpLineAttributes>
 </template>
 
 <script setup lang="ts">
@@ -14,6 +15,7 @@ import AreaAttributes from './AreaAttributes.vue';
 import MarkAttributes from './MarkAttributes.vue';
 import TextAttributes from './TextAttributes.vue';
 import CountriesAttrbutes from './CountriesAttrbutes.vue';
+import SpLineAttributes from './SpLineAttributes.vue';
 
 const mapStore = useMapStore()
 const { current } = storeToRefs(mapStore)

src/components/Maps/index.vue

@@ -22,7 +22,7 @@
 import tools from './Tools.vue'
 import MapAttributes from './MapAttributes/index.vue';
 import mapLine from './Line.vue'
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, provide, ref, watch } from 'vue';
 import useMap from './useMap'
 import { useMapStore,useScreenStore } from '@/store/index'
 import { storeToRefs } from 'pinia';
@@ -54,8 +54,11 @@ const loadingStatus = ref(true)
 const dataLoadingStatus = ref(false)
 const { operaIndex,canOpera,marker } = storeToRefs(mapStore)
 const { ConfigId } = storeToRefs(useScreenStore())
-const { initMap,setCountry,setMarks,setLines,disposeAll,exportPng } =useMap(mapRef,loadingStatus)
+const { initMap,setCountry,setMarks,setLines,disposeAll,exportPng,lineTransformSpline,splineTransformLine,changeMarkStyleToCurrent } =useMap(mapRef,loadingStatus)
 const tripInfo = ref<any>()
+provide("splinetoline", splineTransformLine);
+provide("linetoSpline", lineTransformSpline);
+provide("changeMarkStyleToCurrent",changeMarkStyleToCurrent)
 
 watch(() => props.visible, () => {
     visibleStatus.value = props.visible
@@ -146,7 +149,7 @@ const closed = ()=>{
 onMounted(()=>{
     setTimeout(() => {
         initMap()
-        ConfigId.value = 9765
+        //ConfigId.value = 9765
     }, 2000);
     
 })

src/plugins/icon.ts

@@ -123,6 +123,8 @@ import {
   CloseOne,
   Info,
   Earth,
+  RotationHorizontal,
+  RotationVertical
 } from '@icon-park/vue-next'
 
 export interface Icons {
@@ -251,6 +253,8 @@ export const icons: Icons = {
   IconCloseOne: CloseOne,
   IconInfo: Info,
   IconEarth: Earth,
+  IconRotationHorizontal: RotationHorizontal,
+  IconRotationVertical: RotationVertical 
 }
 
 export default {

src/store/map.ts

 
 import { defineStore } from "pinia";
-import {MapArcSeries,MapImageSeries} from "@amcharts/amcharts4/maps";
+import {MapArcSeries,MapImageSeries,MapSplineSeries} from "@amcharts/amcharts4/maps";
 import { Lang } from "@amcharts/amcharts4-geodata/.internal/Lang";
 
 export interface MapFill{
@@ -34,6 +34,7 @@ interface MapState{
     checkedCountries:MapCountryInfo[],
     allCountries:Lang|null,
     execut:MapCountryOpera|null
+    splineSeries:MapSplineSeries|undefined
 }
 
 export const useMapStore = defineStore('map',{
@@ -54,7 +55,8 @@ export const useMapStore = defineStore('map',{
         labelSeries:undefined,
         checkedCountries:[],
         allCountries:null,
-        execut:null
+        execut:null,
+        splineSeries:undefined
     }),
     getters:{
         getCurrent(state){
@@ -104,6 +106,12 @@ export const useMapStore = defineStore('map',{
                 this.current = null
             }
         },
+        removeCurrentSpLine(){
+            if(this.splineSeries && this.current && this.current._className=='MapArc'){
+                this.splineSeries.mapLines.removeValue(this.current)
+                this.current = null
+            }
+        },
         setRemoveMark(val:string) {
             this.removeMark = val
         },