地图联动事件优化
parent
34c2056ca4
commit
22e837192d
|
|
@ -1,21 +1,17 @@
|
||||||
// 地图函数列表
|
// 地图函数列表
|
||||||
export function mapFun() {
|
export function mapFun() {
|
||||||
const ceshiClick = () => {
|
|
||||||
console.log('ceshi');
|
|
||||||
alert('ceshi');
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据坐标点跳转位置
|
// 根据坐标点跳转位置
|
||||||
const handlerFlyToPoint = (params) => {
|
const handlerFlyToPoint = (params) => {
|
||||||
window.globalMap.flyToPoint([118.000666,35.11987],
|
window.globalMap.flyToPoint([118.000666, 35.11987], {
|
||||||
{"alt":4269.7,"heading":359.2,"pitch":-51.9});
|
alt: 4269.7,
|
||||||
}
|
heading: 359.2,
|
||||||
|
pitch: -51.9,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const handlerAddEntity = (data) => {
|
const handlerAddEntity = (data) => {
|
||||||
|
|
||||||
let graphicOptions = {
|
let graphicOptions = {
|
||||||
id:data.id,
|
id: data.id,
|
||||||
position: [parseFloat(data.position.lng), parseFloat(data.position.lat)],
|
position: [parseFloat(data.position.lng), parseFloat(data.position.lat)],
|
||||||
style: {
|
style: {
|
||||||
image: data.image.generalIcon,
|
image: data.image.generalIcon,
|
||||||
|
|
@ -24,7 +20,7 @@ export function mapFun() {
|
||||||
label: {
|
label: {
|
||||||
text: data.attribute.label,
|
text: data.attribute.label,
|
||||||
font_size: 14,
|
font_size: 14,
|
||||||
color: "#ffffff",
|
color: '#ffffff',
|
||||||
pixelOffsetY: 10,
|
pixelOffsetY: 10,
|
||||||
distanceDisplayCondition: true,
|
distanceDisplayCondition: true,
|
||||||
distanceDisplayCondition_far: 500000,
|
distanceDisplayCondition_far: 500000,
|
||||||
|
|
@ -67,52 +63,52 @@ export function mapFun() {
|
||||||
</div>`,
|
</div>`,
|
||||||
popupOptions: {
|
popupOptions: {
|
||||||
offsetY: -30,
|
offsetY: -30,
|
||||||
template: "{content}",
|
template: '{content}',
|
||||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
horizontalOrigin: 'Cesium.HorizontalOrigin.LEFT',
|
||||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
verticalOrigin: 'Cesium.VerticalOrigin.CENTER',
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
let graphic = window.graphicLayer.getGraphicById(data.id);
|
let graphic = window.graphicLayer.getGraphicById(data.id);
|
||||||
|
|
||||||
if(graphic){
|
if (graphic) {
|
||||||
graphic.setStyleOptions(graphicOptions);
|
graphic.setStyleOptions(graphicOptions);
|
||||||
}else{
|
} else {
|
||||||
graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
|
graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
|
||||||
|
|
||||||
window.graphicLayer.addGraphic(graphic);
|
window.graphicLayer.addGraphic(graphic);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
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 handlerMeasureLength = async () => {
|
const handlerMeasureLength = async () => {
|
||||||
const graphic = await window.measureTool.distance({
|
const graphic = await window.measureTool.distance({
|
||||||
showAddText: true,
|
showAddText: true,
|
||||||
label: {
|
label: {
|
||||||
type: "div",
|
type: 'div',
|
||||||
updateText: function (text, graphic) {
|
updateText: function (text, graphic) {
|
||||||
graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`
|
graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`;
|
||||||
},
|
},
|
||||||
html: `<div class="marsGreenGradientPnl" ></div>`,
|
html: `<div class="marsGreenGradientPnl" ></div>`,
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const handlerMeasureSurfaceArea = async () => {
|
const handlerMeasureSurfaceArea = async () => {
|
||||||
const graphic = await window.measureTool.areaSurface({
|
const graphic = await window.measureTool.areaSurface({
|
||||||
style: {
|
style: {
|
||||||
color: "#ffff00"
|
color: '#ffff00',
|
||||||
},
|
},
|
||||||
splitNum: 10, // step插值分割的个数
|
splitNum: 10, // step插值分割的个数
|
||||||
exact: false // 是否进行精确计算, 传false时是否快速概略计算方式,该方式计算精度较低,但计算速度快,仅能计算在当前视域内坐标的高度
|
exact: false, // 是否进行精确计算, 传false时是否快速概略计算方式,该方式计算精度较低,但计算速度快,仅能计算在当前视域内坐标的高度
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const handlerMeasureArea = async () => {
|
const handlerMeasureArea = async () => {
|
||||||
const graphic = await window.measureTool.area({
|
const graphic = await window.measureTool.area({
|
||||||
|
|
@ -122,15 +118,15 @@ export function mapFun() {
|
||||||
outline: true,
|
outline: true,
|
||||||
outlineColor: '#fafa5a',
|
outlineColor: '#fafa5a',
|
||||||
outlineWidth: 1,
|
outlineWidth: 1,
|
||||||
clampToGround: false //贴地
|
clampToGround: false, //贴地
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const handlerMeasurePoint = async () => {
|
const handlerMeasurePoint = async () => {
|
||||||
const graphic = await window.measureTool.point({
|
const graphic = await window.measureTool.point({
|
||||||
popupOptions: {
|
popupOptions: {
|
||||||
pointerEvents: false
|
pointerEvents: false,
|
||||||
},
|
},
|
||||||
popup: function (point, event) {
|
popup: function (point, event) {
|
||||||
return `<div class="mars3d-template-title">位置信息</div>
|
return `<div class="mars3d-template-title">位置信息</div>
|
||||||
|
|
@ -138,36 +134,34 @@ export function mapFun() {
|
||||||
<div><label>经度</label>${point.lng}</div>
|
<div><label>经度</label>${point.lng}</div>
|
||||||
<div><label>纬度</label>${point.lat}</div>
|
<div><label>纬度</label>${point.lat}</div>
|
||||||
<div><label>海拔</label>${point.alt}米</div>
|
<div><label>海拔</label>${point.alt}米</div>
|
||||||
</div>`
|
</div>`;
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
const handlerMeasureHeight = async () => {
|
const handlerMeasureHeight = async () => {
|
||||||
const graphic = await window.measureTool.height();
|
const graphic = await window.measureTool.height();
|
||||||
}
|
};
|
||||||
|
|
||||||
const handlerClearMeasure = () => {
|
const handlerClearMeasure = () => {
|
||||||
window.measureTool.clear();
|
window.measureTool.clear();
|
||||||
}
|
};
|
||||||
|
|
||||||
const handlerDrawPolygon = async () => {
|
const handlerDrawPolygon = async () => {
|
||||||
const graphic = await graphicLayer.startDraw({
|
const graphic = await graphicLayer.startDraw({
|
||||||
type: "polygon",
|
type: 'polygon',
|
||||||
style: {
|
style: {
|
||||||
color: "#3388ff",
|
color: '#3388ff',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
outline: true,
|
outline: true,
|
||||||
outlineColor: "#ffffff",
|
outlineColor: '#ffffff',
|
||||||
outlineWidth: 2.0,
|
outlineWidth: 2.0,
|
||||||
clampToGround:true
|
clampToGround: true,
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
ceshiClick,
|
|
||||||
handlerFlyToPoint,
|
handlerFlyToPoint,
|
||||||
handlerAddEntity,
|
handlerAddEntity,
|
||||||
handlerMeasureSurfaceLength,
|
handlerMeasureSurfaceLength,
|
||||||
|
|
@ -177,116 +171,110 @@ export function mapFun() {
|
||||||
handlerMeasurePoint,
|
handlerMeasurePoint,
|
||||||
handlerMeasureHeight,
|
handlerMeasureHeight,
|
||||||
handlerClearMeasure,
|
handlerClearMeasure,
|
||||||
handlerDrawPolygon
|
handlerDrawPolygon,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// 地图函数列表options
|
// 地图函数列表options
|
||||||
export const funSelectOptions = [
|
export const funSelectOptions = [
|
||||||
{
|
{
|
||||||
// 事件名称(用于选择显示)
|
label: '根据坐标定位地图视角',
|
||||||
label: 'ceshi点击',
|
value: 'handlerFlyToPoint',
|
||||||
// 事件名(用于触发)
|
|
||||||
value: 'ceshiClick',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"根据坐标定位地图视角",
|
label: '添加任意类型图层',
|
||||||
value: 'handlerFlyToPoint'
|
value: 'handlerAddLayer',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"添加任意类型图层",
|
label: '隐藏任意类型图层',
|
||||||
value: 'handlerAddLayer'
|
value: 'handlerHiddenLayer',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"隐藏任意类型图层",
|
label: '删除任意类型图层',
|
||||||
value: 'handlerHiddenLayer'
|
value: 'handlerRemoveLayer',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"删除任意类型图层",
|
label: '添加单个矢量数据',
|
||||||
value: 'handlerRemoveLayer'
|
value: 'handlerAddEntity',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"添加单个矢量数据",
|
label: '隐藏单个矢量数据',
|
||||||
value: 'handlerAddEntity'
|
value: 'handlerHiddenEntity',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"隐藏单个矢量数据",
|
label: '移除单个矢量数据',
|
||||||
value:"handlerHiddenEntity"
|
value: 'handlerRemoveEntity',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"移除单个矢量数据",
|
label: '定位和高亮矢量数据',
|
||||||
value:"handlerRemoveEntity"
|
value: 'handlerFlyToEntity',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"定位和高亮矢量数据",
|
label: '清除全部矢量数据',
|
||||||
value:"handlerFlyToEntity"
|
value: 'handlerClearEntityLayer',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"清除全部矢量数据",
|
label: '隐藏全部矢量数据',
|
||||||
value:"handlerClearEntityLayer"
|
value: 'handlerHiddenEntityLayer',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"隐藏全部矢量数据",
|
label: '点击地图拾取坐标',
|
||||||
value:"handlerHiddenEntityLayer"
|
value: 'handlerDrawPoint',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"点击地图拾取坐标",
|
label: '绘制贴地线',
|
||||||
value:"handlerDrawPoint"
|
value: 'handlerDrawLine',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"绘制贴地线",
|
label: '绘制图标点',
|
||||||
value:"handlerDrawLine"
|
value: 'handlerDrawIconPoint',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"绘制图标点",
|
label: '绘制贴地线',
|
||||||
value:"handlerDrawIconPoint"
|
value: 'handlerDrawLine',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"绘制贴地线",
|
label: '绘制贴地自由线',
|
||||||
value:"handlerDrawLine"
|
value: 'handlerDrawBrushLine',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"绘制贴地自由线",
|
label: '绘制贴地面',
|
||||||
value:"handlerDrawBrushLine"
|
value: 'handlerDrawLine',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"绘制贴地面",
|
label: '绘制贴地矩形',
|
||||||
value:"handlerDrawLine"
|
value: 'handlerDrawRectangle',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"绘制贴地矩形",
|
label: '绘制贴地面',
|
||||||
value:"handlerDrawRectangle"
|
value: 'handlerDrawPolygon',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"绘制贴地面",
|
label: '贴地距离测量',
|
||||||
value:"handlerDrawPolygon"
|
value: 'handlerMeasureSurfaceLength',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"贴地距离测量",
|
label: '空间距离测量',
|
||||||
value:"handlerMeasureSurfaceLength"
|
value: 'handlerMeasureLength',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"空间距离测量",
|
label: '贴地面积测量',
|
||||||
value:"handlerMeasureLength"
|
value: 'handlerMeasureSurfaceArea',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"贴地面积测量",
|
label: '水平面积测量',
|
||||||
value:"handlerMeasureSurfaceArea"
|
value: 'handlerMeasureArea',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"水平面积测量",
|
label: '坐标点位测量',
|
||||||
value:"handlerMeasureArea"
|
value: 'handlerMeasurePoint',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"坐标点位测量",
|
label: '高度差测量',
|
||||||
value:"handlerMeasurePoint"
|
value: 'handlerMeasureHeight',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label:"高度差测量",
|
label: '清空测量数据',
|
||||||
value:"handlerMeasureHeight"
|
value: 'handlerClearMeasure',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label:"清空测量数据",
|
|
||||||
value:"handlerClearMeasure"
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -125,97 +125,10 @@
|
||||||
import { getMenuList } from '@/api/sys/menu';
|
import { getMenuList } from '@/api/sys/menu';
|
||||||
import { previewPath } from '@/utils';
|
import { previewPath } from '@/utils';
|
||||||
import { projectListApi } from '@/api/path/project.api';
|
import { projectListApi } from '@/api/path/project.api';
|
||||||
|
import { funSelectOptions } from '@/hooks/ceshiFun.hook';
|
||||||
|
|
||||||
const { chartEditStore } = useTargetData();
|
const { chartEditStore } = useTargetData();
|
||||||
const routeOptions = ref([]);
|
const routeOptions = ref([]);
|
||||||
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 skipTypeOptions = ref([
|
const skipTypeOptions = ref([
|
||||||
{
|
{
|
||||||
label: '外部链接',
|
label: '外部链接',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue