cesium之地图显示坐标、视角高度、比例尺、海拔效果篇

效果图:

实现代码:

const self = this;
    let lontitude = '', latitude = '', h = '';
    var handler3D = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
    handler3D.setInputAction(function (movement) {
      var pick = new Cesium.Cartesian2(movement.endPosition.x, movement.endPosition.y);
      if (pick) {
        var cartesian = self.viewer.scene.globe.pick(self.viewer.camera.getPickRay(pick), self.viewer.scene);
        if (cartesian) {
          //世界坐标转地理坐标(弧度)
          var cartographic = self.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
          if (cartographic) {
            lontitude = Cesium.
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
要在Vue 3中使用cesium显示比例尺海拔高度,你需要进行以下步骤: 1. 安装cesium库 使用以下命令安装Cesium库: ``` npm install cesium --save ``` 2. 在组件中引入cesium 在Vue组件中引入cesium库,并创建一个Cesium Viewer实例: ```javascript import * as Cesium from 'cesium'; export default { created() { this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, { terrainProvider: Cesium.createWorldTerrain() }); } } ``` 3. 显示比例尺 使用Cesium的`ImageryLayer`和`ScaleBar`类可以在Cesium Viewer中显示比例尺: ```javascript import * as Cesium from 'cesium'; export default { created() { this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, { terrainProvider: Cesium.createWorldTerrain() }); const imageryProvider = new Cesium.createWorldImagery(); const layer = this.viewer.imageryLayers.addImageryProvider(imageryProvider); this.viewer.scene.globe.depthTestAgainstTerrain = true; const scaleBar = new Cesium.ScaleBar({ container: this.$refs.cesiumContainer, // 样式可以自定义 //scaleBarElement: , //verticalPosition: , //horizontalPosition: , //minimumWidthInPixels: , //maximumWidthInPixels: , //minBarThicknessInPixels: , //maxBarThicknessInPixels: , //units: , //color: , //backgroundColor: , //font: , //barThickness: , //padding: , //border: , //class: , //id: }); this.viewer.scene.canvas.addEventListener('mousedown', scaleBar.update, false); } } ``` 4. 显示海拔高度 使用Cesium的`TerrainProvider`和`SampledHeightProperty`类可以在Cesium Viewer中显示海拔高度: ```javascript import * as Cesium from 'cesium'; export default { created() { this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, { terrainProvider: Cesium.createWorldTerrain() }); const imageryProvider = new Cesium.createWorldImagery(); const layer = this.viewer.imageryLayers.addImageryProvider(imageryProvider); this.viewer.scene.globe.depthTestAgainstTerrain = true; const terrainProvider = Cesium.createWorldTerrain(); const entity = this.viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), name: 'Philadelphia', label: { text: 'Philadelphia', font: '14pt monospace', style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -9) } }); const heights = []; const positions = [ Cesium.Cartesian3.fromDegrees(-75.596639, 40.039028), Cesium.Cartesian3.fromDegrees(-75.596765, 40.038994), Cesium.Cartesian3.fromDegrees(-75.596825, 40.038959), Cesium.Cartesian3.fromDegrees(-75.596856, 40.038929), Cesium.Cartesian3.fromDegrees(-75.596862, 40.038899), Cesium.Cartesian3.fromDegrees(-75.596869, 40.038833), Cesium.Cartesian3.fromDegrees(-75.596848, 40.038732), Cesium.Cartesian3.fromDegrees(-75.596809, 40.038635), Cesium.Cartesian3.fromDegrees(-75.596745, 40.038536), Cesium.Cartesian3.fromDegrees(-75.596664, 40.038455), Cesium.Cartesian3.fromDegrees(-75.596558, 40.038391), Cesium.Cartesian3.fromDegrees(-75.59644, 40.038348), Cesium.Cartesian3.fromDegrees(-75.59633, 40.038333), Cesium.Cartesian3.fromDegrees(-75.596208, 40.038333), Cesium.Cartesian3.fromDegrees(-75.596075, 40.038349), Cesium.Cartesian3.fromDegrees(-75.595976, 40.038374), Cesium.Cartesian3.fromDegrees(-75.595898, 40.038407), Cesium.Cartesian3.fromDegrees(-75.595828, 40.038447), Cesium.Cartesian3.fromDegrees(-75.595771, 40.038492), Cesium.Cartesian3.fromDegrees(-75.595735, 40.03854), Cesium.Cartesian3.fromDegrees(-75.595719, 40.03859), Cesium.Cartesian3.fromDegrees(-75.595712, 40.038642), Cesium.Cartesian3.fromDegrees(-75.595718, 40.038695), Cesium.Cartesian3.fromDegrees(-75.595734, 40.038744), Cesium.Cartesian3.fromDegrees(-75.595761, 40.03879), Cesium.Cartesian3.fromDegrees(-75.595799, 40.038832), Cesium.Cartesian3.fromDegrees(-75.595845, 40.038866), Cesium.Cartesian3.fromDegrees(-75.595897, 40.038891), Cesium.Cartesian3.fromDegrees(-75.595954, 40.038906), Cesium.Cartesian3.fromDegrees(-75.596013, 40.03891), Cesium.Cartesian3.fromDegrees(-75.596071, 40.038903), Cesium.Cartesian3.fromDegrees(-75.596124, 40.038886), Cesium.Cartesian3.fromDegrees(-75.596169, 40.038859), Cesium.Cartesian3.fromDegrees(-75.596204, 40.038825), Cesium.Cartesian3.fromDegrees(-75.596225, 40.038791), Cesium.Cartesian3.fromDegrees(-75.596236, 40.038751), Cesium.Cartesian3.fromDegrees(-75.596236, 40.038707), Cesium.Cartesian3.fromDegrees(-75.596225, 40.038663), Cesium.Cartesian3.fromDegrees(-75.596204, 40.038623), Cesium.Cartesian3.fromDegrees(-75.596169, 40.038589), Cesium.Cartesian3.fromDegrees(-75.596124, 40.038562), Cesium.Cartesian3.fromDegrees(-75.596071, 40.038545), Cesium.Cartesian3.fromDegrees(-75.596013, 40.038538), Cesium.Cartesian3.fromDegrees(-75.595954, 40.038542), Cesium.Cartesian3.fromDegrees(-75.595898, 40.038557), Cesium.Cartesian3.fromDegrees(-75.595845, 40.038582), Cesium.Cartesian3.fromDegrees(-75.595799, 40.038616), Cesium.Cartesian3.fromDegrees(-75.595761, 40.038658), Cesium.Cartesian3.fromDegrees(-75.595734, 40.038704), Cesium.Cartesian3.fromDegrees(-75.595718, 40.038753), Cesium.Cartesian3.fromDegrees(-75.595712, 40.038805), Cesium.Cartesian3.fromDegrees(-75.595719, 40.038857), Cesium.Cartesian3.fromDegrees(-75.595735, 40.038907), Cesium.Cartesian3.fromDegrees(-75.595771, 40.038955), Cesium.Cartesian3.fromDegrees(-75.595828, 40.038999), Cesium.Cartesian3.fromDegrees(-75.595898, 40.039039), Cesium.Cartesian3.fromDegrees(-75.595976, 40.039072), Cesium.Cartesian3.fromDegrees(-75.596075, 40.039097), Cesium.Cartesian3.fromDegrees(-75.596208, 40.039113), Cesium.Cartesian3.fromDegrees(-75.59633, 40.039113), Cesium.Cartesian3.fromDegrees(-75.59644, 40.039098), Cesium.Cartesian3.fromDegrees(-75.596558, 40.039055), Cesium.Cartesian3.fromDegrees(-75.596664, 40.038991), Cesium.Cartesian3.fromDegrees(-75.596745, 40.03891), Cesium.Cartesian3.fromDegrees(-75.596809, 40.038811), Cesium.Cartesian3.fromDegrees(-75.596848, 40.038714), Cesium.Cartesian3.fromDegrees(-75.596869, 40.038613), Cesium.Cartesian3.fromDegrees(-75.596862, 40.038547), Cesium.Cartesian3.fromDegrees(-75.596856, 40.038518), Cesium.Cartesian3.fromDegrees(-75.596825, 40.038488), Cesium.Cartesian3.fromDegrees(-75.596765, 40.038453), Cesium.Cartesian3.fromDegrees(-75.596639, 40.038419) ]; positions.forEach((position) => { heights.push(terrainProvider.getHeight(Cesium.Cartographic.fromCartesian(position))); }); const sampledHeightProperty = new Cesium.SampledHeightProperty(); sampledHeightProperty.addSamples( Cesium.JulianDate.now(), positions, heights ); entity.position = positions[0]; entity.position.setInterpolationOptions({ interpolationDegree: 1, interpolationAlgorithm: Cesium.LinearApproximation }); entity.addProperty('height'); entity.height = sampledHeightProperty; } } ``` 这样就可以在Vue 3中使用cesium显示比例尺海拔高度了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗老面i

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值