地图弹窗修改

main
徐景良 2 weeks ago
parent 28b742fd23
commit 005425612f

@ -28,11 +28,11 @@
<script type="text/javascript" src="/monitor/monitorQX/EasyPlayer-element.min.js"></script>
<style>
/* .mars3d-template-content{
.mars3d-template-content{
background-image:url(/public/map/popup-background.png);
background-size:100% 128%;
padding:20px;
} */
padding:20px 40px;
}
</style>
</head>
<body>

@ -1,4 +1,6 @@
import * as mars3d from "mars3d";
import axios from 'axios'
import { c } from "naive-ui";
// 地图函数列表
export function mapFun() {
@ -770,6 +772,188 @@ export const funSelectOptions = [
}
];
export async function handlerGetLayerTree(){
let layers = [];
let handlerLayers = [];
await axios.get('http://221.2.83.254:9006/applicationMars/getApplicationInfo/feixian').then((res)=>{
layers = res.data.data
let configLayers = [];
let GEOSERVER_BASE_API = "http://221.2.83.254:9007/";
res.data.data.forEach((item, index) => {
let group:Object;
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){
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.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
}
}
// 设置PID
attribute.pid = group.id;
// 去掉所有图层点击选中样式
delete attribute.highlight;
// 如果不为空
if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label && attribute.symbol.styleOptions.label.text){
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"
attribute.zIndex = 1;
}
if(attribute.name == '防火驿站'){
attribute.show = true;
}
configLayers.unshift(attribute);
attribute.show = attribute.show ? true : false;
layerGroup.children.push(attribute);
});
}
handlerLayers.push(layerGroup);
});
})
return handlerLayers;
}
const matchHttpIpPort = (url) => {
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;
}
export const layerOptions = [
{
"id": 9180420,
@ -3477,155 +3661,6 @@ export const layerOptions = [
"zIndex": 10000000000,
"show": false
},
{
"id": 286,
"pid": 3445367,
"type": "geojson",
"name": "合并水源地-北部山区点",
"url": "http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ahebingshuiyuandibeibushan&maxFeatures=1000000&outputFormat=application%2Fjson&cql_filter=is_del%20=0",
"noCenter": true,
"center": {
"lat": 35.362453,
"lng": 118.066957,
"alt": 10918.8,
"heading": 7,
"pitch": -65.5,
"roll": 0
},
"popupOptions": "",
"symbol": {
"styleOptions": {
"image": "http://221.2.83.254:9012/styleImages/image/1777254607754702848.png",
"scale": 0.7,
"scaleByDistance": true,
"scaleByDistance_far": 20000,
"scaleByDistance_farValue": 0.5,
"scaleByDistance_near": 1000,
"scaleByDistance_nearValue": 1,
"verticalOrigin": 1,
"horizontalOrigin": 0,
"clampToGround": true,
"label": {
"text": "",
"font_size": 14,
"outline": true,
"outlineWidth": 2,
"pixelOffsetY": -40
}
},
"styleField": "qufen",
"styleFieldOptions": {
"水窖": {
"image": "http://221.2.83.254:9012/styleImages/image/1831978240888332288.png"
},
"": {
"image": "http://221.2.83.254:9012/styleImages/image/1831978240888332288.png"
},
"塘坝": {
"image": "http://221.2.83.254:9012/styleImages/image/1831978187679391744.png"
},
"山地河沟": {
"image": "http://221.2.83.254:9012/styleImages/image/1831978240888332288.png"
},
"大口井": {
"image": "http://221.2.83.254:9012/styleImages/image/1831978240888332288.png"
},
"蓄水池": {
"image": "http://221.2.83.254:9012/styleImages/image/1831978209967923200.png"
},
"自建水池": {
"image": "http://221.2.83.254:9012/styleImages/image/1831978240888332288.png"
},
"水库": {
"image": "http://221.2.83.254:9012/styleImages/image/1831978153894273024.png"
},
"备用水源地": {
"image": "http://221.2.83.254:9012/styleImages/image/1831978240888332288.png"
},
"河流": {
"image": "http://221.2.83.254:9012/styleImages/image/1831978229588877312.png"
}
}
},
"popup": [
{
"field": "xsl",
"name": "蓄水量"
},
{
"field": "mc",
"name": "名称"
},
{
"field": "qufen",
"name": "水源地分类"
}
],
"flyTo": false,
"zIndex": 10000000000,
"show": false
},
{
"id": 274,
"pid": 3445367,
"type": "geojson",
"name": "消防栓",
"url": "http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ashp_1714282387&maxFeatures=1000000&outputFormat=application%2Fjson&cql_filter=is_del%20=0",
"noCenter": true,
"center": {
"lat": 35.376128,
"lng": 118.036717,
"alt": 2779,
"heading": 1.3,
"pitch": -20.5,
"roll": 0
},
"popupOptions": "",
"symbol": {
"styleOptions": {
"image": "http://221.2.83.254:9012/styleImages/image/1881950736492072960.png",
"scale": 0.15,
"scaleByDistance": true,
"scaleByDistance_far": 20000,
"scaleByDistance_farValue": 0.5,
"scaleByDistance_near": 1000,
"scaleByDistance_nearValue": 1,
"verticalOrigin": 1,
"horizontalOrigin": 0,
"clampToGround": true,
"label": {
"text": "{weizhi}",
"font_size": 14,
"outline": true,
"outlineWidth": 2,
"pixelOffsetY": -40
}
},
"styleField": "",
"styleFieldOptions": {}
},
"popup": [
{
"field": "xuhao",
"name": "序号"
},
{
"field": "weizhi",
"name": "位置"
},
{
"field": "suoshudanwei",
"name": "所属单位"
},
{
"field": "sfzcsy",
"name": "是否正常使用"
}
],
"flyTo": false,
"zIndex": 0,
"show": false
},
{
"id": 305,
"pid": 3445367,
@ -7379,4 +7414,6 @@ export const layerOptions = [
}
]
}
]
]

