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/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>
|
||||
|
||||
<style>
|
||||
.mars3d-template-content{
|
||||
background-image:url(/public/map/popup-background.png);
|
||||
background-size:100% 128%;
|
||||
padding:20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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";
|
||||
// 地图函数列表
|
||||
export function mapFun() {
|
||||
|
||||
const ceshiClick = () => {
|
||||
console.log('ceshi');
|
||||
alert('ceshi');
|
||||
|
|
@ -12,15 +13,13 @@ export function mapFun() {
|
|||
{"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 () => {
|
||||
|
||||
}
|
||||
|
|
@ -77,7 +76,6 @@ export function mapFun() {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
const handlerMeasureHeight = async () => {
|
||||
const graphic = await window.measureTool.height();
|
||||
}
|
||||
|
|
@ -412,7 +410,6 @@ export function mapFun() {
|
|||
label:"测试火点",
|
||||
address:"遍历"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let graphic = window.graphicLayer.getGraphicById(data.id);
|
||||
|
|
@ -477,7 +474,7 @@ export function mapFun() {
|
|||
}
|
||||
}
|
||||
|
||||
// 显示图层
|
||||
// xianshi
|
||||
const handlerShowLayer = (params)=>{
|
||||
let layer = window.globalMap.getLayerById(params);
|
||||
|
||||
|
|
@ -549,24 +546,6 @@ export function mapFun() {
|
|||
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 {
|
||||
ceshiClick,
|
||||
handlerFlyToPoint,
|
||||
|
|
@ -604,9 +583,7 @@ export function mapFun() {
|
|||
handlerRemoveLayer,
|
||||
handlerFlyToLayer,
|
||||
// 三维模型
|
||||
handlerAddModel,
|
||||
handlerMapPlot,
|
||||
downloadJSON
|
||||
handlerAddModel
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -119,7 +119,6 @@ export const eventCommonHandler = (
|
|||
// 地图事件联动
|
||||
for (let k = 0; k < elementList[j].elementId.length; k++) {
|
||||
if (componentList[i].id == elementList[j].elementId[k]) {
|
||||
console.log('elementList[j].funName', elementList[j]);
|
||||
if (elementList[j].params) {
|
||||
ceshiFunction[elementList[j].funName](elementList[j].params);
|
||||
} else {
|
||||
|
|
@ -134,8 +133,10 @@ export const eventCommonHandler = (
|
|||
EventBus.emit(elementList[j].elementId[k] + type, params);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
} else if (elementList[j].movement == 'graphic') {
|
||||
//
|
||||
|
||||
for (let k = 0; k < elementList[j].elementId.length; k++) {
|
||||
if (componentList[i].id == elementList[j].elementId[k]) {
|
||||
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>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -53,8 +52,6 @@ import { EventBus } from '@/utils/eventBus';
|
|||
|
||||
let map: mars3d.Map; // 地图对象
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
|
|
@ -62,7 +59,6 @@ const props = defineProps({
|
|||
}
|
||||
})
|
||||
|
||||
|
||||
const layers = ref(null)
|
||||
|
||||
const handlerLayers:any = ref([]);
|
||||
|
|
@ -232,7 +228,7 @@ const handlerGetLayerTree = ()=>{
|
|||
});
|
||||
|
||||
console.log("configlayers",handlerLayers.value);
|
||||
window.globalMap.setLayersOptions(configLayers);
|
||||
// window.globalMap.setLayersOptions(configLayers);
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -319,11 +315,9 @@ const vChartRef = ref<HTMLElement>()
|
|||
|
||||
onMounted(()=>{
|
||||
handlerGetLayerTree();
|
||||
|
||||
EventBus.on(props.chartConfig.id + 'GraphicClick', (data) => {
|
||||
console.log('data', data);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -435,10 +429,7 @@ const stopWatch = watch(
|
|||
async option => {
|
||||
let options = JSON.parse(JSON.stringify(props.chartConfig.option.mapOptions))
|
||||
console.log("props.chartConfig.option.mapOptions",);
|
||||
|
||||
await nextTick();
|
||||
|
||||
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
|
|
@ -446,9 +437,6 @@ const stopWatch = watch(
|
|||
}
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
|
|
@ -470,6 +458,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
|||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layer-container{
|
||||
width:100%;
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ const initMap = (newData: any) => {
|
|||
// 图层点击事件
|
||||
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++){
|
||||
|
|
@ -2214,7 +2215,6 @@ const handlerInitDrawLayer = () => {
|
|||
window.drawGraphicLayer = drawGraphicLayer;
|
||||
|
||||
window.globalMap.addLayer(drawGraphicLayer);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,13 +29,17 @@ export const option = {
|
|||
title: '巡护发现火情',
|
||||
type: '重大火灾',
|
||||
position: '临沂市蒙阴县马田公路附近东北方向100米',
|
||||
time: '2025/10/01 12:05:01'
|
||||
time: '2025/10/01 12:05:01',
|
||||
"lng":117.945311,
|
||||
"lat":35.463766
|
||||
},
|
||||
{
|
||||
title: '巡护发现火情',
|
||||
type: '重大火灾',
|
||||
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 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="titleText">{{item.title}}</div>
|
||||
<div class="mr-2 desStyle">{{item.type}}</div>
|
||||
|
|
@ -27,10 +27,15 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref } from 'vue'
|
||||
import { PropType, toRefs, ref,onMounted } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
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({
|
||||
chartConfig: {
|
||||
|
|
@ -58,6 +63,8 @@ const {
|
|||
datasSize
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
|
||||
|
||||
const navsClick = function(index){
|
||||
navsIndex.value = index
|
||||
}
|
||||
|
|
@ -65,6 +72,114 @@ const {
|
|||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
let { w, h } = toRefs(props.chartConfig.attr);
|
||||
let { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
|
||||
const clickBtn = (val) => {
|
||||
console.log("value000",val);
|
||||
eventHandlerHook(
|
||||
chartEditStore.getComponentList,
|
||||
props.chartConfig.events.interactConfigEvents,
|
||||
|
|
|
|||
|
|
@ -20,10 +20,11 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, ref } from 'vue';
|
||||
import { PropType, toRefs, ref, onMounted } from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
import { EventBus } from '@/utils/eventBus';
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
|
|
@ -42,10 +43,23 @@ const {
|
|||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
|
||||
|
||||
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
});
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
|
||||
console.log("dataset",dataset);
|
||||
// 组件通信 获取列表中的信息
|
||||
EventBus.on(props.chartConfig.id+'dataupdate', (data) => {
|
||||
console.log('data123', data);
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -4,31 +4,41 @@
|
|||
"title": "巡护发现火情",
|
||||
"type": "特大火情",
|
||||
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
||||
"time": "2025/10/01 12:05:00"
|
||||
"time": "2025/10/01 12:05:00",
|
||||
"lng":117.945311,
|
||||
"lat":35.463766
|
||||
},
|
||||
{
|
||||
"title": "手机上报-admin",
|
||||
"type": "重大火情",
|
||||
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
||||
"time": "2025/10/01 12:05:01"
|
||||
"time": "2025/10/01 12:05:01",
|
||||
"lng":117.945311,
|
||||
"lat":35.463766
|
||||
},
|
||||
{
|
||||
"title": "巡护发现火情",
|
||||
"type": "重大火情",
|
||||
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
||||
"time": "2025/10/01 12:05:02"
|
||||
"time": "2025/10/01 12:05:02",
|
||||
"lng":117.945311,
|
||||
"lat":35.463766
|
||||
},
|
||||
{
|
||||
"title": "手机上报-admin",
|
||||
"type": "特大火情",
|
||||
"position": "临沂市蒙阴县马田公路附近东北方向100米",
|
||||
"time": "2025/10/01 12:05:03"
|
||||
"time": "2025/10/01 12:05:03",
|
||||
"lng":117.945311,
|
||||
"lat":35.463766
|
||||
},
|
||||
{
|
||||
"title": "巡护发现火情",
|
||||
"type": "重大火情",
|
||||
"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">
|
||||
<template v-if="panel.movement != 'newaddress'">
|
||||
|
||||
<div class="movement-type__element" v-if="panel.movement == 'style'">
|
||||
关联组件（可选择分组里的单组件）
|
||||
<n-select
|
||||
|
|
@ -64,6 +65,7 @@
|
|||
@update:value="handleUpdateValue(panel.elementId, panel.movement, panelIndex)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="movement-type__element" v-else>
|
||||
关联组件（可多选）
|
||||
<n-select
|
||||
|
|
@ -73,6 +75,7 @@
|
|||
multiple
|
||||
/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<div class="movement-type__element" v-if="panel.movement == 'map'">
|
||||
|
|
|
|||
Loading…
Reference in New Issue