Cesium基础用法笔记

最新推荐文章于 2024-08-26 16:15:59 发布

九霄123

最新推荐文章于 2024-08-26 16:15:59 发布

阅读量1.6k

点赞数 1

分类专栏： openlayer+Cesium+mapbox 文章标签： javascript 前端

本文链接：https://blog.csdn.net/lyxkgc/article/details/124796138

版权

openlayer+Cesium+mapbox 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Cesium

第一部分：简介

cesium.js是一个开源的前端js库，可以用来构建世界级的三维地理空间应用程序，开发三维地图页面或渲染3D城市建模，可以使用cesium.js。

第二部分：关于使用

注册账号，即可获取taken。作用是部分功能和图层的使用，需要配置账号赋予资源许可，才能正确获取。

Token

demo 官网下载资源包。引入css js 如下

<!DOCTYPE html>
<html lang="en">
<script src="./Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    const viewer = new Cesium.Viewer('cesiumContainer');    
  </script>
 </div>
</body>
</html>

隐藏除地图外所有控件和版本号

    const viewer = new Cesium.Viewer('cesiumContainer', {
      geocoder: false, //右上角 搜索
      homeButton: false, //右上角 Home
      sceneModePicker: false, //右上角 2D/3D切换
      baseLayerPicker: false, //右上角 地形
      navigationHelpButton: false, //右上角 Help
      animation: false, // 左下角 圆盘动画控件
      timeline: false, //时间轴
      fullscreenButton: false, //右下角 全屏控件
      vrButton: false, // 如果设置为true，将创建VRButton小部件。
      scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
      infoBox: false, //隐藏点击要素后的提示信息
    });
    viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏版本信息

地图视角 camera 类

Viewer 类是 cesium 的核心类，是地图可视化展示的主窗口，cesium 程序应用的切入口，扮演必不可少的核心角色。效果是，加载页面直接打开就是设置的指定地理位置。

常用方法

setView(options)

地球直角坐标系XYZ x: 亚洲 Y：南非 Y 北冰洋

// 1. Set position with a top-down view

  viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 1500.0), // 北京故宫坐标
      orientation: {
        heading: Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
        pitch: Cesium.Math.toRadians(-90), // default value (looking down)
        roll: 0.0 // default value
      }
    });
参数： 经纬度 高度，viewer为实例，加入该句代码，即加载效果。
默认抬头90度， 从上往下-90度。
heading：控制左右摆头
pitch：上下摆头

快速确定地图视角方法

找到适合的地图后，network打开。

// viewer.camera.heading
// 8.881784197001252e-15
// viewer.camera.pitch
// -1.5706908806820534
// viewer.camera.position
// Cartesian3 {x: -4484105.469254842, y: 6237864.352916687, z: 5700186.830250205}
获取到这三个参数。填入参数。注意转换坐标系

    viewer.camera.setView({
      destination: new Cesium.Cartesian3(-4484105.469254842,  6237864.352916687,                   5700186.830250205),
      orientation: {
        heading: 8.881784197001252e-15, // east, default value is 0.0 (north)
        pitch: -1.5706908806820534, // default value (looking down)
        roll: 0.0 // default value
      }
    });

flyTo

飞视角

    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });

添加地图点

添加图层

Cesium支持从几个标准服务中绘制和分层高分辨率影像（地图）。图层可以排序并混合在一起。每一层的亮度、对比度、伽马、色相和饱和度都可以动态改变。本章教程将介绍影像图层概念和相关Cesium API。

EsriArcGIS MapServer的图层： imageryProvider配置项

var viewer = new Cesium.Viewer('cesiumContainer', {  
    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({  
        url :     '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'  
    }),  
    baseLayerPicker : false  
});

项目实例：添加自己的图层

earth.zInst.viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapServiceImageryProvider({
          // show: false,
          url: "http://ip:端口/geoserver/y***jt/wms",
          layers: "y**zjt:hbi_2020",
          parameters: {
            service: "WMS",
            format: "image/png",
            transparent: true,
            srs: "EPSG:4490",
            CQL_FILTER: ADMINISTRATIVE in ('国道','省道','县道','乡道','村道'),
          },
        })
      ,3)

添加点

可以看到entity通过viewer中的entities加载到场景中，entities是entity的集合对象。这是一个最简单的示例，在场景中加一个点，可以看到需要以下属性：
position ：点在场景中位置
point：指明该entity对象为point类型，其中大小为10、颜色为黄色。

  查看第一个例子
  viewer.entities.add({
       position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
       point : {
           pixelSize : 10,
           color : Cesium.Color.YELLOW
       }
   });
   API查entity，可以看到其他属性。
   
   
   var entity = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 2.61),
      point: {
        color: Cesium.Color.RED, //点位颜色
        pixelSize: 10 //像素点大小
      },
      label: {
        text: '测试名称',
        font: '14pt Source Han Sans CN', //字体样式
        fillColor: Cesium.Color.BLACK, //字体颜色
        backgroundColor: Cesium.Color.AQUA, //背景颜色
        showBackground: true, //是否显示背景颜色
        style: Cesium.LabelStyle.FILL, //label样式
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
        pixelOffset: new Cesium.Cartesian2(10, 0) //偏移
      }
    });
    viewer.zoomTo(entity) //居中到该点

图片标记点

参考log

    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 2.61),
      billboard: {
        // 图像地址，URI或Canvas的属性
        image: '/location.png',
        // 设置颜色和透明度
        color: Cesium.Color.WHITE.withAlpha(0.8),
        // 高度（以像素为单位）
        height: 50,
        // 宽度（以像素为单位）
        width: 50,
        // 逆时针旋转
        rotation: 20,
        // 大小是否以米为单位
        sizeInMeters: false,
        // 相对于坐标的垂直位置
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // 相对于坐标的水平位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
        pixelOffset: new Cesium.Cartesian2(10, 0),
        // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
        scale: 1.0,
        // 是否显示
        show: true
      }
    });

文字

viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(120, 30, 5),
      // 点
      point: {
        color: Cesium.Color.RED, // 点位颜色
        pixelSize: 10 // 像素点大小
      },
      // 文字
      label: {
        // 文本。支持显式换行符“ \ n”
        text: '测试名称',
        // 字体样式，以CSS语法指定字体
        font: '14pt Source Han Sans CN',
        // 字体颜色
        fillColor: Cesium.Color.BLACK,
        // 背景颜色
        backgroundColor: Cesium.Color.AQUA,
        // 是否显示背景颜色
        showBackground: true,
        // 字体边框
        outline: true,
        // 字体边框颜色
        outlineColor: Cesium.Color.WHITE,
        // 字体边框尺寸
        outlineWidth: 10,
        // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
        scale: 1.0,
        // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        // 相对于坐标的水平位置
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // 相对于坐标的水平位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
        pixelOffset: new Cesium.Cartesian2(10, 0),
        // 是否显示
        show: true
      }
    });