main
徐景良 2025-02-21 17:05:52 +08:00
parent 2856dad272
commit df1161b95a
3 changed files with 617 additions and 157 deletions

View File

@ -1,3 +1,4 @@
import * as mars3d from "mars3d";
// 地图函数列表
export function mapFun() {
const ceshiClick = () => {
@ -12,7 +13,203 @@ export function mapFun() {
}
const handlerAddEntity = (data) => {
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 handlerClearDraw = async ()=>{
window.drawGraphicLayer.clear();
}
const handlerDrawRectangle = async () => {
const graphic = await window.drawGraphicLayer.startDraw({
type: isEntityPrimitive ? "rectangle" : "rectangleP",
style: {
color: clampToGround ? "#ffff00" : "#3388ff",
opacity: 0.6,
outline: true,
outlineColor: "#ffffff",
outlineWidth: 2.0,
clampToGround
}
})
}
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,
@ -79,92 +276,237 @@ export function mapFun() {
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:"遍历"
}
}
const handlerMeasureSurfaceLength = async () => {
const graphic = await window.measureTool.distanceSurface({
showAddText: true,
exact: false
})
let graphic = window.graphicLayer.getGraphicById(data.id);
if(graphic){
graphic.show = true;
}
}
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>`
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 = ()=>{
let layer = new mars3d.layer.WmsLayer({
"id": 4460,
"name": "建筑物面",
"type": "wms",
"url": "http://221.2.83.254:9007/geoserver/ksp/wms",
"layers": "ksp:beibushanqudaolufenlei0923",
"crs": "EPSG:4326",
"parameters": {
"transparent": "true",
"format": "image/png"
},
html: `<div class="marsGreenGradientPnl" ></div>`,
}
"highlight": {
"showTime": 5000,
"fill": true,
"color": "#2deaf7",
"opacity": 0.6,
"outline": true,
"outlineWidth": 3,
"outlineColor": "#e000d9",
"outlineOpacity": 1,
"clampToGround": true
},
"center": {"lat":35.376403,"lng":117.97628,"alt":3615.8,"heading":3.1,"pitch":-26.8},
"popup": "all",
"show": true,
"flyTo": true
})
window.globalMap.addLayer(layer);
}
const handlerMeasureSurfaceArea = async () => {
const graphic = await window.measureTool.areaSurface({
const handlerHiddenLayer = ()=>{
let layer = window.globalMap.getLayerById(4460);
if(layer){
layer.show = false;
}
}
const handlerShowLayer = ()=>{
let layer = window.globalMap.getLayerById(4460);
console.log("layer",layer);
if(layer){
layer.show = true;
}
}
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: {
color: "#ffff00"
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
}
},
splitNum: 10, // step插值分割的个数
exact: false // 是否进行精确计算, 传false时是否快速概略计算方式该方式计算精度较低但计算速度快仅能计算在当前视域内坐标的高度
attr: { remark: "示例1" }
})
window.graphicLayer.addGraphic(graphic)
}
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,
@ -177,7 +519,29 @@ export function mapFun() {
handlerMeasurePoint,
handlerMeasureHeight,
handlerClearMeasure,
handlerDrawPolygon
handlerDrawPolygon,
handlerDrawBrushLine,
handlerDrawLine,
handlerDrawPoint,
handlerDrawRectangle,
handlerClearDraw,
// 矢量操作
handlerHiddenEntity,
handlerShowEntity,
handlerRemoveEntity,
handlerFlyToEntity,
// 图层操作
handlerClearEntityLayer,
handlerHiddenEntityLayer,
handlerShowEntityLayer,
// 图层控制类
handlerAddLayer,
handlerHiddenLayer,
handlerShowLayer,
handlerRemoveLayer,
handlerFlyToLayer,
// 三维模型
handlerAddModel
};
}
@ -198,13 +562,20 @@ export const funSelectOptions = [
value: 'handlerAddLayer'
},
{
label:"隐藏任意类型图层",
label:"隐藏指定图层",
value: 'handlerHiddenLayer'
},{
label:"显示指定图层",
value: 'handlerShowLayer'
},
{
label:"删除任意类型图层",
label:"删除指定图层",
value: 'handlerRemoveLayer'
},
{
label:"跳转到指定图层",
value: 'handlerFlyToLayer'
},
{
label:"添加单个矢量数据",
value: 'handlerAddEntity'
@ -213,6 +584,10 @@ export const funSelectOptions = [
label:"隐藏单个矢量数据",
value:"handlerHiddenEntity"
},
{
label:"显示单个矢量数据",
value:"handlerShowEntity"
},
{
label:"移除单个矢量数据",
value:"handlerRemoveEntity"
@ -229,9 +604,13 @@ export const funSelectOptions = [
label:"隐藏全部矢量数据",
value:"handlerHiddenEntityLayer"
},
{
label:"显示全部矢量数据",
value:"handlerShowEntityLayer"
},
{
label:"点击地图拾取坐标",
value:"handlerDrawPoint"
value:"handlerGetPoint"
},
{
label:"绘制贴地线",
@ -239,19 +618,15 @@ export const funSelectOptions = [
},
{
label:"绘制图标点",
value:"handlerDrawIconPoint"
},
{
label:"绘制贴地线",
value:"handlerDrawLine"
value:"handlerDrawPoint"
},
{
label:"绘制贴地自由线",
value:"handlerDrawBrushLine"
},
{
label:"制贴地面",
value:"handlerDrawLine"
label:"军事标绘",
value:"handlerDrawJun"
},
{
label:"绘制贴地矩形",
@ -261,10 +636,18 @@ export const funSelectOptions = [
label:"绘制贴地面",
value:"handlerDrawPolygon"
},
{
label:"清除图层绘制",
value:"handlerClearDraw"
},
{
label:"贴地距离测量",
value:"handlerMeasureSurfaceLength"
},
{
label:"绘制自由线",
value:"drawBrushLine",
},
{
label:"空间距离测量",
value:"handlerMeasureLength"
@ -288,5 +671,8 @@ export const funSelectOptions = [
{
label:"清空测量数据",
value:"handlerClearMeasure"
},{
label:"添加三维模型",
value:"handlerAddModel"
}
];

View File

@ -73,7 +73,10 @@ const initMap = (newData: any) => {
//
handlerInitMeasureTool();
//
handlerInitDrawLayer();
return null;
//
AMapLoader.load({
@ -172,7 +175,7 @@ const stopWatch = watch(
await nextTick();
options = {
options = {
"scene": {
"center": {
"lat": 30.526361,
@ -2153,6 +2156,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
//
let graphicLayer = null;
let drawGraphicLayer = null;
let measureTool = null;
//
const handlerInitEntityLayer = () => {
@ -2185,6 +2189,17 @@ const handlerInitEntityLayer = () => {
}
}
const handlerInitDrawLayer = () => {
if(drawGraphicLayer == null){
drawGraphicLayer = new mars3d.layer.GraphicLayer({ id: 888 });
window.drawGraphicLayer = drawGraphicLayer;
window.globalMap.addLayer(drawGraphicLayer);
}
}
const handlerInitMeasureTool = () => {
measureTool = new mars3d.thing.Measure({
label: {
@ -2203,6 +2218,8 @@ const handlerInitMeasureTool = () => {
window.globalMap.addThing(measureTool)
}
// 使
const handlerDrawPoint = async () => {

View File

@ -92,78 +92,135 @@
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"
}
]);
{
//
label: 'ceshi点击',
// ()
value: 'ceshiClick',
},
{
label:"根据坐标定位地图视角",
value: 'handlerFlyToPoint'
},
{
label:"添加任意类型图层",
value: 'handlerAddLayer'
},
{
label:"隐藏指定图层",
value: 'handlerHiddenLayer'
},{
label:"显示指定图层",
value: 'handlerShowLayer'
},
{
label:"删除指定图层",
value: 'handlerRemoveLayer'
},
{
label:"跳转到指定图层",
value: 'handlerFlyToLayer'
},
{
label:"添加单个矢量数据",
value: 'handlerAddEntity'
},
{
label:"隐藏单个矢量数据",
value:"handlerHiddenEntity"
},
{
label:"显示单个矢量数据",
value:"handlerShowEntity"
},
{
label:"移除单个矢量数据",
value:"handlerRemoveEntity"
},
{
label:"定位和高亮矢量数据",
value:"handlerFlyToEntity"
},
{
label:"清除全部矢量数据",
value:"handlerClearEntityLayer"
},
{
label:"隐藏全部矢量数据",
value:"handlerHiddenEntityLayer"
},
{
label:"显示全部矢量数据",
value:"handlerShowEntityLayer"
},
{
label:"点击地图拾取坐标",
value:"handlerGetPoint"
},
{
label:"绘制贴地线",
value:"handlerDrawLine"
},
{
label:"绘制图标点",
value:"handlerDrawPoint"
},
{
label:"绘制贴地自由线",
value:"handlerDrawBrushLine"
},
{
label:"军事标绘",
value:"handlerDrawJun"
},
{
label:"绘制贴地矩形",
value:"handlerDrawRectangle"
},
{
label:"绘制贴地面",
value:"handlerDrawPolygon"
},
{
label:"清除图层绘制",
value:"handlerClearDraw"
},
{
label:"贴地距离测量",
value:"handlerMeasureSurfaceLength"
},
{
label:"绘制自由线",
value:"drawBrushLine",
},
{
label:"空间距离测量",
value:"handlerMeasureLength"
},
{
label:"贴地面积测量",
value:"handlerMeasureSurfaceArea"
},
{
label:"水平面积测量",
value:"handlerMeasureArea"
},
{
label:"坐标点位测量",
value:"handlerMeasurePoint"
},
{
label:"高度差测量",
value:"handlerMeasureHeight"
},
{
label:"清空测量数据",
value:"handlerClearMeasure"
},{
label:"添加三维模型",
value:"handlerAddModel"
}
]);
const props = defineProps({
eventData: {
type: Object,