cesium应用篇:静态图添加与平移、缩放

游无穷

已于 2024-01-23 19:44:37 修改

阅读量727

点赞数 10

分类专栏： WebGL Cesium 文章标签： cesium webgis 静态图

于 2024-01-23 19:40:17 首次发布

本文链接：https://blog.csdn.net/u010206379/article/details/135782161

版权

Cesium 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

WebGL

4 篇文章 1 订阅

订阅专栏

本文介绍了如何在HTML页面中使用Cesium库添加静态图，并通过键盘事件实现对静态图的移动和缩放操作，同时展示了如何添加OSM底图和实时更新primitive的过程。

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

应用说明

添加静态图到指定extent
通过键盘事件对static image进行调整
- 向东、西、南、北移动
- 沿东西、南北方向缩放
- 命令行侧输出当前extent，可用于几何匹配

初始化

Earth 初始化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.111/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    html, body{ margin:0; height:100%; }
    #cesiumContainer {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
  Cesium.Ion.defaultAccessToken = 'your_key';

  const viewer = new Cesium.Viewer('cesiumContainer',
    {
      geocoder: true, //搜索框
      homeButton: false, //home按钮
      sceneModePicker: false, //3d/2d 模式切换按钮
      baseLayerPicker: false, //图层选择按钮
      baseLayer: false,
      navigationHelpButton: false, //右上角的帮助按钮
      animation: false, //左下角的动画控件的显示
      shouldAnimate: false, //控制模型动画
      timeline: false, //底部的时间轴
      fullscreenButton: false, //右下角的全屏按钮
      selectionIndicator: false, //选择指示器
      infoBox: false, //信息面板
    });

  viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏logo版权


</script>
</div>
</body>
</html>

在这里插入图片描述
2. 添加OSM底图

viewer.imageryLayers.addImageryProvider(
  new Cesium.OpenStreetMapImageryProvider()
)

在这里插入图片描述

添加静态图

配置初始参数

![// 配置参数信息
// 边界列表
const extent = \[115.5141293319635, 116.44787066803651, 38.67539196000001, 39.21660804000001\]
// 解析西、东、南、北参数
let west = extent\[0\], east = extent\[1\], south = extent\[2\], north = extent\[3\]
// 纬度移动幅度、经度移动幅度、纬度缩放比例、经度缩放比例
let latDelta = 0.001, lonDelta = 0.001, latScale = 0.01, lonScale = 0.01;](https://img-blog.csdnimg.cn/direct/5b604d9cb241470781800c153e7a9434.png)

创建静态图片材质和对应primitive

// 创建一个静态图片材质
const imageMaterial = new Cesium.Material({
  fabric: {
    type: 'Image',
    uniforms: {
      image: "../../SampleData/10236.jpg"  // 替换为您的静态图片路径
    },
    components: {
      // 透明度
      alpha: 0.5,
    },
  }
});

// 获取primitive
function getPrimitive(){
  return new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: new Cesium.RectangleGeometry({
        rectangle: Cesium.Rectangle.fromDegrees(
          west,
          south,
          east,
          north
        ),
        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
      }),
    }),
    appearance: new Cesium.EllipsoidSurfaceAppearance({
      material: imageMaterial,
      aboveGround: false,
    }),
  })
}

添加primitive并flyTo

// 添加primitive
let staticImagePrimitive = viewer.scene.primitives.add(
  getPrimitive()
);

// flyTo 添加的 primitive
viewer.camera.flyTo({
  destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});

在这里插入图片描述

添加事件响应

开启键盘事件响应

const scene = viewer.scene;
const canvas = viewer.canvas;
canvas.setAttribute("tabindex", "0"); 
canvas.onclick = function () {
  canvas.focus();
};

对键盘事件进行解析

// 根据键盘事件信息 解析 并返回对应关键词信息
function getFlagForKeyCode(keyCode) {
  switch (keyCode) {
    case "W".charCodeAt(0):
      return "moveUp";
    case "S".charCodeAt(0):
      return "moveDown";
    case "Q".charCodeAt(0):
      return "xScale";
    case "E".charCodeAt(0):
      return "yScale";
    case "Z".charCodeAt(0):
      return "xDownScale";
    case "C".charCodeAt(0):
      return "yDownScale";
    case "D".charCodeAt(0):
      return "moveRight";
    case "A".charCodeAt(0):
      return "moveLeft";
    default:
      return undefined;
  }
}

添加监听事件

document.addEventListener(
  "keydown",
  function (e) {
    const flagName = getFlagForKeyCode(e.keyCode);
    // 向北移动
    if (flagName == "moveUp"){
      north = north + latDelta;
      south = south + latDelta;
    } 
    // 向南移动
    else if (flagName == "moveDown"){
        north = north - latDelta;
        south = south - latDelta;
    }
    // 向东移动
    else if (flagName == "moveRight"){
      west = west + lonDelta;
      east = east + lonDelta;
    }
    // 向西移动
    else if (flagName == "moveLeft"){
      west = west - lonDelta;
      east = east - lonDelta;
    }
    // 东西方向放大
    else if (flagName == "xScale"){
      let xDelta = (east - west) * lonScale;
      west = west - xDelta;
      east = east + xDelta;
    }
    // 南北方向放大
    else if (flagName == "yScale"){
      let yDelta = (north - south) * latScale;
      north = north + yDelta;
      south = south - yDelta;
    }
    // 东西方向缩小
    else if (flagName == "xDownScale"){
      let xDelta = (east - west) * lonScale;
      west = west + xDelta;
      east = east - xDelta;
    }
    // 南北方向缩小
    else if (flagName == "yDownScale"){
      let yDelta = (north - south) * latScale;
      south = south + yDelta;
      north = north - yDelta;
    } else {
        return
    }
    
    updatePrimitive(staticImagePrimitive)
    console.log(west,  east, south, north)
  }
);

// 更新primitive
function updatePrimitive(primitive){
  viewer.scene.primitives.remove(primitive)
  staticImagePrimitive = viewer.scene.primitives.add(
    getPrimitive()
  );
}