三维地图 Cesium + vue api记录

#Ltf

已于 2023-08-29 11:22:41 修改

阅读量252

点赞数

分类专栏： WebGis 文章标签： WebGis

于 2023-05-25 11:11:03 首次发布

本文链接：https://blog.csdn.net/weixin_46032911/article/details/130863089

版权

WebGis 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了使用Cesium.js进行地图操作的方法，包括通过经纬度获取高程、监听地图点击事件、添加billboard坐标点、绘制圆、加载图片服务、删除entities和ImageryLayer图层以及根据经纬度跳转等功能。

摘要由CSDN通过智能技术生成

1 通过经纬度获取高程

let posArr = [{
	lon:'',
	lat:''
}
]
let lonlat = []
posArr.forEach(item => {
  lonlat.push(new Cesium.Cartographic(Cesium.Math.toRadians(item.lon), Cesium.Math.toRadians(item.lat)))
})
let finalArr = []
//模型上取点
const promise = viewer.scene.sampleHeightMostDetailed(lonlat);
promise.then((data) => {
//data里是相关坐标信息,如：{lon:'',lat:'',height:''}
}

2、地图点击事件

mounted(){
	//注册点击事件
	this.handlePinClick()
}
beforeDestroy(){
	// 去除鼠标点击监听事件
    this.handleClick3D && this.handleClick3D.destroy();
    this.handleClick3D = null;
}
// 地图点击事件
    handlePinClick() {
      this.handleClick3D = new Cesium.ScreenSpaceEventHandler(this.Global.viewer.scene.canvas);
      this.handleClick3D.setInputAction((movement) => {
      //pick 为添加到地图中的图标(entities)对象
        const pick = this.Global.viewer.scene.pick(movement.position);
        if (!pick) {
          return;
        }
        // 打开弹窗
        this.addDialog(pick.id._attributes)

      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },

3、通过billboard 添加坐标点

 let objParams = {
   name:'fire',
   //坐标点位的描述信息
   attributes:{
     id:item.fireFieldId,
     type:'fire',
     position
   },
   lon:commonInfos.fLon,
   lat:commonInfos.fLat,
   image,
   scale:0.4
 }
export const add3dIcon = (viewer,objParams) => {
  let temp = viewer.entities.add({
    name:objParams.name,
    attributes:objParams.attributes,
    position: Cesium.Cartesian3.fromDegrees(objParams.lon, objParams.lat, 0),
    billboard: {
      // 图像地址，URI或Canvas的属性
      image:objParams.image,
      scale: objParams.scale,
      // 是否显示
      show: true,
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND // 规定贴地
    }
  });
  return temp
}

4、添加圆

export const drawCircle = (viewer,id,lonlat=[],radius) => {
  let temp = viewer.entities.add({
    id,
    position: Cesium.Cartesian3.fromDegrees(lonlat[0], lonlat[1]),
    ellipse: {
      semiMinorAxis: radius, // 半短轴
      semiMajorAxis: radius, // 半长轴
      height: 0.0,
      material: Cesium.Color.RED.withAlpha(0.4),
      outline: true, // 高度必须设置轮廓显示
      outlineColor: Cesium.Color.RED,
      outlineWidth: 10,
      clampToGround: true,
      eyeOffset: new Cesium.Cartesian3(0, 0, -100),
      // 贴地
      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
    }
  });
  return temp
}

5、添加图片(primitives)

this.yuntuPri = this.Global.viewer.scene.primitives.add(
  new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: new Cesium.RectangleGeometry({
        rectangle: Cesium.Rectangle.fromDegrees(70, 5, 139, 54),
      }),
    }),
    appearance: new Cesium.EllipsoidSurfaceAppearance({
      aboveGround: true,
    }),
  })
)
this.yuntuPri.appearance.material = new Cesium.Material({
  fabric: {
    type: "Image",
    uniforms: {
      image: `xxx.jpg`,// require(`@/assets/images/linye/tj/${imgIndex}.jpg`),//"./images/vis_202208240230.jpg",
      alpha: 1, //透明度
    },
    components: {
      diffuse: "texture2D(image, fract(repeat * materialInput.st)).rgb",
      alpha: "texture2D(image, fract(repeat * materialInput.st)).a * alpha", //设置透明度不可或缺的一句
    },
  },
  translucent: true,
})

6、通过url添加服务

let temp = new Cesium.ImageryLayer(
  new Custom.WebMapTileServiceImageryProvider(viewer, {
    url: url,
    layer: "",
    style: "",
    format: "",
    tileMatrixSetID: "",
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: [
      // "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15",
      "16",
      "17",
      "18",
      "19",
    ],
    tileWidth: 256,
    tileHeight: 256,
    maximumLevel: 20,
  })
);
viewer.imageryLayers.add(temp);

7、删除entities图层服务

deleteEntitesByLayer : (viewer,layer) => {
  if(!layer)return null
  if(!Array.isArray(layer)){
    viewer.entities.remove(layer)
    return null
  }else{
    layer.forEach(item => {
      viewer.entities.remove(item)
    })
    return []
  }
},

8、删除ImageryLayer图层服务

 deleteImageryLayerByLayer : (viewer,layer) => {
   if(!layer)return null
   if(!Array.isArray(layer)){
     viewer.imageryLayers.remove(layer)
     return null
   }else{
     layers.forEach(item => {
       viewer.imageryLayers.remove(item)
     })
     return []
   }
 },

9、根据经纬度跳转

flyToByPosition:(viewer,position=[]) => {
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(
        position[0], position[1],
        3000
      ), //设置位置
      // orientation: {
      //   heading: Cesium.Math.toRadians(43.020308542845186),
      //   pitch: Cesium.Math.toRadians(-31.066220990235283),
      //   roll: Cesium.Math.toRadians(359.99957800694733),
      // },
    })
  }