679 lines
16 KiB
TypeScript
679 lines
16 KiB
TypeScript
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 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,
|
||
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 = ()=>{
|
||
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"
|
||
},
|
||
"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 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: {
|
||
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,
|
||
handlerDrawBrushLine,
|
||
handlerDrawLine,
|
||
handlerDrawPoint,
|
||
handlerDrawRectangle,
|
||
handlerClearDraw,
|
||
// 矢量操作
|
||
handlerHiddenEntity,
|
||
handlerShowEntity,
|
||
handlerRemoveEntity,
|
||
handlerFlyToEntity,
|
||
// 图层操作
|
||
handlerClearEntityLayer,
|
||
handlerHiddenEntityLayer,
|
||
handlerShowEntityLayer,
|
||
// 图层控制类
|
||
handlerAddLayer,
|
||
handlerHiddenLayer,
|
||
handlerShowLayer,
|
||
handlerRemoveLayer,
|
||
handlerFlyToLayer,
|
||
// 三维模型
|
||
handlerAddModel
|
||
};
|
||
}
|
||
|
||
// 地图函数列表options
|
||
export const funSelectOptions = [
|
||
{
|
||
// 事件名称（用于选择显示）
|
||
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"
|
||
}
|
||
];
|