@ -162,6 +162,7 @@
// =======
//
const handlerLoadFirePoint = (points: []) => {
console.log("points123123",points);
points?.forEach((item, index) => {
let graphicOptions = {
id: item.id,
@ -181,7 +182,15 @@
distanceDisplayCondition_near: 0,
},
},
popup: 'all',
popup: [
{ field: "id", name: "线索编号" },
{ field: "describe", name: "描述信息" },
{ field: "degreeType", name: "线索类型" },
{ field: "address", name: "地址位置" },
{ field: "reportTime", name: "上报时间" },
{ field: "lng", name: "经度" },
{ field: "lat", name: "纬度" }
],
// `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
// <div class="marsTiltPanel-wrap">
// <div class="area">

@ -1,9 +1,9 @@
<template>
<div class="go-title-03">
<div class="bannerbox">
<a-carousel autoplay dots-class="slick-dots slick-thumb" preview-disabled>
<div class="bannerbox" >
<a-carousel autoplay dots-class="slick-dots slick-thumb" preview-disabled v-if="imageLoading">
<div v-for="item in dataset.imgArr">
<a-image :src="getAssetsImg(item)" />
<a-image :src="item" />
</div>
</a-carousel>
@ -51,7 +51,7 @@ const {
dataset
} = toRefs(props.chartConfig.option)
const imageLoading = ref(false);
onMounted(()=>{
@ -88,6 +88,7 @@ onMounted(()=>{
}
console.log("props.chartConfig.option.dataset.imgArr",props.chartConfig.option.dataset.imgArr);
imageLoading.value = true;
props.chartConfig.option.dataset.data = data;
});
});

@ -25,6 +25,7 @@
//
const initPlugin = () => {
return null;
oWebControl = new window.WebControl({
szPluginContainer: 'playWnd-' + props.index + '-' + props.timestamp, // id
iServicePortStart: 15900, // 使

@ -56,7 +56,7 @@
},
{
"id": 490483936976911,
"title": "玉皇宫机库摄像头",
"title": "玉皇宫机库摄像头123",
"serialNumber": "http://box.wisestcity.com:8081/live/5.flv",
"manufacturer": "腾讯"
},

@ -17,6 +17,7 @@
//
const initPlugin = () => {
return null;
oWebControl = new window.WebControl({
szPluginContainer: 'playWnd' + props.timestamp, // id
iServicePortStart: 15900, // 使

@ -18,6 +18,8 @@
//
const initPlugin = () => {
return null;
oWebControl = new window.WebControl({
szPluginContainer: 'playWnd-' + props.index + '-' + props.timestamp, // id
iServicePortStart: 15900, // 使

@ -25,6 +25,7 @@
//
const initPlugin = () => {
return null;
oWebControl = new window.WebControl({
szPluginContainer: 'playWnd-' + props.index + '-' + props.timestamp, // id
iServicePortStart: 15900, // 使

@ -25,6 +25,7 @@
//
const initPlugin = () => {
return null;
oWebControl = new window.WebControl({
szPluginContainer: 'playWnd-' + props.index + '-' + props.timestamp, // id
iServicePortStart: 15900, // 使

@ -196,7 +196,17 @@
import { useTargetData } from '../../../../hooks/useTargetData.hook';
import { getMenuList } from '@/api/sys/menu';
import { projectListApi } from '@/api/path/project.api';
import { funSelectOptions, layerOptions } from '@/hooks/ceshiFun.hook';
import { funSelectOptions,handlerGetLayerTree } from '@/hooks/ceshiFun.hook';
const layerOptions = ref([]);
//
const getLayerOptions = async ()=>{
layerOptions.value = await handlerGetLayerTree();
}
getLayerOptions();
import { getLoad } from '@/api/sys/sysDataItemDetail';
const EventComponent = loadAsyncComponent(() => import('./EventComponent.vue'));

Loading…
Cancel
Save