地图事件
parent
7d56e25910
commit
345cff749a
|
|
@ -358,7 +358,8 @@ const props = defineProps({
|
|||
}
|
||||
})
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const chartEditStore = useChartEditStore();
|
||||
|
||||
const themeSetting = computed(() => {
|
||||
const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
|
||||
return chartThemeSetting
|
||||
|
|
|
|||
|
|
@ -2,9 +2,182 @@
|
|||
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 handlerAddEntity = (data) => {
|
||||
|
||||
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 handlerMeasureSurfaceLength = async () => {
|
||||
const graphic = await window.measureTool.distanceSurface({
|
||||
showAddText: true,
|
||||
exact: false
|
||||
})
|
||||
}
|
||||
|
||||
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 graphicLayer.startDraw({
|
||||
type: "polygon",
|
||||
style: {
|
||||
color: "#3388ff",
|
||||
opacity: 0.5,
|
||||
outline: true,
|
||||
outlineColor: "#ffffff",
|
||||
outlineWidth: 2.0,
|
||||
clampToGround:true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
ceshiClick,
|
||||
handlerFlyToPoint,
|
||||
handlerAddEntity,
|
||||
handlerMeasureSurfaceLength,
|
||||
handlerMeasureLength,
|
||||
handlerMeasureSurfaceArea,
|
||||
handlerMeasureArea,
|
||||
handlerMeasurePoint,
|
||||
handlerMeasureHeight,
|
||||
handlerClearMeasure,
|
||||
handlerDrawPolygon
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -16,4 +189,104 @@ export const funSelectOptions = [
|
|||
// 事件名(用于触发)
|
||||
value: 'ceshiClick',
|
||||
},
|
||||
{
|
||||
label:"根据坐标定位地图视角",
|
||||
value: 'handlerFlyToPoint'
|
||||
},
|
||||
{
|
||||
label:"添加任意类型图层",
|
||||
value: 'handlerAddLayer'
|
||||
},
|
||||
{
|
||||
label:"隐藏任意类型图层",
|
||||
value: 'handlerHiddenLayer'
|
||||
},
|
||||
{
|
||||
label:"删除任意类型图层",
|
||||
value: 'handlerRemoveLayer'
|
||||
},
|
||||
{
|
||||
label:"添加单个矢量数据",
|
||||
value: 'handlerAddEntity'
|
||||
},
|
||||
{
|
||||
label:"隐藏单个矢量数据",
|
||||
value:"handlerHiddenEntity"
|
||||
},
|
||||
{
|
||||
label:"移除单个矢量数据",
|
||||
value:"handlerRemoveEntity"
|
||||
},
|
||||
{
|
||||
label:"定位和高亮矢量数据",
|
||||
value:"handlerFlyToEntity"
|
||||
},
|
||||
{
|
||||
label:"清除全部矢量数据",
|
||||
value:"handlerClearEntityLayer"
|
||||
},
|
||||
{
|
||||
label:"隐藏全部矢量数据",
|
||||
value:"handlerHiddenEntityLayer"
|
||||
},
|
||||
{
|
||||
label:"点击地图拾取坐标",
|
||||
value:"handlerDrawPoint"
|
||||
},
|
||||
{
|
||||
label:"绘制贴地线",
|
||||
value:"handlerDrawLine"
|
||||
},
|
||||
{
|
||||
label:"绘制图标点",
|
||||
value:"handlerDrawIconPoint"
|
||||
},
|
||||
{
|
||||
label:"绘制贴地线",
|
||||
value:"handlerDrawLine"
|
||||
},
|
||||
{
|
||||
label:"绘制贴地自由线",
|
||||
value:"handlerDrawBrushLine"
|
||||
},
|
||||
{
|
||||
label:"绘制贴地面",
|
||||
value:"handlerDrawLine"
|
||||
},
|
||||
{
|
||||
label:"绘制贴地矩形",
|
||||
value:"handlerDrawRectangle"
|
||||
},
|
||||
{
|
||||
label:"绘制贴地面",
|
||||
value:"handlerDrawPolygon"
|
||||
},
|
||||
{
|
||||
label:"贴地距离测量",
|
||||
value:"handlerMeasureSurfaceLength"
|
||||
},
|
||||
{
|
||||
label:"空间距离测量",
|
||||
value:"handlerMeasureLength"
|
||||
},
|
||||
{
|
||||
label:"贴地面积测量",
|
||||
value:"handlerMeasureSurfaceArea"
|
||||
},
|
||||
{
|
||||
label:"水平面积测量",
|
||||
value:"handlerMeasureArea"
|
||||
},
|
||||
{
|
||||
label:"坐标点位测量",
|
||||
value:"handlerMeasurePoint"
|
||||
},
|
||||
{
|
||||
label:"高度差测量",
|
||||
value:"handlerMeasureHeight"
|
||||
},
|
||||
{
|
||||
label:"清空测量数据",
|
||||
value:"handlerClearMeasure"
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ const chartEditStore = useChartEditStore();
|
|||
const ceshiFunction = mapFun();
|
||||
|
||||
// 交互事件
|
||||
export const eventHandlerHook = (comonentList: any, elementList: any) => {
|
||||
export const eventHandlerHook = (comonentList: any, elementList: any, params:any = null) => {
|
||||
let obj: any = {};
|
||||
let index = 0;
|
||||
for (let i = 0; i < comonentList.length; i++) {
|
||||
|
|
@ -37,10 +37,14 @@ export const eventHandlerHook = (comonentList: any, elementList: any) => {
|
|||
// 地图事件联动
|
||||
for (let k = 0; k < elementList[j].elementId.length; k++) {
|
||||
if (comonentList[i].id == elementList[j].elementId[k]) {
|
||||
if(params){
|
||||
ceshiFunction[elementList[j].funName](params);
|
||||
}else{
|
||||
ceshiFunction[elementList[j].funName]();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -79,7 +79,6 @@
|
|||
<collapse-item name="右键菜单" :expanded="true">
|
||||
|
||||
|
||||
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -68,8 +68,12 @@ const initMap = (newData: any) => {
|
|||
|
||||
window.globalMap = map;
|
||||
|
||||
|
||||
// 初始化矢量图层
|
||||
handlerInitEntityLayer();
|
||||
|
||||
// 初始化测量工具
|
||||
handlerInitMeasureTool();
|
||||
|
||||
return null;
|
||||
// 初始化
|
||||
AMapLoader.load({
|
||||
|
|
@ -2149,13 +2153,15 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
|||
// 方法函数封装
|
||||
|
||||
let graphicLayer = null;
|
||||
|
||||
let measureTool = null;
|
||||
// 地球创建完成后默认加载矢量数据图层
|
||||
const handlerInitEntityLayer = () => {
|
||||
if(graphicLayer == null){
|
||||
|
||||
graphicLayer = new mars3d.layer.GraphicLayer({ id: 999 });
|
||||
|
||||
window.graphicLayer = graphicLayer;
|
||||
|
||||
window.globalMap.addLayer(graphicLayer);
|
||||
|
||||
let data = {
|
||||
|
|
@ -2179,10 +2185,27 @@ const handlerInitEntityLayer = () => {
|
|||
}
|
||||
}
|
||||
|
||||
const handlerInitMeasureTool = () => {
|
||||
measureTool = new mars3d.thing.Measure({
|
||||
label: {
|
||||
color: "#ffffff",
|
||||
font_family: "黑体",
|
||||
font_size: 18,
|
||||
background: false
|
||||
},
|
||||
isAutoEditing: false // 绘制完成后是否自动激活编辑
|
||||
// drawEndEventType: mars3d.EventType.rightClick,
|
||||
// drawDelEventType: mars3d.EventType.middleClick
|
||||
})
|
||||
|
||||
window.measureTool = measureTool;
|
||||
|
||||
window.globalMap.addThing(measureTool)
|
||||
}
|
||||
|
||||
// 点击获取点击位置点位信息 用于常见的下发火点、下发任务点等使用
|
||||
|
||||
const handlerDrawPointt = async () => {
|
||||
const handlerDrawPoint = async () => {
|
||||
const graphic = await graphicLayer.startDraw({
|
||||
type: "point",
|
||||
})
|
||||
|
|
|
|||
|
|
@ -93,9 +93,76 @@
|
|||
const { chartEditStore } = useTargetData();
|
||||
const funSelectOptions = ref([
|
||||
{
|
||||
// 事件名称（用于选择显示）
|
||||
label: 'ceshi点击',
|
||||
// 事件名(用于触发)
|
||||
value: 'ceshiClick',
|
||||
},
|
||||
{
|
||||
label:"根据坐标定位地图视角",
|
||||
value: 'handlerFlyToPoint'
|
||||
},
|
||||
{
|
||||
label:"添加任意类型图层",
|
||||
value: 'handlerAddLayer'
|
||||
},
|
||||
{
|
||||
label:"隐藏任意类型图层",
|
||||
value: 'handlerHiddenLayer'
|
||||
},
|
||||
{
|
||||
label:"删除任意类型图层",
|
||||
value: 'handlerRemoveLayer'
|
||||
},
|
||||
{
|
||||
label:"添加单个矢量数据",
|
||||
value: 'handlerAddEntity'
|
||||
},{
|
||||
label:"隐藏单个矢量数据",
|
||||
value:"handlerHiddenEntity"
|
||||
},{
|
||||
label:"移除单个矢量数据",
|
||||
value:"handlerRemoveEntity"
|
||||
},{
|
||||
label:"定位和高亮矢量数据",
|
||||
value:"handlerFlyToEntity"
|
||||
},{
|
||||
label:"清除全部矢量数据",
|
||||
value:"handlerClearEntityLayer"
|
||||
},{
|
||||
label:"隐藏全部矢量数据",
|
||||
value:"handlerHiddenEntityLayer"
|
||||
},{
|
||||
label:"点击地图拾取坐标",
|
||||
value:"handlerDrawPoint"
|
||||
},{
|
||||
label:"绘制贴地线",
|
||||
value:"handlerDrawLine"
|
||||
},{
|
||||
label:"绘制贴地面",
|
||||
value:"handlerDrawPolygon"
|
||||
},{
|
||||
label:"贴地距离测量",
|
||||
value:"handlerMeasureSurfaceLength"
|
||||
},{
|
||||
label:"空间距离测量",
|
||||
value:"handlerMeasureLength"
|
||||
},{
|
||||
label:"贴地面积测量",
|
||||
value:"handlerMeasureSurfaceArea"
|
||||
},{
|
||||
label:"水平面积测量",
|
||||
value:"handlerMeasureArea"
|
||||
},{
|
||||
label:"坐标点位测量",
|
||||
value:"handlerMeasurePoint"
|
||||
},{
|
||||
label:"高度差测量",
|
||||
value:"handlerMeasureHeight"
|
||||
},{
|
||||
label:"清空测量数据",
|
||||
value:"handlerClearMeasure"
|
||||
}
|
||||
]);
|
||||
const props = defineProps({
|
||||
eventData: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue