Compare commits
2 Commits
7ac4db8b11
...
19e4ba43ad
| Author | SHA1 | Date |
|---|---|---|
 徐景良
|
19e4ba43ad | |
|
徐景良
|
39f0e2b2da |
|
|
@ -18,6 +18,14 @@
|
||||||
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/flv.min.1.6.3.js"></script>
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/flv.min.1.6.3.js"></script>
|
||||||
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/dash.all.min.4.4.1.js"></script>
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/dash.all.min.4.4.1.js"></script>
|
||||||
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.mars3d-template-content{
|
||||||
|
background-image:url(/public/map/popup-background.png);
|
||||||
|
background-size:100% 128%;
|
||||||
|
padding:20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="appProvider" style="display: none;"></div>
|
<div id="appProvider" style="display: none;"></div>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
|
|
@ -1,6 +1,7 @@
|
||||||
import * as mars3d from "mars3d";
|
import * as mars3d from "mars3d";
|
||||||
// 地图函数列表
|
// 地图函数列表
|
||||||
export function mapFun() {
|
export function mapFun() {
|
||||||
|
|
||||||
const ceshiClick = () => {
|
const ceshiClick = () => {
|
||||||
console.log('ceshi');
|
console.log('ceshi');
|
||||||
alert('ceshi');
|
alert('ceshi');
|
||||||
|
|
@ -12,15 +13,13 @@ export function mapFun() {
|
||||||
{"alt":4269.7,"heading":359.2,"pitch":-51.9});
|
{"alt":4269.7,"heading":359.2,"pitch":-51.9});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handlerMeasureSurfaceLength = async () => {
|
const handlerMeasureSurfaceLength = async () => {
|
||||||
const graphic = await window.measureTool.distanceSurface({
|
const graphic = await window.measureTool.distanceSurface({
|
||||||
showAddText: true,
|
showAddText: true,
|
||||||
exact: false
|
exact: false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handlerMeasureLenth = async () => {
|
const handlerMeasureLenth = async () => {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -77,7 +76,6 @@ export function mapFun() {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const handlerMeasureHeight = async () => {
|
const handlerMeasureHeight = async () => {
|
||||||
const graphic = await window.measureTool.height();
|
const graphic = await window.measureTool.height();
|
||||||
}
|
}
|
||||||
|
|
@ -412,7 +410,6 @@ export function mapFun() {
|
||||||
label:"测试火点",
|
label:"测试火点",
|
||||||
address:"遍历"
|
address:"遍历"
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let graphic = window.graphicLayer.getGraphicById(data.id);
|
let graphic = window.graphicLayer.getGraphicById(data.id);
|
||||||
|
|
@ -477,7 +474,7 @@ export function mapFun() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 显示图层
|
// xianshi
|
||||||
const handlerShowLayer = (params)=>{
|
const handlerShowLayer = (params)=>{
|
||||||
let layer = window.globalMap.getLayerById(params);
|
let layer = window.globalMap.getLayerById(params);
|
||||||
|
|
||||||
|
|
@ -549,24 +546,6 @@ export function mapFun() {
|
||||||
window.graphicLayer.addGraphic(graphic)
|
window.graphicLayer.addGraphic(graphic)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handlerMapPlot = async (params) => {
|
|
||||||
const graphic = await window.drawGraphicLayer.startDraw({
|
|
||||||
type: params.type,
|
|
||||||
style: params.style || {}
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log("标绘完成", graphic.toJSON())
|
|
||||||
}
|
|
||||||
|
|
||||||
const downloadJSON = (filename = "map_data.json") => {
|
|
||||||
const json = window.drawGraphicLayer.toJSON();
|
|
||||||
const blob = new Blob([JSON.stringify(json, null, 2)], { type: "application/json" });
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = URL.createObjectURL(blob);
|
|
||||||
link.download = filename;
|
|
||||||
link.click();
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
ceshiClick,
|
ceshiClick,
|
||||||
handlerFlyToPoint,
|
handlerFlyToPoint,
|
||||||
|
|
@ -604,9 +583,7 @@ export function mapFun() {
|
||||||
handlerRemoveLayer,
|
handlerRemoveLayer,
|
||||||
handlerFlyToLayer,
|
handlerFlyToLayer,
|
||||||
// 三维模型
|
// 三维模型
|
||||||
handlerAddModel,
|
handlerAddModel
|
||||||
handlerMapPlot,
|
|
||||||
downloadJSON
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -119,7 +119,6 @@ export const eventCommonHandler = (
|
||||||
// 地图事件联动
|
// 地图事件联动
|
||||||
for (let k = 0; k < elementList[j].elementId.length; k++) {
|
for (let k = 0; k < elementList[j].elementId.length; k++) {
|
||||||
if (componentList[i].id == elementList[j].elementId[k]) {
|
if (componentList[i].id == elementList[j].elementId[k]) {
|
||||||
console.log('elementList[j].funName', elementList[j]);
|
|
||||||
if (elementList[j].params) {
|
if (elementList[j].params) {
|
||||||
ceshiFunction[elementList[j].funName](elementList[j].params);
|
ceshiFunction[elementList[j].funName](elementList[j].params);
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -134,8 +133,10 @@ export const eventCommonHandler = (
|
||||||
EventBus.emit(elementList[j].elementId[k] + type, params);
|
EventBus.emit(elementList[j].elementId[k] + type, params);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
} else if (elementList[j].movement == 'graphic') {
|
} else if (elementList[j].movement == 'graphic') {
|
||||||
//
|
|
||||||
for (let k = 0; k < elementList[j].elementId.length; k++) {
|
for (let k = 0; k < elementList[j].elementId.length; k++) {
|
||||||
if (componentList[i].id == elementList[j].elementId[k]) {
|
if (componentList[i].id == elementList[j].elementId[k]) {
|
||||||
EventBus.emit(elementList[j].elementId[k] + type, params);
|
EventBus.emit(elementList[j].elementId[k] + type, params);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,749 @@
|
||||||
|
import * as mars3d from "mars3d";
|
||||||
|
// 地图函数列表
|
||||||
|
export function mapFun() {
|
||||||
|
|
||||||
|
const ceshiClick = () => {
|
||||||
|
console.log('ceshi');
|
||||||
|
alert('ceshi');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据坐标点跳转位置
|
||||||
|
const handlerFlyToPoint = (params) => {
|
||||||
|
window.globalMap.flyToPoint([118.000666,35.11987],
|
||||||
|
{"alt":4269.7,"heading":359.2,"pitch":-51.9});
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasureSurfaceLength = async () => {
|
||||||
|
const graphic = await window.measureTool.distanceSurface({
|
||||||
|
showAddText: true,
|
||||||
|
exact: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasureLenth = async () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasureLength = async () => {
|
||||||
|
const graphic = await window.measureTool.distance({
|
||||||
|
showAddText: true,
|
||||||
|
label: {
|
||||||
|
type: "div",
|
||||||
|
updateText: function (text, graphic) {
|
||||||
|
graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`
|
||||||
|
},
|
||||||
|
html: `<div class="marsGreenGradientPnl" ></div>`,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasureSurfaceArea = async () => {
|
||||||
|
const graphic = await window.measureTool.areaSurface({
|
||||||
|
style: {
|
||||||
|
color: "#ffff00"
|
||||||
|
},
|
||||||
|
splitNum: 10, // step插值分割的个数
|
||||||
|
exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasureArea = async () => {
|
||||||
|
const graphic = await window.measureTool.area({
|
||||||
|
style: {
|
||||||
|
color: '#00fff2',
|
||||||
|
opacity: 0.4,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: '#fafa5a',
|
||||||
|
outlineWidth: 1,
|
||||||
|
clampToGround: false //贴地
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasurePoint = async () => {
|
||||||
|
const graphic = await window.measureTool.point({
|
||||||
|
popupOptions: {
|
||||||
|
pointerEvents: false
|
||||||
|
},
|
||||||
|
popup: function (point, event) {
|
||||||
|
return `<div class="mars3d-template-title">位置信息</div>
|
||||||
|
<div class="mars3d-template-content">
|
||||||
|
<div><label>经度</label>${point.lng}</div>
|
||||||
|
<div><label>纬度</label>${point.lat}</div>
|
||||||
|
<div><label>海拔</label>${point.alt}米</div>
|
||||||
|
</div>`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerMeasureHeight = async () => {
|
||||||
|
const graphic = await window.measureTool.height();
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerClearMeasure = () => {
|
||||||
|
window.measureTool.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerDrawPolygon = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "polygon",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerDrawDoubleArrow = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "doubleArrow",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerDrawAttackArrow = async () =>{
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "attackArrow",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerDrawCloseVurve = async ()=>{
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "closeVurve",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerClearDraw = async ()=>{
|
||||||
|
window.drawGraphicLayer.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerDrawRectangle = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "rectangle" ,
|
||||||
|
style: {
|
||||||
|
color: "#ffff00",
|
||||||
|
opacity: 0.6,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handlerDrawBrushLine =async ()=> {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "brushLine",
|
||||||
|
style: {
|
||||||
|
color: "#ffff00",
|
||||||
|
width: 3,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerDrawLine =async () => {
|
||||||
|
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "polylineP",
|
||||||
|
style: {
|
||||||
|
color: "#ffff00",
|
||||||
|
width: 3,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log("标绘完成", graphic.toJSON())
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const handlerDrawPoint= async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "pointP",
|
||||||
|
style: {
|
||||||
|
pixelSize: 12,
|
||||||
|
color: "#3388ff",
|
||||||
|
label: {
|
||||||
|
// 不需要文字时，去掉label配置即可
|
||||||
|
text: "可以同时支持文字",
|
||||||
|
font_size: 20,
|
||||||
|
color: "#ffffff",
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#000000",
|
||||||
|
pixelOffsetY: -20
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log("标绘完成", graphic.toJSON())
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 矢量坐标点控制
|
||||||
|
|
||||||
|
const handlerGetPoint = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.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 = () => {
|
||||||
|
|
||||||
|
let data = {
|
||||||
|
id:10000001,
|
||||||
|
position:{
|
||||||
|
lat:35.451451,
|
||||||
|
lng:118.0804257,
|
||||||
|
},
|
||||||
|
image:{
|
||||||
|
generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
|
||||||
|
activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
|
||||||
|
},
|
||||||
|
attribute:{
|
||||||
|
label:"测试火点",
|
||||||
|
address:"遍历"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let graphicOptions = {
|
||||||
|
id:data.id,
|
||||||
|
position: [parseFloat(data.position.lng), parseFloat(data.position.lat)],
|
||||||
|
style: {
|
||||||
|
image: data.image.generalIcon,
|
||||||
|
clampToGround: true,
|
||||||
|
scale: 0.5,
|
||||||
|
label: {
|
||||||
|
text: data.attribute.label,
|
||||||
|
font_size: 14,
|
||||||
|
color: "#ffffff",
|
||||||
|
pixelOffsetY: 10,
|
||||||
|
distanceDisplayCondition: true,
|
||||||
|
distanceDisplayCondition_far: 500000,
|
||||||
|
distanceDisplayCondition_near: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
popup: `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||||
|
<div class="marsTiltPanel-wrap">
|
||||||
|
<div class="area">
|
||||||
|
<div class="arrow-lt"></div>
|
||||||
|
<div class="b-t"></div>
|
||||||
|
<div class="b-r"></div>
|
||||||
|
<div class="b-b"></div>
|
||||||
|
<div class="b-l"></div>
|
||||||
|
<div class="arrow-rb"></div>
|
||||||
|
<div class="label-wrap">
|
||||||
|
<div class="title">火点信息</div>
|
||||||
|
<div class="label-content">
|
||||||
|
<div class="data-li">
|
||||||
|
<div class="data-label">火点地址：${data.attribute.address}</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-li">
|
||||||
|
<div class="data-label">上报时间：</div>
|
||||||
|
<div class="data-value"><span id="lablYeWei" class="label-num">2025-2-11 12:00:00</span><span class="label-unit"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="data-li">
|
||||||
|
<div class="data-value">
|
||||||
|
<span id="lablCSFM3" onclick="aroundYuAn([${data.position.lng},${data.position.lat}])" class="label-tag data-value-status-2" >防灭火资源</span>
|
||||||
|
<span id="lablCSFM2" onclick="delFirePoint(${data.id})" class="label-tag data-value-status-3" title="删除火点">删除火点</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="b-t-l"></div>
|
||||||
|
<div class="b-b-r"></div>
|
||||||
|
</div>
|
||||||
|
<div class="arrow" ></div>
|
||||||
|
</div>`,
|
||||||
|
popupOptions: {
|
||||||
|
offsetY: -30,
|
||||||
|
template: "{content}",
|
||||||
|
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||||
|
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
let graphic = window.graphicLayer.getGraphicById(data.id);
|
||||||
|
|
||||||
|
if(graphic){
|
||||||
|
graphic.setStyleOptions(graphicOptions);
|
||||||
|
}else{
|
||||||
|
graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
|
||||||
|
window.graphicLayer.addGraphic(graphic);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const handlerShowEntity = () => {
|
||||||
|
let data = {
|
||||||
|
id:10000001,
|
||||||
|
position:{
|
||||||
|
lat:35.451451,
|
||||||
|
lng:118.0804257,
|
||||||
|
},
|
||||||
|
image:{
|
||||||
|
generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
|
||||||
|
activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
|
||||||
|
},
|
||||||
|
attribute:{
|
||||||
|
label:"测试火点",
|
||||||
|
address:"遍历"
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
let graphic = window.graphicLayer.getGraphicById(data.id);
|
||||||
|
if(graphic){
|
||||||
|
graphic.show = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerHiddenEntity = () => {
|
||||||
|
let data = {
|
||||||
|
id:10000001,
|
||||||
|
position:{
|
||||||
|
lat:35.451451,
|
||||||
|
lng:118.0804257,
|
||||||
|
},
|
||||||
|
image:{
|
||||||
|
generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
|
||||||
|
activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
|
||||||
|
},
|
||||||
|
attribute:{
|
||||||
|
label:"测试火点",
|
||||||
|
address:"遍历"
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
let graphic = window.graphicLayer.getGraphicById(data.id);
|
||||||
|
if(graphic){
|
||||||
|
graphic.show = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const handlerRemoveEntity = () => {
|
||||||
|
|
||||||
|
let data = {
|
||||||
|
id:10000001,
|
||||||
|
position:{
|
||||||
|
lat:35.451451,
|
||||||
|
lng:118.0804257,
|
||||||
|
},
|
||||||
|
image:{
|
||||||
|
generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
|
||||||
|
activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
|
||||||
|
},
|
||||||
|
attribute:{
|
||||||
|
label:"测试火点",
|
||||||
|
address:"遍历"
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
let graphic = window.graphicLayer.getGraphicById(data.id);
|
||||||
|
if(graphic){
|
||||||
|
graphicLayer.removeGraphic(graphic);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerFlyToEntity = () => {
|
||||||
|
|
||||||
|
let data = {
|
||||||
|
id:10000001,
|
||||||
|
position:{
|
||||||
|
lat:35.451451,
|
||||||
|
lng:118.0804257,
|
||||||
|
},
|
||||||
|
image:{
|
||||||
|
generalIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
|
||||||
|
activeIcon:"http://221.2.83.254:9012/styleImages/image/1777249374668402688.png",
|
||||||
|
},
|
||||||
|
attribute:{
|
||||||
|
label:"测试火点",
|
||||||
|
address:"遍历"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let graphic = window.graphicLayer.getGraphicById(data.id);
|
||||||
|
|
||||||
|
if(graphic){
|
||||||
|
|
||||||
|
// if(data.image.activeIcon){
|
||||||
|
// grasphic.setStyle({
|
||||||
|
// image:data.image.activeIcon
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
|
window.globalMap.flyToGraphic(graphic);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空所有适量图标
|
||||||
|
const handlerClearEntityLayer = () => {
|
||||||
|
window.graphicLayer.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏所有矢量图标
|
||||||
|
const handlerHiddenEntityLayer = ()=> {
|
||||||
|
window.graphicLayer.show = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerShowEntityLayer = () => {
|
||||||
|
window.graphicLayer.show = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图层控制类
|
||||||
|
|
||||||
|
// 加载图层
|
||||||
|
const handlerAddLayer = (params)=>{
|
||||||
|
|
||||||
|
let data = null;
|
||||||
|
layerOptions?.forEach((item,index)=>{
|
||||||
|
item?.children?.forEach((it,idx)=>{
|
||||||
|
if(it.id == params){
|
||||||
|
data = it;
|
||||||
|
data.show = true;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
let layer = null;
|
||||||
|
if(data.type == "wms"){
|
||||||
|
layer = new mars3d.layer.WmsLayer(data)
|
||||||
|
}else if(data.type == "geojson"){
|
||||||
|
layer = new mars3d.layer.GeoJsonLayer(data);
|
||||||
|
}
|
||||||
|
window.globalMap.addLayer(layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏图层
|
||||||
|
const handlerHiddenLayer = (params)=>{
|
||||||
|
let layer = window.globalMap.getLayerById(params);
|
||||||
|
if(layer){
|
||||||
|
layer.show = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// xianshi
|
||||||
|
const handlerShowLayer = (params)=>{
|
||||||
|
let layer = window.globalMap.getLayerById(params);
|
||||||
|
|
||||||
|
if(layer){
|
||||||
|
layer.show = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示隐藏切换图层
|
||||||
|
const handlerToggleLayer = (params) => {
|
||||||
|
let layer = window.globalMap.getLayerById(params);
|
||||||
|
if(window.globalMap.hasLayer(layer)){
|
||||||
|
layer.show = !layer.show;
|
||||||
|
}else{
|
||||||
|
handlerAddLayer(params);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移除图层
|
||||||
|
const handlerRemoveLayer = ()=>{
|
||||||
|
let layer = window.globalMap.getLayerById(4460);
|
||||||
|
|
||||||
|
if(layer){
|
||||||
|
window.globalMap.removeLayer(layer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定位到图层
|
||||||
|
const handlerFlyToLayer = ()=>{
|
||||||
|
let layer = window.globalMap.getLayerById(4460);
|
||||||
|
|
||||||
|
if(layer){
|
||||||
|
layer.flyTo();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 三维模型
|
||||||
|
const handlerAddModel = ()=>{
|
||||||
|
// {"lat":35.4422,"lng":117.985466,"alt":2070.2,"heading":1.1,"pitch":-87.1}
|
||||||
|
const graphic = new mars3d.graphic.ModelEntity({
|
||||||
|
name:"消防车",
|
||||||
|
position: [117.985466, 35.4422, 11.34],
|
||||||
|
style: {
|
||||||
|
url: "http://221.2.83.254:9010/cartoon_fire_truck/xiaofangche.gltf",
|
||||||
|
scale: 20,
|
||||||
|
minimumPixelSize: 50,
|
||||||
|
heading: 90,
|
||||||
|
distanceDisplayCondition: true,
|
||||||
|
distanceDisplayCondition_near: 0,
|
||||||
|
distanceDisplayCondition_far: 10000,
|
||||||
|
distanceDisplayPoint: {
|
||||||
|
// 当视角距离超过一定距离(distanceDisplayCondition_far定义的) 后显示为点对象的样式
|
||||||
|
color: "#00ff00",
|
||||||
|
pixelSize: 8
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
text: "显示信息",
|
||||||
|
font_size: 18,
|
||||||
|
color: "#ffffff",
|
||||||
|
pixelOffsetY: -50,
|
||||||
|
distanceDisplayCondition: true,
|
||||||
|
distanceDisplayCondition_far: 10000,
|
||||||
|
distanceDisplayCondition_near: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
attr: { remark: "示例1" }
|
||||||
|
})
|
||||||
|
|
||||||
|
window.graphicLayer.addGraphic(graphic)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
ceshiClick,
|
||||||
|
handlerFlyToPoint,
|
||||||
|
handlerAddEntity,
|
||||||
|
handlerMeasureSurfaceLength,
|
||||||
|
handlerMeasureLength,
|
||||||
|
handlerMeasureSurfaceArea,
|
||||||
|
handlerMeasureArea,
|
||||||
|
handlerMeasurePoint,
|
||||||
|
handlerMeasureHeight,
|
||||||
|
handlerClearMeasure,
|
||||||
|
handlerDrawPolygon,
|
||||||
|
handlerDrawDoubleArrow,
|
||||||
|
handlerDrawAttackArrow,
|
||||||
|
handlerDrawCloseVurve,
|
||||||
|
handlerDrawBrushLine,
|
||||||
|
handlerDrawLine,
|
||||||
|
handlerDrawPoint,
|
||||||
|
handlerDrawRectangle,
|
||||||
|
handlerClearDraw,
|
||||||
|
// 矢量操作
|
||||||
|
handlerHiddenEntity,
|
||||||
|
handlerShowEntity,
|
||||||
|
handlerRemoveEntity,
|
||||||
|
handlerFlyToEntity,
|
||||||
|
// 图层操作
|
||||||
|
handlerClearEntityLayer,
|
||||||
|
handlerHiddenEntityLayer,
|
||||||
|
handlerShowEntityLayer,
|
||||||
|
// 图层控制类
|
||||||
|
handlerAddLayer,
|
||||||
|
handlerHiddenLayer,
|
||||||
|
handlerShowLayer,
|
||||||
|
handlerToggleLayer,
|
||||||
|
handlerRemoveLayer,
|
||||||
|
handlerFlyToLayer,
|
||||||
|
// 三维模型
|
||||||
|
handlerAddModel
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 地图函数列表options
|
||||||
|
export const funSelectOptions = [
|
||||||
|
{
|
||||||
|
// 事件名称（用于选择显示）
|
||||||
|
label: 'ceshi点击',
|
||||||
|
// 事件名(用于触发)
|
||||||
|
value: 'ceshiClick',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"根据坐标定位地图视角",
|
||||||
|
value: 'handlerFlyToPoint'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"添加任意类型图层",
|
||||||
|
value: 'handlerAddLayer',
|
||||||
|
group:"layer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"隐藏指定图层",
|
||||||
|
value: 'handlerHiddenLayer',
|
||||||
|
group:"layer"
|
||||||
|
},{
|
||||||
|
label:"显示指定图层",
|
||||||
|
value: 'handlerShowLayer',
|
||||||
|
group:"layer"
|
||||||
|
},{
|
||||||
|
label:"显示隐藏切换图层",
|
||||||
|
value: 'handlerToggleLayer',
|
||||||
|
group:"layer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"删除指定图层",
|
||||||
|
value: 'handlerRemoveLayer',
|
||||||
|
group:"layer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"跳转到指定图层",
|
||||||
|
value: 'handlerFlyToLayer',
|
||||||
|
group:"layer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"添加单个矢量数据",
|
||||||
|
value: 'handlerAddEntity',
|
||||||
|
group:"entity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"隐藏单个矢量数据",
|
||||||
|
value:"handlerHiddenEntity",
|
||||||
|
group:"entity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"显示单个矢量数据",
|
||||||
|
value:"handlerShowEntity",
|
||||||
|
group:"entity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"移除单个矢量数据",
|
||||||
|
value:"handlerRemoveEntity",
|
||||||
|
group:"entity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"定位和高亮矢量数据",
|
||||||
|
value:"handlerFlyToEntity",
|
||||||
|
group:"entity"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"清除全部矢量数据",
|
||||||
|
value:"handlerClearEntityLayer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"隐藏全部矢量数据",
|
||||||
|
value:"handlerHiddenEntityLayer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"显示全部矢量数据",
|
||||||
|
value:"handlerShowEntityLayer"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"点击地图拾取坐标",
|
||||||
|
value:"handlerGetPoint"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制贴地线",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制图标点",
|
||||||
|
value:"handlerDrawPoint",
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制贴地自由线",
|
||||||
|
value:"handlerDrawBrushLine",
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"军事标绘单箭头",
|
||||||
|
value:"handlerDrawAttackArrow",
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制闭合曲面",
|
||||||
|
value:"handlerDrawCloseVurve",
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制贴地矩形",
|
||||||
|
value:"handlerDrawRectangle",
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制贴地面",
|
||||||
|
value:"handlerDrawPolygon",
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"清除图层绘制",
|
||||||
|
value:"handlerClearDraw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"贴地距离测量",
|
||||||
|
value:"handlerMeasureSurfaceLength"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"绘制自由线",
|
||||||
|
value:"drawBrushLine",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"军事标绘双箭头",
|
||||||
|
value:"handlerDrawDoubleArrow"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"空间距离测量",
|
||||||
|
value:"handlerMeasureLength"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"贴地面积测量",
|
||||||
|
value:"handlerMeasureSurfaceArea"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"水平面积测量",
|
||||||
|
value:"handlerMeasureArea"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"坐标点位测量",
|
||||||
|
value:"handlerMeasurePoint"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"高度差测量",
|
||||||
|
value:"handlerMeasureHeight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"清空测量数据",
|
||||||
|
value:"handlerClearMeasure"
|
||||||
|
},{
|
||||||
|
label:"添加三维模型",
|
||||||
|
value:"handlerAddModel"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
@ -0,0 +1,560 @@
|
||||||
|
import * as mars3d from "mars3d";
|
||||||
|
// 地图函数列表
|
||||||
|
export function mapFun() {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 点标绘
|
||||||
|
* */
|
||||||
|
|
||||||
|
|
||||||
|
// 标注文本
|
||||||
|
const handlerDrawLabel = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type:"label" ,
|
||||||
|
style: {
|
||||||
|
text: "标注文字",
|
||||||
|
color: "#0081c2",
|
||||||
|
font_size: 30,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点+标注文本
|
||||||
|
const handlerDrawPoint = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "point",
|
||||||
|
style: {
|
||||||
|
pixelSize: 12,
|
||||||
|
color: "#3388ff",
|
||||||
|
label: {
|
||||||
|
text: "标注文本",
|
||||||
|
font_size: 20,
|
||||||
|
color: "#ffffff",
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#000000",
|
||||||
|
pixelOffsetY: -20
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlerDrawIconPoint = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type:"billboard",
|
||||||
|
style: {
|
||||||
|
image: "https://data.mars3d.cn/img/marker/mark-red.png",
|
||||||
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||||
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
label: {
|
||||||
|
text: "可以同时支持文字",
|
||||||
|
font_size: 26,
|
||||||
|
color: "#ffffff",
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#000000",
|
||||||
|
pixelOffsetY: -60
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 空间标绘
|
||||||
|
* */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 贴地标绘
|
||||||
|
* */
|
||||||
|
|
||||||
|
// 贴地线
|
||||||
|
const handlerDrawLine =async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "polylineP",
|
||||||
|
style: {
|
||||||
|
color: "#ffff00",
|
||||||
|
width: 3,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 贴地曲线
|
||||||
|
const handlerDrawCurve = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "polylineP",
|
||||||
|
style: {
|
||||||
|
color: "#ffff00",
|
||||||
|
width: 3,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 贴地自由线
|
||||||
|
const handlerDrawBrushLine =async ()=> {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "brushLine",
|
||||||
|
style: {
|
||||||
|
color: "#ffff00",
|
||||||
|
width: 3,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 贴地面
|
||||||
|
const handlerDrawPolygon = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "polygon",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 贴地矩形
|
||||||
|
const handlerDrawRectangle = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "rectangle" ,
|
||||||
|
style: {
|
||||||
|
color: "#ffff00",
|
||||||
|
opacity: 0.6,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 贴地圆形
|
||||||
|
const handlerDrawCircle = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "circle" ,
|
||||||
|
style: {
|
||||||
|
color: "#ffff00",
|
||||||
|
opacity: 0.6,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 军事标绘
|
||||||
|
* */
|
||||||
|
|
||||||
|
// 粗直箭头
|
||||||
|
const handlerDrawFineArrow = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "fineArrow",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 粗单尖直箭头
|
||||||
|
const handlerDrawStraightArrow = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "straightArrow",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 燕尾直箭头
|
||||||
|
const handlerDrawFineArrowYW = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "fineArrowYW",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 攻击箭头
|
||||||
|
const handlerDrawAttackArrow = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "attackArrow",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 平尾攻击箭头
|
||||||
|
const handlerDrawAttackArrowPW = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "attackArrowPW",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 燕尾攻击箭头
|
||||||
|
const handlerDrawAttackArrowYW = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "attackArrowYW",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 钳击箭头
|
||||||
|
const handlerDrawDoubleArrow = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "doubleArrow",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 闭合曲面
|
||||||
|
const handlerDrawCloseVurve = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "closeVurve",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 集结地
|
||||||
|
const handlerDrawGatheringPlace = async () => {
|
||||||
|
const graphic = await window.drawGraphicLayer.startDraw({
|
||||||
|
type: "gatheringPlace",
|
||||||
|
style: {
|
||||||
|
color: "#3388ff",
|
||||||
|
opacity: 0.5,
|
||||||
|
outline: true,
|
||||||
|
outlineColor: "#ffffff",
|
||||||
|
outlineWidth: 2.0,
|
||||||
|
clampToGround:true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 标绘操作
|
||||||
|
* */
|
||||||
|
|
||||||
|
// 清除标绘
|
||||||
|
const handlerDrawClear = async ()=>{
|
||||||
|
window.drawGraphicLayer.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出GeoJSON
|
||||||
|
const handlerDrawExportGeoJSON = () => {
|
||||||
|
window.drawGraphicLayer.toGeoJSON();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导入GeoJSON
|
||||||
|
const handlerDrawImportGeoJSON = (geojson) => {
|
||||||
|
window.drawGraphicLayer.loadGeoJSON(geojson);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 抛出函数
|
||||||
|
return {
|
||||||
|
|
||||||
|
// 图标标绘
|
||||||
|
handlerDrawLabel,
|
||||||
|
handlerDrawPoint,
|
||||||
|
handlerDrawIconPoint,
|
||||||
|
|
||||||
|
// 平面标绘
|
||||||
|
handlerDrawPolygon,
|
||||||
|
|
||||||
|
// 军事标绘
|
||||||
|
handlerDrawDoubleArrow,
|
||||||
|
handlerDrawAttackArrow,
|
||||||
|
|
||||||
|
handlerDrawCloseVurve,
|
||||||
|
handlerDrawBrushLine,
|
||||||
|
handlerDrawLine,
|
||||||
|
handlerDrawPoint,
|
||||||
|
handlerDrawRectangle,
|
||||||
|
handlerClearDraw,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const funSelectOptions = [
|
||||||
|
|
||||||
|
// 点标绘
|
||||||
|
{
|
||||||
|
label:"文字",
|
||||||
|
value:"handlerDrawLabel",
|
||||||
|
cate:"point",
|
||||||
|
cateName:"点标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"点",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
cate:"point",
|
||||||
|
cateName:"点标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"点（带注记）",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
cate:"point",
|
||||||
|
cateName:"点标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"图标点(带注记)",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
cate:"point",
|
||||||
|
cateName:"点标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 二维空间标绘
|
||||||
|
{
|
||||||
|
label:"线",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
cate:"plane",
|
||||||
|
cateName:"二维空间"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"自由线",
|
||||||
|
value:"handlerDrawBrushLine",
|
||||||
|
cate:"plane",
|
||||||
|
cateName:"二维空间"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"面",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
cate:"plane",
|
||||||
|
cateName:"二维空间"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"圆",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
cate:"plane",
|
||||||
|
cateName:"二维空间"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"矩形",
|
||||||
|
value:"handlerDrawRectangle",
|
||||||
|
cate:"plane",
|
||||||
|
cateName:"二维空间"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"圆",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
cate:"plane",
|
||||||
|
cateName:"二维空间"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"曲线",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
cate:"plane",
|
||||||
|
cateName:"二维空间"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 二维贴地标绘
|
||||||
|
{
|
||||||
|
label:"线",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
cate:"ground",
|
||||||
|
cateName:"二维贴地"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"曲线",
|
||||||
|
value:"handlerDrawCurve",
|
||||||
|
cate:"ground",
|
||||||
|
cateName:"二维贴地"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"自由线",
|
||||||
|
value:"handlerDrawBrushLine",
|
||||||
|
cate:"ground",
|
||||||
|
cateName:"二维贴地"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"面",
|
||||||
|
value:"handlerDrawLine",
|
||||||
|
cate:"ground",
|
||||||
|
cateName:"二维贴地"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"矩形",
|
||||||
|
value:"handlerDrawRectangle",
|
||||||
|
cate:"ground",
|
||||||
|
cateName:"二维贴地"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"圆",
|
||||||
|
value:"handlerDrawCircle",
|
||||||
|
cate:"ground",
|
||||||
|
cateName:"二维贴地"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 军事标绘
|
||||||
|
{
|
||||||
|
label:"粗直箭头",
|
||||||
|
value:"handlerDrawFineArrow",
|
||||||
|
cate:"army",
|
||||||
|
cateName:"军事标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"粗单尖直箭头",
|
||||||
|
value:"handlerDrawStraightArrow",
|
||||||
|
cate:"army",
|
||||||
|
cateName:"军事标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"燕尾直箭头",
|
||||||
|
value:"handlerDrawFineArrowYW",
|
||||||
|
cate:"army",
|
||||||
|
cateName:"军事标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"攻击箭头",
|
||||||
|
value:"handlerDrawAttackArrow",
|
||||||
|
cate:"army",
|
||||||
|
cateName:"军事标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"平尾攻击箭头",
|
||||||
|
value:"handlerDrawAttackArrowPW",
|
||||||
|
cate:"army",
|
||||||
|
cateName:"军事标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"燕尾攻击箭头",
|
||||||
|
value:"handlerDrawAttackArrowYW",
|
||||||
|
cate:"army",
|
||||||
|
cateName:"军事标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"钳击箭头",
|
||||||
|
value:"handlerDrawDoubleArrow",
|
||||||
|
cate:"army",
|
||||||
|
cateName:"军事标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"闭合曲面",
|
||||||
|
value:"handlerDrawCloseVurve",
|
||||||
|
cate:"army",
|
||||||
|
cateName:"军事标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"集结地",
|
||||||
|
value:"handlerDrawGatheringPlace",
|
||||||
|
cate:"army",
|
||||||
|
cateName:"军事标绘"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
// 标绘操作
|
||||||
|
{
|
||||||
|
label:"清除标绘",
|
||||||
|
value:"handlerDrawClear",
|
||||||
|
cate:"operate",
|
||||||
|
cateName:"标绘操作"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"导出GeoJSON",
|
||||||
|
value:"handlerDrawExportGeoJSON",
|
||||||
|
cate:"operate",
|
||||||
|
cateName:"标绘操作"
|
||||||
|
group:"draw"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:"导入GeoJSON",
|
||||||
|
value:"handlerDrawImportGeoJSON",
|
||||||
|
cate:"operate",
|
||||||
|
cateName:"标绘操作"
|
||||||
|
group:"draw"
|
||||||
|
}
|
||||||
|
|
||||||
|
];
|
||||||
|
|
@ -32,7 +32,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
@ -53,8 +52,6 @@ import { EventBus } from '@/utils/eventBus';
|
||||||
|
|
||||||
let map: mars3d.Map; // 地图对象
|
let map: mars3d.Map; // 地图对象
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
chartConfig: {
|
chartConfig: {
|
||||||
type: Object as PropType<CreateComponentType>,
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
|
@ -62,7 +59,6 @@ const props = defineProps({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
const layers = ref(null)
|
const layers = ref(null)
|
||||||
|
|
||||||
const handlerLayers:any = ref([]);
|
const handlerLayers:any = ref([]);
|
||||||
|
|
@ -232,7 +228,7 @@ const handlerGetLayerTree = ()=>{
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log("configlayers",handlerLayers.value);
|
console.log("configlayers",handlerLayers.value);
|
||||||
window.globalMap.setLayersOptions(configLayers);
|
// window.globalMap.setLayersOptions(configLayers);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -319,11 +315,9 @@ const vChartRef = ref<HTMLElement>()
|
||||||
|
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
handlerGetLayerTree();
|
handlerGetLayerTree();
|
||||||
|
|
||||||
EventBus.on(props.chartConfig.id + 'GraphicClick', (data) => {
|
EventBus.on(props.chartConfig.id + 'GraphicClick', (data) => {
|
||||||
console.log('data', data);
|
console.log('data', data);
|
||||||
});
|
});
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -435,10 +429,7 @@ const stopWatch = watch(
|
||||||
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();
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true,
|
immediate: true,
|
||||||
|
|
@ -446,9 +437,6 @@ const stopWatch = watch(
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.chartConfig.option.dataset,
|
() => props.chartConfig.option.dataset,
|
||||||
newData => {
|
newData => {
|
||||||
|
|
@ -470,6 +458,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.layer-container{
|
.layer-container{
|
||||||
width:100%;
|
width:100%;
|
||||||
|
|
|
||||||
|
|
@ -76,6 +76,7 @@ const initMap = (newData: any) => {
|
||||||
// 图层点击事件
|
// 图层点击事件
|
||||||
window.globalMap.on(mars3d.EventType.click,(event)=>{
|
window.globalMap.on(mars3d.EventType.click,(event)=>{
|
||||||
|
|
||||||
|
// alert("layer id："+event.layer.id+"; graphic id："+event.graphic.options.attr.id);
|
||||||
|
|
||||||
// 查找绑定的点击事件的图层
|
// 查找绑定的点击事件的图层
|
||||||
for(let i=0;i<bindEvents.length;i++){
|
for(let i=0;i<bindEvents.length;i++){
|
||||||
|
|
@ -2214,7 +2215,6 @@ const handlerInitDrawLayer = () => {
|
||||||
window.drawGraphicLayer = drawGraphicLayer;
|
window.drawGraphicLayer = drawGraphicLayer;
|
||||||
|
|
||||||
window.globalMap.addLayer(drawGraphicLayer);
|
window.globalMap.addLayer(drawGraphicLayer);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -29,13 +29,17 @@ export const option = {
|
||||||
title: '巡护发现火情',
|
title: '巡护发现火情',
|
||||||
type: '重大火灾',
|
type: '重大火灾',
|
||||||
position: '临沂市蒙阴县马田公路附近东北方向100米',
|
position: '临沂市蒙阴县马田公路附近东北方向100米',
|
||||||
time: '2025/10/01 12:05:01'
|
time: '2025/10/01 12:05:01',
|
||||||
|
"lng":117.945311,
|
||||||
|
"lat":35.463766
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '巡护发现火情',
|
title: '巡护发现火情',
|
||||||
type: '重大火灾',
|
type: '重大火灾',
|
||||||
position: '临沂市蒙阴县马田公路附近东北方向100米',
|
position: '临沂市蒙阴县马田公路附近东北方向100米',
|
||||||
time: '2025/10/01 12:05:01'
|
time: '2025/10/01 12:05:01',
|
||||||
|
"lng":117.945311,
|
||||||
|
"lat":35.463766
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex column sectionBox">
|
<div class="flex column sectionBox">
|
||||||
<div class="mt-1 sectionLi" v-for="(item,index) in sectionDatas">
|
<div class="mt-1 sectionLi" v-for="(item,index) in sectionDatas" @click="handlerFireDetail(item)">
|
||||||
<div class="flex jc-sb">
|
<div class="flex jc-sb">
|
||||||
<div class="titleText">{{item.title}}</div>
|
<div class="titleText">{{item.title}}</div>
|
||||||
<div class="mr-2 desStyle">{{item.type}}</div>
|
<div class="mr-2 desStyle">{{item.type}}</div>
|
||||||
|
|
@ -27,10 +27,15 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType, toRefs, ref } from 'vue'
|
import { PropType, toRefs, ref,onMounted } from 'vue'
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
import { useChartDataFetch } from '@/hooks';
|
import { useChartDataFetch } from '@/hooks';
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||||
|
import * as mars3d from "mars3d";
|
||||||
|
import { EventBus } from '@/utils/eventBus';
|
||||||
|
|
||||||
|
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
|
||||||
|
const chartEditStore = useChartEditStore();
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
chartConfig: {
|
chartConfig: {
|
||||||
|
|
@ -58,6 +63,8 @@ const {
|
||||||
datasSize
|
datasSize
|
||||||
} = toRefs(props.chartConfig.option)
|
} = toRefs(props.chartConfig.option)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const navsClick = function(index){
|
const navsClick = function(index){
|
||||||
navsIndex.value = index
|
navsIndex.value = index
|
||||||
}
|
}
|
||||||
|
|
@ -65,6 +72,114 @@ const {
|
||||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||||
props.chartConfig.option.sectionDatas = resData;
|
props.chartConfig.option.sectionDatas = resData;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
// 加载火点
|
||||||
|
setTimeout(function(){
|
||||||
|
handlerLoadFirePoint(sectionDatas.value);
|
||||||
|
},5000)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 加载火点信息
|
||||||
|
const handlerLoadFirePoint = (points:[])=>{
|
||||||
|
|
||||||
|
points?.forEach((item,index)=>{
|
||||||
|
let graphicOptions = {
|
||||||
|
id:item.id,
|
||||||
|
attr:item,
|
||||||
|
position: [parseFloat(item.lng), parseFloat(item.lat)],
|
||||||
|
style: {
|
||||||
|
image: "/public/map/fire.png",
|
||||||
|
clampToGround: true,
|
||||||
|
scale: 0.4,
|
||||||
|
label: {
|
||||||
|
text: item.title,
|
||||||
|
font_size: 12,
|
||||||
|
color: "#ffffff",
|
||||||
|
pixelOffsetY: -36,
|
||||||
|
distanceDisplayCondition: true,
|
||||||
|
distanceDisplayCondition_far: 500000,
|
||||||
|
distanceDisplayCondition_near: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
popup: 'all',
|
||||||
|
// `<div class="marsTiltPanel marsTiltPanel-theme-red" style="font-size:12px;">
|
||||||
|
// <div class="marsTiltPanel-wrap">
|
||||||
|
// <div class="area">
|
||||||
|
// <div class="arrow-lt"></div>
|
||||||
|
// <div class="b-t"></div>
|
||||||
|
// <div class="b-r"></div>
|
||||||
|
// <div class="b-b"></div>
|
||||||
|
// <div class="b-l"></div>
|
||||||
|
// <div class="arrow-rb"></div>
|
||||||
|
// <div class="label-wrap">
|
||||||
|
// <div class="title">火点信息</div>
|
||||||
|
// <div class="label-content">
|
||||||
|
// <div class="data-li">
|
||||||
|
// <div class="data-label">火点地址：${item.position}</div>
|
||||||
|
// </div>
|
||||||
|
// <div class="data-li">
|
||||||
|
// <div class="data-label">上报时间：</div>
|
||||||
|
// <div class="data-value"><span id="lablYeWei" class="label-num">2025-2-11 12:00:00</span><span class="label-unit"></span>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// <div class="b-t-l"></div>
|
||||||
|
// <div class="b-b-r"></div>
|
||||||
|
// </div>
|
||||||
|
// <div class="arrow" ></div>
|
||||||
|
// </div>`,
|
||||||
|
popupOptions: {
|
||||||
|
offsetY: -30,
|
||||||
|
template: "{content}",
|
||||||
|
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||||
|
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
let graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
|
||||||
|
window.graphicLayer.addGraphic(graphic);
|
||||||
|
})
|
||||||
|
|
||||||
|
window.graphicLayer.on(mars3d.EventType.click,function(e){
|
||||||
|
handlerFireDetail(e.graphic.options.attr)
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查看详情
|
||||||
|
const handlerFireDetail = (item) => {
|
||||||
|
|
||||||
|
// 显示弹窗
|
||||||
|
eventHandlerHook(
|
||||||
|
chartEditStore.getComponentList,
|
||||||
|
props.chartConfig.events.interactConfigEvents,
|
||||||
|
'click',
|
||||||
|
item
|
||||||
|
);
|
||||||
|
|
||||||
|
// 更新详情弹窗信息
|
||||||
|
let bindEvents = props.chartConfig.events.interactConfigEvents
|
||||||
|
|
||||||
|
for(let i=0;i<bindEvents.length;i++){
|
||||||
|
for(let j=0;j<bindEvents[i].movementList.length;j++){
|
||||||
|
EventBus.emit(bindEvents[i].movementList[j].elementId[0]+"dataupdate",item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let graphic = window.graphicLayer.getGraphicById(item.id);
|
||||||
|
|
||||||
|
if(graphic){
|
||||||
|
window.globalMap.flyToGraphic(graphic,{radius:300});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图标点击方法
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,7 @@
|
||||||
let { w, h } = toRefs(props.chartConfig.attr);
|
let { w, h } = toRefs(props.chartConfig.attr);
|
||||||
let { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
|
let { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
|
||||||
const clickBtn = (val) => {
|
const clickBtn = (val) => {
|
||||||
|
console.log("value000",val);
|
||||||
eventHandlerHook(
|
eventHandlerHook(
|
||||||
chartEditStore.getComponentList,
|
chartEditStore.getComponentList,
|
||||||
props.chartConfig.events.interactConfigEvents,
|
props.chartConfig.events.interactConfigEvents,
|
||||||
|
|
|
||||||
|
|
@ -20,10 +20,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType, toRefs, ref } from 'vue';
|
import { PropType, toRefs, ref, onMounted } from 'vue';
|
||||||
import { CreateComponentType } from '@/packages/index.d';
|
import { CreateComponentType } from '@/packages/index.d';
|
||||||
import { useChartDataFetch } from '@/hooks';
|
import { useChartDataFetch } from '@/hooks';
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||||
|
import { EventBus } from '@/utils/eventBus';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
chartConfig: {
|
chartConfig: {
|
||||||
|
|
@ -42,10 +43,23 @@ const {
|
||||||
dataset
|
dataset
|
||||||
} = toRefs(props.chartConfig.option)
|
} = toRefs(props.chartConfig.option)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 数据callback处理（预览时触发）
|
// 数据callback处理（预览时触发）
|
||||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
|
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
|
||||||
props.chartConfig.option.dataset = resData;
|
props.chartConfig.option.dataset = resData;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
|
||||||
|
console.log("dataset",dataset);
|
||||||
|
// 组件通信 获取列表中的信息
|
||||||
|
EventBus.on(props.chartConfig.id+'dataupdate', (data) => {
|
||||||
|
console.log('data123', data);
|
||||||
|
});
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -4,31 +4,41 @@
|
||||||
"title": "巡护发现火情",
|
"title": "巡护发现火情",
|
||||||
"type": "特大火情",
|
"type": "特大火情",
|
||||||
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
||||||
"time": "2025/10/01 12:05:00"
|
"time": "2025/10/01 12:05:00",
|
||||||
|
"lng":117.945311,
|
||||||
|
"lat":35.463766
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "手机上报-admin",
|
"title": "手机上报-admin",
|
||||||
"type": "重大火情",
|
"type": "重大火情",
|
||||||
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
||||||
"time": "2025/10/01 12:05:01"
|
"time": "2025/10/01 12:05:01",
|
||||||
|
"lng":117.945311,
|
||||||
|
"lat":35.463766
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "巡护发现火情",
|
"title": "巡护发现火情",
|
||||||
"type": "重大火情",
|
"type": "重大火情",
|
||||||
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
||||||
"time": "2025/10/01 12:05:02"
|
"time": "2025/10/01 12:05:02",
|
||||||
|
"lng":117.945311,
|
||||||
|
"lat":35.463766
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "手机上报-admin",
|
"title": "手机上报-admin",
|
||||||
"type": "特大火情",
|
"type": "特大火情",
|
||||||
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
||||||
"time": "2025/10/01 12:05:03"
|
"time": "2025/10/01 12:05:03",
|
||||||
|
"lng":117.945311,
|
||||||
|
"lat":35.463766
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "巡护发现火情",
|
"title": "巡护发现火情",
|
||||||
"type": "重大火情",
|
"type": "重大火情",
|
||||||
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
||||||
"time": "2025/10/01 12:05:09"
|
"time": "2025/10/01 12:05:09",
|
||||||
|
"lng":117.945311,
|
||||||
|
"lat":35.463766
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -55,6 +55,7 @@
|
||||||
|
|
||||||
<div class="movement-type">
|
<div class="movement-type">
|
||||||
<template v-if="panel.movement != 'newaddress'">
|
<template v-if="panel.movement != 'newaddress'">
|
||||||
|
|
||||||
<div class="movement-type__element" v-if="panel.movement == 'style'">
|
<div class="movement-type__element" v-if="panel.movement == 'style'">
|
||||||
关联组件（可选择分组里的单组件）
|
关联组件（可选择分组里的单组件）
|
||||||
<n-select
|
<n-select
|
||||||
|
|
@ -64,6 +65,7 @@
|
||||||
@update:value="handleUpdateValue(panel.elementId, panel.movement, panelIndex)"
|
@update:value="handleUpdateValue(panel.elementId, panel.movement, panelIndex)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="movement-type__element" v-else>
|
<div class="movement-type__element" v-else>
|
||||||
关联组件（可多选）
|
关联组件（可多选）
|
||||||
<n-select
|
<n-select
|
||||||
|
|
@ -73,6 +75,7 @@
|
||||||
multiple
|
multiple
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div class="movement-type__element" v-if="panel.movement == 'map'">
|
<div class="movement-type__element" v-if="panel.movement == 'map'">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue