merge
parent
1ab416ae30
commit
aa22add593
|
|
@ -53,6 +53,12 @@ export enum MarkerEnum {
|
|||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
boxStyle:{
|
||||
title:"",
|
||||
borderColor:"",
|
||||
backgroundColor:"",
|
||||
fontColor:"",
|
||||
},
|
||||
mapOptions:{
|
||||
"scene": {
|
||||
"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 {
|
||||
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 option = cloneDeep(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,85 +1,21 @@
|
|||
<template>
|
||||
<collapse-item name="地图场景" :expanded="true">
|
||||
<collapse-item name="组件样式" :expanded="true">
|
||||
|
||||
|
||||
<setting-item-box name="经度" :alone="true">
|
||||
<n-input-number v-model:value="optionData.mapOptions.scene.center.lng" :show-button="false" size="small">
|
||||
<template #suffix>°</template>
|
||||
</n-input-number>
|
||||
<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-input-number v-model:value="optionData.mapOptions.scene.center.lat" :show-button="false" size="small">
|
||||
<template #suffix>°</template>
|
||||
</n-input-number>
|
||||
<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-input-number v-model:value="optionData.mapOptions.scene.center.alt" :min="0" size="small"></n-input-number>
|
||||
<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-input-number v-model:value="optionData.mapOptions.scene.center.heading" :min="0" size="small"></n-input-number>
|
||||
</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 name="背景颜色" :alone="true">
|
||||
<n-color-picker size="small" v-model:value="optionData.boxStyle.backgroundColor"></n-color-picker>
|
||||
</setting-item-box>
|
||||
|
||||
</collapse-item>
|
||||
|
|
@ -138,10 +74,7 @@
|
|||
</setting-item-box>
|
||||
|
||||
</collapse-item>
|
||||
<!--
|
||||
<collapse-item name="底图图层" :expanded="true">
|
||||
|
||||
</collapse-item> -->
|
||||
|
||||
<collapse-item name="右键菜单" :expanded="true">
|
||||
|
||||
|
|
@ -156,14 +89,15 @@ import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, Fe
|
|||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
console.log("props.optionData",props.optionData);
|
||||
console.log("optionDatasss",props.optionData);
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<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">
|
||||
费县林业防火
|
||||
{{ props.chartConfig.option.boxStyle.title }}
|
||||
</div>
|
||||
<div class="layer-item-container">
|
||||
<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 handlerLayers = ref([]);
|
||||
|
|
@ -237,7 +239,7 @@ const handlerChangeAllLayer = (group) =>{
|
|||
if(group.show == false){
|
||||
group.children?.forEach((item,index)=>{
|
||||
item.show = true;
|
||||
|
||||
|
||||
})
|
||||
}else{
|
||||
group.children?.forEach((item,index)=>{
|
||||
|
|
@ -462,20 +464,21 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
|||
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% - 40px);
|
||||
height: calc( 100% - 50px);
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.layer-container .title{
|
||||
width:100%;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
color:#CBE6CD;
|
||||
font-size:16px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
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