Cesium 在地图鼠标点击进行定位，并显示经纬度-Toy模板网

这篇具有很好参考价值的文章主要介绍了Cesium 在地图鼠标点击进行定位，并显示经纬度。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue工程加载cesium 可以参考之前的文章：vue 使用cesium简单介绍_vue使用cesium_夜跑者的博客-CSDN博客

这篇文章介绍一下如何响应鼠标左键获取经纬度，以及在地图上添加广告牌。

1）响应鼠标左键，并获取经纬度

主要用到了2个接口ScreenSpaceEventHandler， setInputAction，代码如下：

      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
      handler.setInputAction((movement) => {
        
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

2）在地图上添加广告牌

采用创建一个实体示例，添加广告牌，代码如下：

    addBillboard(coordinate){
      const billboardOrigin = this.viewer.entities.getById("billboardId")
      if(billboardOrigin){
        //根据id, 清除之前创建的实体
        this.viewer.entities.remove(billboardOrigin)
      }
      const billboardEntity = new Cesium.Entity({
        id: 'billboardId',
        position: Cesium.Cartesian3.fromDegrees(coordinate.longitude, coordinate.latitude, 0),
        billboard: {
          image: '/static/logo.png',
          scale: 0.1
        },
        label: {
          text: `经度：${coordinate.longitude} \n 纬度：${coordinate.latitude}`,
          font: "2pt",
          fillColor: Cesium.Color.RED,
          show: true,
          pixelOffset: new Cesium.Cartesian2(0, -30),
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER
        }
      })
      this.viewer.entities.add(billboardEntity)
    },

全部代码如下：

<template>
  <div id="app">
    <div id="mapId"></div>
  </div>
</template>

<script>


export default {
  name: 'App',
  mounted() {
    this.init()
    this.click()
  },
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ'
      this.viewer = new Cesium.Viewer('mapId', {
        homeButton: true,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: false, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
      });
      setTimeout(() => {
        console.log("go to china")
        this.viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(113, 16, 2500000),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-90),
            roll: 0

          }
        })
      }, 500);
    },
    click() {
      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
      handler.setInputAction((movement) => {
        const lonLat =  this.getLonLatFromEllipsoid(movement)
        this.addBillboard(lonLat)
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
    addBillboard(coordinate){
      const billboardOrigin = this.viewer.entities.getById("billboardId")
      if(billboardOrigin){
        //根据id, 清除之前创建的实体
        this.viewer.entities.remove(billboardOrigin)
      }
      const billboardEntity = new Cesium.Entity({
        id: 'billboardId',
        position: Cesium.Cartesian3.fromDegrees(coordinate.longitude, coordinate.latitude, 0),
        billboard: {
          image: '/static/logo.png',
          scale: 0.1
        },
        label: {
          text: `经度：${coordinate.longitude} \n 纬度：${coordinate.latitude}`,
          font: "2pt",
          fillColor: Cesium.Color.RED,
          show: true,
          pixelOffset: new Cesium.Cartesian2(0, -30),
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER
        }
      })
      this.viewer.entities.add(billboardEntity)
    },
    getLonLatFromEllipsoid(movement) {
      //获取椭球上点的经纬度
      let cartesian = this.viewer.camera.pickEllipsoid(movement.position);
      let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
      let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
      let alt = cartographic.height; // 高度，椭球面height永远等于0
      let coordinate = {
        longitude: Number(lng.toFixed(6)),
        latitude: Number(lat.toFixed(6)),
        altitude: Number(alt.toFixed(2))
      };      
      console.log('lonlat from Ellipsoid: ', coordinate)
      return coordinate
    },
  }
}
</script>

<style></style>

注意：在使用上述代码时，把accessToken 换成自己的文章来源地址https://www.toymoban.com/news/detail-581752.html

到了这里，关于Cesium 在地图鼠标点击进行定位，并显示经纬度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！