merge
parent
1ab416ae30
commit
aa22add593
|
|
@ -53,6 +53,12 @@ export enum MarkerEnum {
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
dataset: dataJson,
|
dataset: dataJson,
|
||||||
|
boxStyle:{
|
||||||
|
title:"",
|
||||||
|
borderColor:"",
|
||||||
|
backgroundColor:"",
|
||||||
|
fontColor:"",
|
||||||
|
},
|
||||||
mapOptions:{
|
mapOptions:{
|
||||||
"scene": {
|
"scene": {
|
||||||
"center": {"lat":30.074253,"lng":126.353311,"alt":21803924.9,"heading":360,"pitch":-90},
|
"center": {"lat":30.074253,"lng":126.353311,"alt":21803924.9,"heading":360,"pitch":-90},
|
||||||
|
|
@ -1991,7 +1997,7 @@ export const option = {
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
public key = MapLayerConfig.key
|
public key = MapLayerConfig.key
|
||||||
public attr = { ...chartInitConfig, w: 1000, h: 800, zIndex: -1 }
|
public attr = { ...chartInitConfig, w: 300, h: 800, zIndex: -1 }
|
||||||
public chartConfig = cloneDeep(MapLayerConfig)
|
public chartConfig = cloneDeep(MapLayerConfig)
|
||||||
public option = cloneDeep(option)
|
public option = cloneDeep(option)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,85 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<collapse-item name="地图场景" :expanded="true">
|
<collapse-item name="组件样式" :expanded="true">
|
||||||
|
|
||||||
|
|
||||||
<setting-item-box name="经度" :alone="true">
|
<setting-item-box name="标题" :alone="true">
|
||||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.lng" :show-button="false" size="small">
|
<n-input v-model:value="optionData.boxStyle.title" :min="0" size="small"></n-input>
|
||||||
<template #suffix>°</template>
|
|
||||||
</n-input-number>
|
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
<setting-item-box name="纬度" :alone="true">
|
<setting-item-box name="字体颜色" :alone="true">
|
||||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.lat" :show-button="false" size="small">
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.fontColor"></n-color-picker>
|
||||||
<template #suffix>°</template>
|
|
||||||
</n-input-number>
|
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
<setting-item-box name="高度值" :alone="true">
|
<setting-item-box name="边框颜色" :alone="true">
|
||||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.alt" :min="0" size="small"></n-input-number>
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.borderColor"></n-color-picker>
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
<setting-item-box name="方向角度" :alone="true">
|
<setting-item-box name="背景颜色" :alone="true">
|
||||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.heading" :min="0" size="small"></n-input-number>
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.backgroundColor"></n-color-picker>
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
<setting-item-box name="俯仰角" :alone="true">
|
|
||||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.pitch" :min="-90" size="small"></n-input-number>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
|
|
||||||
<setting-item-box name="是否显示太阳" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.scene.showSun" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
|
|
||||||
<setting-item-box name="是否显示月亮" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.scene.showMoon" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
<setting-item-box name="是否显示默认天空盒" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.scene.showSkyBox" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
<setting-item-box name="是否显示地球大气层外光圈" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.scene.showSkyAtmosphere" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
<setting-item-box name="是否启用雾化效果" :alone="true">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.mapOptions.scene.fog" size="small" />
|
|
||||||
<n-text>是否显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</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>
|
||||||
|
|
||||||
</collapse-item>
|
</collapse-item>
|
||||||
|
|
@ -138,10 +74,7 @@
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
</collapse-item>
|
</collapse-item>
|
||||||
<!--
|
|
||||||
<collapse-item name="底图图层" :expanded="true">
|
|
||||||
|
|
||||||
</collapse-item> -->
|
|
||||||
|
|
||||||
<collapse-item name="右键菜单" :expanded="true">
|
<collapse-item name="右键菜单" :expanded="true">
|
||||||
|
|
||||||
|
|
@ -160,10 +93,11 @@ const props = defineProps({
|
||||||
type: Object as PropType<typeof option>,
|
type: Object as PropType<typeof option>,
|
||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
console.log("props.optionData",props.optionData);
|
console.log("optionDatasss",props.optionData);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="vChartRef" >
|
<div ref="vChartRef" >
|
||||||
<div class="layer-container" @click="handlerMap">
|
<div class="layer-container" @click="handlerMap" :style="{'background-color':props.chartConfig.option.boxStyle.backgroundColor,'border-color':props.chartConfig.option.boxStyle.borderColor}">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
费县林业防火
|
{{ props.chartConfig.option.boxStyle.title }}
|
||||||
</div>
|
</div>
|
||||||
<div class="layer-item-container">
|
<div class="layer-item-container">
|
||||||
<div v-for="(item,index) in handlerLayers" :key="index" style="color:#fff;">
|
<div v-for="(item,index) in handlerLayers" :key="index" style="color:#fff;">
|
||||||
|
|
@ -58,6 +58,8 @@ const props = defineProps({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
console.log("props123",props.chartConfig.option);
|
||||||
|
|
||||||
const layers = ref(null)
|
const layers = ref(null)
|
||||||
|
|
||||||
const handlerLayers = ref([]);
|
const handlerLayers = ref([]);
|
||||||
|
|
@ -462,20 +464,21 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
padding:15px;
|
padding:15px;
|
||||||
|
padding-top:0px;
|
||||||
padding-right:5px;
|
padding-right:5px;
|
||||||
background:rgba(7,38,30,0.85);
|
background:rgba(7,38,30,0.85);
|
||||||
border:1px solid #088538;
|
border:1px solid #088538;
|
||||||
}
|
}
|
||||||
.layer-item-container{
|
.layer-item-container{
|
||||||
width:100%;
|
width:100%;
|
||||||
height: calc( 100% - 40px);
|
height: calc( 100% - 50px);
|
||||||
overflow-y:auto;
|
overflow-y:auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer-container .title{
|
.layer-container .title{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:40px;
|
height:50px;
|
||||||
line-height:40px;
|
line-height:50px;
|
||||||
color:#CBE6CD;
|
color:#CBE6CD;
|
||||||
font-size:16px;
|
font-size:16px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -162,288 +162,11 @@ const stopWatch = watch(
|
||||||
() => props.chartConfig.option.mapOptions,
|
() => props.chartConfig.option.mapOptions,
|
||||||
async option => {
|
async option => {
|
||||||
let options = JSON.parse(JSON.stringify(props.chartConfig.option.mapOptions))
|
let options = JSON.parse(JSON.stringify(props.chartConfig.option.mapOptions))
|
||||||
|
|
||||||
console.log("props.chartConfig.option.mapOptions",);
|
console.log("props.chartConfig.option.mapOptions",);
|
||||||
|
|
||||||
await nextTick();
|
await nextTick();
|
||||||
|
|
||||||
// options = {
|
|
||||||
// "scene": {
|
|
||||||
// "center": {"lat":30.074253,"lng":126.353311,"alt":21803924.9,"heading":360,"pitch":-90},
|
|
||||||
// "scene3DOnly": false,
|
|
||||||
// "shadows": false,
|
|
||||||
// "removeDblClick": true,
|
|
||||||
// "sceneMode": 3,
|
|
||||||
// "showSun": true,
|
|
||||||
// "showMoon": true,
|
|
||||||
// "showSkyBox": true,
|
|
||||||
// "showSkyAtmosphere": true,
|
|
||||||
// "fog": true,
|
|
||||||
// "fxaa": true,
|
|
||||||
// "requestRenderMode": true,
|
|
||||||
// "contextOptions": {
|
|
||||||
// "requestWebgl1": false,
|
|
||||||
// "webgl": {
|
|
||||||
// "preserveDrawingBuffer": true
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// "globe": {
|
|
||||||
// "depthTestAgainstTerrain": false,
|
|
||||||
// "baseColor": "#546a53",
|
|
||||||
// "showGroundAtmosphere": true,
|
|
||||||
// "enableLighting": false
|
|
||||||
// },
|
|
||||||
// "cameraController": {
|
|
||||||
// "zoomFactor": 3.0,
|
|
||||||
// "minimumZoomDistance": 1,
|
|
||||||
// "maximumZoomDistance": 50000000,
|
|
||||||
// "enableRotate": true,
|
|
||||||
// "enableTranslate": true,
|
|
||||||
// "enableTilt": true,
|
|
||||||
// "enableZoom": true,
|
|
||||||
// "enableCollisionDetection": true,
|
|
||||||
// "minimumCollisionTerrainHeight": 15000
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// "control": {
|
|
||||||
// "homeButton": true,
|
|
||||||
// "baseLayerPicker": false,
|
|
||||||
// "sceneModePicker": true,
|
|
||||||
// "vrButton": false,
|
|
||||||
// "fullscreenButton": true,
|
|
||||||
// "navigationHelpButton": true,
|
|
||||||
// "animation": false,
|
|
||||||
// "timeline": false,
|
|
||||||
// "infoBox": false,
|
|
||||||
// "geocoder": false,
|
|
||||||
// "selectionIndicator": false,
|
|
||||||
// "showRenderLoopErrors": true,
|
|
||||||
// "contextmenu": {
|
|
||||||
// "hasDefault": true
|
|
||||||
// },
|
|
||||||
// "mouseDownView": true,
|
|
||||||
// "zoom": {
|
|
||||||
// "insertIndex": 1
|
|
||||||
// },
|
|
||||||
// "compass": {
|
|
||||||
// "bottom": "toolbar",
|
|
||||||
// "left": "5px"
|
|
||||||
// },
|
|
||||||
// "distanceLegend": {
|
|
||||||
// "left": "10px",
|
|
||||||
// "bottom": "2px"
|
|
||||||
// },
|
|
||||||
// "locationBar": {
|
|
||||||
// "crs": "CGCS2000_GK_Zone_3",
|
|
||||||
// "crsDecimal": 0,
|
|
||||||
// "template": "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx} 纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>"
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// "method": {
|
|
||||||
// "templateValues": {
|
|
||||||
// "dataServer": "//data.mars3d.cn",
|
|
||||||
// "gltfServerUrl": "//data.mars3d.cn/gltf"
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// "terrain": {
|
|
||||||
// "url": "//data.mars3d.cn/terrain",
|
|
||||||
// "show": true,
|
|
||||||
// "clip": true
|
|
||||||
// },
|
|
||||||
// "basemaps": [
|
|
||||||
// {
|
|
||||||
// "id": 10,
|
|
||||||
// "name": "地图底图",
|
|
||||||
// "type": "group"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "天地图影像",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/tdt_img.png",
|
|
||||||
// "type": "group",
|
|
||||||
// "layers": [
|
|
||||||
// {
|
|
||||||
// "name": "底图",
|
|
||||||
// "type": "tdt",
|
|
||||||
// "layer": "img_d"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "name": "注记",
|
|
||||||
// "type": "tdt",
|
|
||||||
// "layer": "img_z"
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// "show": true
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "天地图电子",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/tdt_vec.png",
|
|
||||||
// "type": "group",
|
|
||||||
// "layers": [
|
|
||||||
// {
|
|
||||||
// "name": "底图",
|
|
||||||
// "type": "tdt",
|
|
||||||
// "layer": "vec_d"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "name": "注记",
|
|
||||||
// "type": "tdt",
|
|
||||||
// "layer": "vec_z"
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "id": 2021,
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "高德影像",
|
|
||||||
// "type": "group",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/gaode_img.png",
|
|
||||||
// "layers": [
|
|
||||||
// {
|
|
||||||
// "name": "底图",
|
|
||||||
// "type": "gaode",
|
|
||||||
// "layer": "img_d"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "name": "注记",
|
|
||||||
// "type": "gaode",
|
|
||||||
// "layer": "img_z"
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// "show": false
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "高德电子",
|
|
||||||
// "type": "gaode",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/gaode_vec.png",
|
|
||||||
// "layer": "vec"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "百度影像",
|
|
||||||
// "type": "group",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/bd-img.png",
|
|
||||||
// "layers": [
|
|
||||||
// {
|
|
||||||
// "name": "底图",
|
|
||||||
// "type": "baidu",
|
|
||||||
// "layer": "img_d"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "name": "注记",
|
|
||||||
// "type": "baidu",
|
|
||||||
// "layer": "img_z"
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "百度电子",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/bd-vec.png",
|
|
||||||
// "type": "baidu",
|
|
||||||
// "layer": "vec"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "腾讯影像",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/tencent_img.png",
|
|
||||||
// "type": "group",
|
|
||||||
// "layers": [
|
|
||||||
// {
|
|
||||||
// "name": "底图",
|
|
||||||
// "type": "tencent",
|
|
||||||
// "layer": "img_d"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "name": "注记",
|
|
||||||
// "type": "tencent",
|
|
||||||
// "layer": "img_z"
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "腾讯电子",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/tencent_vec.png",
|
|
||||||
// "type": "tencent",
|
|
||||||
// "layer": "vec"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "ArcGIS影像",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/esriWorldImagery.png",
|
|
||||||
// "type": "xyz",
|
|
||||||
// "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
|
|
||||||
// "enablePickFeatures": false
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "微软影像",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/bingAerial.png",
|
|
||||||
// "type": "bing",
|
|
||||||
// "layer": "Aerial"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "id": 2017,
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "蓝色底图",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/bd-c-midnight.png",
|
|
||||||
// "type": "gaode",
|
|
||||||
// "layer": "vec",
|
|
||||||
// "chinaCRS": "GCJ02",
|
|
||||||
// "invertColor": true,
|
|
||||||
// "filterColor": "#4e70a6",
|
|
||||||
// "brightness": 0.6,
|
|
||||||
// "contrast": 1.8,
|
|
||||||
// "gamma": 0.3,
|
|
||||||
// "hue": 1,
|
|
||||||
// "saturation": 0
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "黑色底图",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/bd-c-dark.png",
|
|
||||||
// "type": "gaode",
|
|
||||||
// "layer": "vec",
|
|
||||||
// "chinaCRS": "GCJ02",
|
|
||||||
// "invertColor": true,
|
|
||||||
// "filterColor": "#909090",
|
|
||||||
// "brightness": 0.6,
|
|
||||||
// "contrast": 1.8,
|
|
||||||
// "gamma": 0.3,
|
|
||||||
// "hue": 1,
|
|
||||||
// "saturation": 0
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "离线影像地图 (供参考)",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/google_img.png",
|
|
||||||
// "type": "xyz",
|
|
||||||
// "url": "{dataServer}/tile/img/{z}/{x}/{y}.jpg",
|
|
||||||
// "chinaCRS": "GCJ02",
|
|
||||||
// "maximumLevel": 13
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "单张图片 (本地离线)",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/offline.png",
|
|
||||||
// "type": "image",
|
|
||||||
// "url": "//data.mars3d.cn/img/map/world/world.jpg"
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// "id": 2023,
|
|
||||||
// "pid": 10,
|
|
||||||
// "name": "无底图",
|
|
||||||
// "icon": "//data.mars3d.cn/img/thumbnail/basemap/null.png",
|
|
||||||
// "type": "grid",
|
|
||||||
// "color": "#ffffff",
|
|
||||||
// "alpha": 0.03,
|
|
||||||
// "cells": 2
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// "layers":[]
|
|
||||||
// }
|
|
||||||
|
|
||||||
options = {
|
options = {
|
||||||
"scene": {
|
"scene": {
|
||||||
|
|
@ -2384,7 +2107,7 @@ const stopWatch = watch(
|
||||||
"type": "group"
|
"type": "group"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
initMap(options);
|
initMap(options);
|
||||||
|
|
||||||
|
|
@ -2425,13 +2148,12 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
|
||||||
// 方法函数封装
|
// 方法函数封装
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let graphicLayer = null;
|
let graphicLayer = null;
|
||||||
|
|
||||||
// 初始化矢量图层
|
// 地球创建完成后默认加载矢量数据图层
|
||||||
const handlerInitEntityLayer = () => {
|
const handlerInitEntityLayer = () => {
|
||||||
if(graphicLayer == null){
|
if(graphicLayer == null){
|
||||||
|
|
||||||
graphicLayer = new mars3d.layer.GraphicLayer({ id: 999 });
|
graphicLayer = new mars3d.layer.GraphicLayer({ id: 999 });
|
||||||
|
|
||||||
window.globalMap.addLayer(graphicLayer);
|
window.globalMap.addLayer(graphicLayer);
|
||||||
|
|
@ -2457,10 +2179,31 @@ const handlerInitEntityLayer = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 添加矢量图标
|
|
||||||
|
// 点击获取点击位置点位信息 用于常见的下发火点、下发任务点等使用
|
||||||
|
|
||||||
|
const handlerDrawPointt = async () => {
|
||||||
|
const graphic = await graphicLayer.startDraw({
|
||||||
|
type: "point",
|
||||||
|
})
|
||||||
|
|
||||||
|
let position = graphic.toJSON().position;
|
||||||
|
|
||||||
|
let res = {
|
||||||
|
lng:position[0],
|
||||||
|
lat:position[1],
|
||||||
|
alt:position[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
graphicLayer.removeGraphic(graphic);
|
||||||
|
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加Entity
|
||||||
const handlerAddEntity = (data) => {
|
const handlerAddEntity = (data) => {
|
||||||
|
|
||||||
let graphic = new mars3d.graphic.BillboardEntity({
|
let graphicOptions = {
|
||||||
id:data.id,
|
id:data.id,
|
||||||
position: [parseFloat(data.position.lng), parseFloat(data.position.lat)],
|
position: [parseFloat(data.position.lng), parseFloat(data.position.lat)],
|
||||||
style: {
|
style: {
|
||||||
|
|
@ -2517,13 +2260,19 @@ const handlerAddEntity = (data) => {
|
||||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||||
},
|
},
|
||||||
});
|
}
|
||||||
|
|
||||||
|
let graphic = graphicLayer.getGraphicById(data.id);
|
||||||
|
|
||||||
|
if(graphic){
|
||||||
|
graphic.setStyleOptions(graphicOptions);
|
||||||
|
}else{
|
||||||
|
graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
|
||||||
graphicLayer.addGraphic(graphic);
|
graphicLayer.addGraphic(graphic);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 隐藏矢量图标
|
|
||||||
const handlerHiddenEntity = (data) => {
|
const handlerHiddenEntity = (data) => {
|
||||||
let graphic = graphicLayer.getGraphicById(data.id);
|
let graphic = graphicLayer.getGraphicById(data.id);
|
||||||
if(graphic){
|
if(graphic){
|
||||||
|
|
@ -2531,7 +2280,7 @@ const handlerHiddenEntity = (data) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 移除矢量图标
|
|
||||||
const handlerRemoveEntity = (data) => {
|
const handlerRemoveEntity = (data) => {
|
||||||
let graphic = graphicLayer.getGraphicById(data.id);
|
let graphic = graphicLayer.getGraphicById(data.id);
|
||||||
if(graphic){
|
if(graphic){
|
||||||
|
|
@ -2539,10 +2288,18 @@ const handlerRemoveEntity = (data) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 定位到矢量图标
|
|
||||||
const handlerFlyToEntity = (data) => {
|
const handlerFlyToEntity = (data) => {
|
||||||
|
|
||||||
let graphic = graphicLayer.getGraphicById(data.id);
|
let graphic = graphicLayer.getGraphicById(data.id);
|
||||||
|
|
||||||
if(graphic){
|
if(graphic){
|
||||||
|
|
||||||
|
if(data.image.activeIcon){
|
||||||
|
grasphic.setStyle({
|
||||||
|
image:data.image.activeIcon
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
window.globalMap.flyToGraphic(graphic);
|
window.globalMap.flyToGraphic(graphic);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,210 @@
|
||||||
|
<template>
|
||||||
|
<collapse-item name="组件样式" :expanded="true">
|
||||||
|
|
||||||
|
|
||||||
|
<setting-item-box name="标题" :alone="true">
|
||||||
|
<n-input v-model:value="optionData.boxStyle.title" :min="0" size="small"></n-input>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="字体颜色" :alone="true">
|
||||||
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.fontColor"></n-color-picker>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="边框颜色" :alone="true">
|
||||||
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.borderColor"></n-color-picker>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="背景颜色" :alone="true">
|
||||||
|
<n-color-picker size="small" v-model:value="optionData.boxStyle.backgroundColor"></n-color-picker>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
</collapse-item>
|
||||||
|
|
||||||
|
<collapse-item name="地图控件" :expanded="true">
|
||||||
|
|
||||||
|
<setting-item-box name="底图切换按钮" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.mapOptions.control.baseLayerPicker" size="small" />
|
||||||
|
<n-text>是否显示</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="视角复位按钮" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.mapOptions.control.homeButton" size="small" />
|
||||||
|
<n-text>是否显示</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="二三维切换按钮" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.mapOptions.control.sceneModePicker" size="small" />
|
||||||
|
<n-text>是否显示</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
<setting-item-box name="全屏按钮" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.mapOptions.control.fullscreenButton" size="small" />
|
||||||
|
<n-text>是否显示</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</collapse-item>
|
||||||
|
|
||||||
|
<collapse-item name="地形设置" :expanded="true">
|
||||||
|
|
||||||
|
<setting-item-box name="是否开启地形" :alone="true">
|
||||||
|
<setting-item>
|
||||||
|
<n-space>
|
||||||
|
<n-switch v-model:value="optionData.mapOptions.terrain.show" size="small" />
|
||||||
|
<n-text>是否显示</n-text>
|
||||||
|
</n-space>
|
||||||
|
</setting-item>
|
||||||
|
</setting-item-box>
|
||||||
|
|
||||||
|
</collapse-item>
|
||||||
|
|
||||||
|
|
||||||
|
<collapse-item name="右键菜单" :expanded="true">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</collapse-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType } from 'vue'
|
||||||
|
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
|
||||||
|
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
optionData: {
|
||||||
|
type: Object as PropType<typeof option>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
console.log("optionDatasss",props.optionData);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const themeOptions = [
|
||||||
|
{
|
||||||
|
value: ThemeEnum.NORMAL,
|
||||||
|
label: '标准'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.DARK,
|
||||||
|
label: '幻影黑'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.LIGHT,
|
||||||
|
label: '月光银'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.WHITES_MOKE,
|
||||||
|
label: '远山黛'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.FRESH,
|
||||||
|
label: '草色青'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.GREY,
|
||||||
|
label: '雅士灰'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.GRAFFITI,
|
||||||
|
label: '涂鸦'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.MACARON,
|
||||||
|
label: '马卡龙'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.BLUE,
|
||||||
|
label: '靛青蓝'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.DARKBLUE,
|
||||||
|
label: '极夜蓝'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ThemeEnum.WINE,
|
||||||
|
label: '酱籽'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const langOptions = [
|
||||||
|
{
|
||||||
|
value: LangEnum.ZH_CN,
|
||||||
|
label: '中文简体'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: LangEnum.EN,
|
||||||
|
label: '英文'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: LangEnum.ZH_EN,
|
||||||
|
label: '中英文对照'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const viewModeOptions = [
|
||||||
|
{
|
||||||
|
value: ViewModeEnum.PLANE,
|
||||||
|
label: '2D'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: ViewModeEnum.STEREOSCOPIC,
|
||||||
|
label: '3D'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const featuresOptions = [
|
||||||
|
{
|
||||||
|
value: FeaturesEnum.BG,
|
||||||
|
label: '区域面'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: FeaturesEnum.POINT,
|
||||||
|
label: '标注'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: FeaturesEnum.ROAD,
|
||||||
|
label: '道路'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: FeaturesEnum.BUILDING,
|
||||||
|
label: '建筑物'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const MarkerOptions = [
|
||||||
|
{
|
||||||
|
value: MarkerEnum.CIRCLE_MARKER,
|
||||||
|
label: '圆形标点'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: MarkerEnum.MARKER,
|
||||||
|
label: '定位标点'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: MarkerEnum.NONE,
|
||||||
|
label: '隐藏标点'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"markers": [
|
||||||
|
{
|
||||||
|
"name": "某某地市",
|
||||||
|
"value": 10,
|
||||||
|
"position": [116.300467, 39.907761]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "某某地市",
|
||||||
|
"value": 15,
|
||||||
|
"position": [116.400567, 39.908761]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "某某地市",
|
||||||
|
"value": 20,
|
||||||
|
"position": [116.200467, 39.937761]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const MapLayerConfig: ConfigType = {
|
||||||
|
key: 'MapLayer',
|
||||||
|
chartKey: 'VMapLayer',
|
||||||
|
conKey: 'VCMapLayer',
|
||||||
|
title: '图层管理',
|
||||||
|
category: ChatCategoryEnum.MAP,
|
||||||
|
categoryName: ChatCategoryEnumName.MAP,
|
||||||
|
package: PackagesCategoryEnum.CHARTS,
|
||||||
|
chartFrame: ChartFrameEnum.COMMON,
|
||||||
|
image: 'map-layer.png'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,539 @@
|
||||||
|
<template>
|
||||||
|
<div ref="vChartRef" >
|
||||||
|
<div class="layer-container" @click="handlerMap" :style="{'background-color':props.chartConfig.option.boxStyle.backgroundColor,'border-color':props.chartConfig.option.boxStyle.borderColor}">
|
||||||
|
<div class="title">
|
||||||
|
{{ props.chartConfig.option.boxStyle.title }}
|
||||||
|
</div>
|
||||||
|
<div class="layer-item-container">
|
||||||
|
<div v-for="(item,index) in handlerLayers" :key="index" style="color:#fff;">
|
||||||
|
<div class="layer-category">
|
||||||
|
<div class="arrow" @click="handnlerFoldGroupLayer(item)">
|
||||||
|
<CaretDownOutlined v-show="item.fold" />
|
||||||
|
<CaretRightOutlined v-show="!item.fold" />
|
||||||
|
</div>
|
||||||
|
<div class="layer-category-checkbox" :style="{'background':item.show ? '#00E832':'#fff'}" @click="handlerChangeAllLayer(item)">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="layer-category-name">
|
||||||
|
{{ item.name }}（{{item.children.length}}）
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer-item" v-for="(it,idx) in item.children" :key="idx" v-show="item.fold">
|
||||||
|
<div class="layer-checkbox" :style="{'background':it.show ? '#00E832':'#fff'}" @click="handlerChangeLayer(it,item)">
|
||||||
|
<!-- <CheckOutlined v-show="it.show" /> -->
|
||||||
|
</div>
|
||||||
|
<div class="layer-name" @click="handlerChangeLayer(it,item)">
|
||||||
|
{{ it.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, PropType, toRefs, watch,onMounted,nextTick } from 'vue'
|
||||||
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { useChartDataFetch } from '@/hooks'
|
||||||
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
|
import { MarkerEnum, ThemeEnum } from './config'
|
||||||
|
import { isArray } from '@/utils';
|
||||||
|
import axios from 'axios';
|
||||||
|
import { CaretDownOutlined, StarFilled, StarTwoTone,CheckOutlined,CaretRightOutlined } from '@ant-design/icons-vue';
|
||||||
|
|
||||||
|
import * as mars3d from "mars3d";
|
||||||
|
import { option } from '@/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRenderChart/barOptions'
|
||||||
|
|
||||||
|
let map: mars3d.Map; // 地图对象
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log("props123",props.chartConfig.option);
|
||||||
|
|
||||||
|
const layers = ref(null)
|
||||||
|
|
||||||
|
const handlerLayers = ref([]);
|
||||||
|
|
||||||
|
|
||||||
|
const handlerGetLayerTree = ()=>{
|
||||||
|
axios.get('http://221.2.83.254:9006/applicationMars/getApplicationInfo/feixian').then((res)=>{
|
||||||
|
layers.value = res.data.data
|
||||||
|
console.log("res",layers.value);
|
||||||
|
let configLayers = [];
|
||||||
|
let GEOSERVER_BASE_API = "http://221.2.83.254:9007/";
|
||||||
|
res.data.data.forEach((item, index) => {
|
||||||
|
let group = null;
|
||||||
|
group = {
|
||||||
|
id: parseInt(Math.random() * 10000000),
|
||||||
|
name: item.serverName,
|
||||||
|
type: "group",
|
||||||
|
fold:true,
|
||||||
|
show:false,
|
||||||
|
};
|
||||||
|
|
||||||
|
let layerGroup = group;
|
||||||
|
layerGroup.children = [];
|
||||||
|
configLayers.unshift(group);
|
||||||
|
if (item.children && item.children.length > 0) {
|
||||||
|
item.children.forEach((it, idx) => {
|
||||||
|
|
||||||
|
let attribute = JSON.parse(it.attribute);
|
||||||
|
|
||||||
|
// 处理根据字段分类渲染样式的图层
|
||||||
|
if(attribute && attribute.symbol && attribute.symbol.styleField && attribute.symbol.styleFieldOptions && Object.keys(attribute.symbol.styleFieldOptions).length>0){
|
||||||
|
// console.log(attribute.layers,attribute)
|
||||||
|
attribute.type = 'geojson';
|
||||||
|
if(attribute.layers){
|
||||||
|
attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+attribute.layers+"&maxFeatures=1000000&outputFormat=application%2Fjson";
|
||||||
|
}
|
||||||
|
|
||||||
|
// delete attribute.layers;
|
||||||
|
delete attribute.parameters;
|
||||||
|
delete attribute.highlight;
|
||||||
|
console.log("图层属性信息:",attribute.url,attribute);
|
||||||
|
|
||||||
|
|
||||||
|
if(!attribute.symbol.styleOptions){
|
||||||
|
attribute.symbol.styleOptions = {
|
||||||
|
"opacity": 0.8,
|
||||||
|
"color": "",
|
||||||
|
"width": 2,
|
||||||
|
"clampToGround": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
attribute.zIndex = 10000000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if(attribute.dynamic){
|
||||||
|
attribute.type = 'geojson';
|
||||||
|
if(attribute.layers){
|
||||||
|
attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+attribute.layers+"&maxFeatures=1000000&outputFormat=application%2Fjson";
|
||||||
|
attribute.symbol = {
|
||||||
|
type: "polyline",
|
||||||
|
styleOptions: {
|
||||||
|
clampToGround:true,
|
||||||
|
width: 5,
|
||||||
|
materialType: mars3d.MaterialType.LineFlow,
|
||||||
|
materialOptions: {
|
||||||
|
// color: Cesium.Color.CHARTREUSE,
|
||||||
|
image: "img/textures/line-color-yellow.png",
|
||||||
|
speed: 8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 设置标签文字偏移量
|
||||||
|
if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label){
|
||||||
|
attribute.symbol.styleOptions.label.pixelOffsetY = -40
|
||||||
|
let oldText = attribute.symbol.styleOptions.label.text;
|
||||||
|
attribute.symbol.styleOptions.label = {
|
||||||
|
text: oldText,
|
||||||
|
font_size: 14,
|
||||||
|
// color: Cesium.Color.AZURE,
|
||||||
|
outline: true,
|
||||||
|
// outlineColor: Cesium.Color.BLACK,
|
||||||
|
outlineWidth: 2,
|
||||||
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||||
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
// pixelOffset: new Cesium.Cartesian2(10, -25) // 偏移量
|
||||||
|
pixelOffsetY:-40
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
attribute.pid = group.id;
|
||||||
|
|
||||||
|
// 去掉所有图层点击选中样式
|
||||||
|
delete attribute.highlight;
|
||||||
|
|
||||||
|
// 如果不为空
|
||||||
|
if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label && attribute.symbol.styleOptions.label.text){
|
||||||
|
/**
|
||||||
|
* 图标标题显示情况：
|
||||||
|
key：字段中文名称，value：字段英文名称
|
||||||
|
* 1. key:value
|
||||||
|
* 2. key:value@key:value
|
||||||
|
* 3. key:value@,@key:value
|
||||||
|
* 4. @value
|
||||||
|
* 5. @value1@value2
|
||||||
|
* 6. @value1@,@value2
|
||||||
|
* 7. key:value1@value2
|
||||||
|
* */
|
||||||
|
let text = "";
|
||||||
|
if(attribute.symbol.styleOptions.label.text.match("@")){
|
||||||
|
let arr = attribute.symbol.styleOptions.label.text.split("@");
|
||||||
|
if(arr.length>0){
|
||||||
|
arr.forEach((item,index)=>{
|
||||||
|
if(item.match(":")){
|
||||||
|
let garr = item.split(":")
|
||||||
|
text = text+garr[0]+":{"+garr[1]+"}"
|
||||||
|
}else if(item.length==1){
|
||||||
|
text = text+item
|
||||||
|
}else if(item.length>1){
|
||||||
|
text = text+"{"+item+"}"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}else if(attribute.symbol.styleOptions.label.text.length>1 && attribute.symbol.styleOptions.label.text.match(":") ){
|
||||||
|
let garr = attribute.symbol.styleOptions.label.text.split(":")
|
||||||
|
text = text+garr[0]+":{"+garr[1]+"}"
|
||||||
|
}else if(attribute.symbol.styleOptions.label.text.length>1 && !attribute.symbol.styleOptions.label.text.match(":")){
|
||||||
|
text = "{"+attribute.symbol.styleOptions.label.text+"}";
|
||||||
|
}
|
||||||
|
attribute.symbol.styleOptions.label.text = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
let ipinfo = matchHttpIpPort(attribute.url);
|
||||||
|
|
||||||
|
if(ipinfo){ // 如果匹配得到则替换为配置文件中的
|
||||||
|
attribute.url = attribute.url.replace(ipinfo[0],GEOSERVER_BASE_API);
|
||||||
|
}else{ //如果没有匹配到则直接拼接
|
||||||
|
attribute.url = GEOSERVER_BASE_API+attribute.url
|
||||||
|
}
|
||||||
|
if(attribute.type == 'geojson'){
|
||||||
|
attribute.url = attribute.url + "&cql_filter=is_del%20=0"
|
||||||
|
}else if(attribute.type == 'wms'){
|
||||||
|
attribute.parameters.cql_filter="is_del=0"
|
||||||
|
}
|
||||||
|
|
||||||
|
if(attribute.name == '防火驿站'){
|
||||||
|
attribute.show = true;
|
||||||
|
}
|
||||||
|
configLayers.unshift(attribute);
|
||||||
|
attribute.show = attribute.show ? true : false;
|
||||||
|
|
||||||
|
layerGroup.children.push(attribute)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handlerLayers.value.push(layerGroup);
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("configlayers",configLayers);
|
||||||
|
// window.globalMap.setLayersOptions(configLayers);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const matchHttpIpPort = (url) => { // 匹配“ http://ip:port ”
|
||||||
|
const ipRegex = /^http\:\/\/\b(?:[0-9]{1,3}\.){3}[0-9]{1,3}\b\:\b[0-9]{1,5}\//;
|
||||||
|
const match = url.match(ipRegex)
|
||||||
|
if (match) {
|
||||||
|
return match;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const handlerChangeAllLayer = (group) =>{
|
||||||
|
if(group.show == false){
|
||||||
|
group.children?.forEach((item,index)=>{
|
||||||
|
item.show = true;
|
||||||
|
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
group.children?.forEach((item,index)=>{
|
||||||
|
item.show = false;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
group.show = !group.show;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerChangeLayer = (options,group)=>{
|
||||||
|
if(options.show == true){
|
||||||
|
group.show = false;
|
||||||
|
}
|
||||||
|
options.show = !options.show;
|
||||||
|
let layer = window.globalMap.getLayerById(options.id);
|
||||||
|
|
||||||
|
if(layer){
|
||||||
|
layer.show = !layer.show
|
||||||
|
}else{
|
||||||
|
if(options.type == "geojson"){
|
||||||
|
layer = new mars3d.layer.GeoJsonLayer(options);
|
||||||
|
layer.show = true;
|
||||||
|
}else if(options.type == "wms"){
|
||||||
|
layer = new mars3d.layer.WmsLayer(options);
|
||||||
|
layer.show = true;
|
||||||
|
}
|
||||||
|
window.globalMap.addLayer(layer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handnlerFoldGroupLayer = (item)=>{
|
||||||
|
item.fold = !item.fold;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ch = ()=>{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMap = ()=>{
|
||||||
|
|
||||||
|
}
|
||||||
|
let {
|
||||||
|
amapKey,
|
||||||
|
amapStyleKey,
|
||||||
|
amapLon,
|
||||||
|
amapLat,
|
||||||
|
amapZindex,
|
||||||
|
mapMarkerType,
|
||||||
|
lang,
|
||||||
|
amapStyleKeyCustom,
|
||||||
|
features,
|
||||||
|
viewMode,
|
||||||
|
showLabel,
|
||||||
|
pitch,
|
||||||
|
skyColor,
|
||||||
|
marker,
|
||||||
|
satelliteTileLayer,
|
||||||
|
roadNetTileLayer,
|
||||||
|
trafficTileLayer
|
||||||
|
} = toRefs(props.chartConfig.option.mapOptions)
|
||||||
|
|
||||||
|
let mapIns: any = null
|
||||||
|
let markers: any = []
|
||||||
|
let AMapIns: any = null
|
||||||
|
|
||||||
|
const vChartRef = ref<HTMLElement>()
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
handlerGetLayerTree();
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const isFirstLoad = ref(true);
|
||||||
|
const initMap = (newData: any) => {
|
||||||
|
// 第一次加载
|
||||||
|
if(isFirstLoad.value){
|
||||||
|
map = new mars3d.Map(vChartRef.value, newData);
|
||||||
|
}else{ // 之后更新
|
||||||
|
// map.setOptions(newData);
|
||||||
|
map.setSceneOptions(newData.scene);
|
||||||
|
}
|
||||||
|
isFirstLoad.value = false;
|
||||||
|
|
||||||
|
window.globalMap = map;
|
||||||
|
|
||||||
|
return null;
|
||||||
|
// 初始化
|
||||||
|
AMapLoader.load({
|
||||||
|
key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
|
||||||
|
version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
|
||||||
|
}).then(AMap => {
|
||||||
|
AMapIns = AMap
|
||||||
|
mapIns = new AMap.Map(vChartRef.value, {
|
||||||
|
resizeEnable: true,
|
||||||
|
zoom: amapZindex.value, // 地图显示的缩放级别
|
||||||
|
center: [amapLon.value, amapLat.value],
|
||||||
|
lang: lang.value,
|
||||||
|
features: features.value,
|
||||||
|
pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
|
||||||
|
skyColor: skyColor.value,
|
||||||
|
viewMode: viewMode.value, // 地图模式
|
||||||
|
showLabel: showLabel.value, // 是否显示地图文字标记
|
||||||
|
willReadFrequently: true
|
||||||
|
})
|
||||||
|
dataHandle(props.chartConfig.option.dataset)
|
||||||
|
|
||||||
|
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 => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
async option => {
|
||||||
|
let options = JSON.parse(JSON.stringify(props.chartConfig.option.mapOptions))
|
||||||
|
console.log("props.chartConfig.option.mapOptions",);
|
||||||
|
|
||||||
|
await nextTick();
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.chartConfig.option.dataset,
|
||||||
|
newData => {
|
||||||
|
try {
|
||||||
|
dataHandle(newData)
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: false
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 预览
|
||||||
|
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
|
stopWatch()
|
||||||
|
dataHandle(newData)
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.layer-container{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
padding:15px;
|
||||||
|
padding-top:0px;
|
||||||
|
padding-right:5px;
|
||||||
|
background:rgba(7,38,30,0.85);
|
||||||
|
border:1px solid #088538;
|
||||||
|
}
|
||||||
|
.layer-item-container{
|
||||||
|
width:100%;
|
||||||
|
height: calc( 100% - 50px);
|
||||||
|
overflow-y:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-container .title{
|
||||||
|
width:100%;
|
||||||
|
height:50px;
|
||||||
|
line-height:50px;
|
||||||
|
color:#CBE6CD;
|
||||||
|
font-size:16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-category{
|
||||||
|
width:100%;
|
||||||
|
height:36px;
|
||||||
|
color:#CBE6CD;
|
||||||
|
font-size:16px;
|
||||||
|
line-height:36px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow{
|
||||||
|
font-size:22px;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
.layer-category-checkbox{
|
||||||
|
width:14px;
|
||||||
|
height:14px;
|
||||||
|
background:#fff;
|
||||||
|
margin-top:11px;
|
||||||
|
cursor:pointer;
|
||||||
|
border-radius:2px;
|
||||||
|
}
|
||||||
|
.layer-category-name{
|
||||||
|
flex:auto;
|
||||||
|
text-indent: 12px;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-item{
|
||||||
|
width:100%;
|
||||||
|
height:24px;
|
||||||
|
line-height:24px;
|
||||||
|
font-size:14px;
|
||||||
|
color: #CBE6CD;
|
||||||
|
display:flex;
|
||||||
|
padding-left:40px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-checkbox{
|
||||||
|
width:14px;
|
||||||
|
height:14px;
|
||||||
|
background:#fff;
|
||||||
|
margin-top:5px;
|
||||||
|
cursor:pointer;
|
||||||
|
border-radius:2px;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layer-name{
|
||||||
|
flex:auto;
|
||||||
|
text-indent: 12px;
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue