Cesium开发工具篇 | 05与第三方库的集成

集成Three.js

Three.js是基于原生WebGL封装运行的三维引擎库，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。Three.js可应用于Web 3D的可视化（如产品在线浏览、在线三维可视化等），H5/微信小程序游戏（如跳一跳），科教领域，机械领域，WebVR（VR看房、VR看车等）以及家装室内设计等方面，是一个比较轻量级的跨浏览器JavaScript库 ，适合在浏览器中创建和显示动画3D计算机图形。将Cesium的行星级渲染和GIS功能与Three.js广泛而易用的通用3D API相结合，为新的WebGL体验开启了许多可能性。两者的集成总体思路如下：
（1）创建两个容器，分别用于显示cesium和three的场景
（2）初始化cesium、three渲染器
（3）调整three和cesium的渲染频率保持一致
（4）调整three和cesium的相机位置角度保持一致
（5）加入要展示的图形
以下展示了部分核心代码。

 

 


  // 2-1.初始化cesium
  // cesium初始化时，要将它的自动渲染关掉（即useDefaultRenderLoop属性调整为false）
  cesium.viewer = new Cesium.Viewer("cesiumContainer", {
    useDefaultRenderLoop: false, // 关闭自动渲染
    ...
  });

   // 2-2.初始化three
   function initThree() {
     let fov = 45;
     let width = window.innerWidth;
     let height = window.innerHeight;
     let aspect = width / height;
     let near = 1;
     let far = 10 * 1000 * 1000; // needs to be far to support Cesium's world-scale rendering
     three.scene = new THREE.Scene();
     three.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
     three.renderer = new THREE.WebGLRenderer({ alpha: true });        ThreeContainer.appendChild(three.renderer.domElement);
   }

   // 3.调整three和cesium的渲染频率
   // 手动开启cesium和three的渲染，并放进一个渲染频率里。
   function loop() {
     requestAnimationFrame(loop);
     renderCesium();
     renderThreeObj();

   // 4.调整相机一致
   // 这里使用的cesium的相机为主相机，使three的相机与cesium保持一致即可。
     renderCamera();
   }

// 5.加入要展示的图形
   // 这里加入一个cesium的图形polygon，再加入一个three的球体，以及一个three的12面体。
   function init3DObject() {
     let entity = {
       name: "Polygon",
       polygon: {
         hierarchy: Cesium.Cartesian3.fromDegreesArray([
           minWGS84[0],
           minWGS84[1],
           maxWGS84[0],
           minWGS84[1],
           maxWGS84[0],
           maxWGS84[1],
           minWGS84[0],
           maxWGS84[1],
         ]),
         material: Cesium.Color.RED.withAlpha(0.1),
       },
     };
     let Polypon = cesium.viewer.entities.add(entity);
     let doubleSideMaterial = new THREE.MeshNormalMaterial({
       side: THREE.DoubleSide,
     });

     geometry = new THREE.SphereGeometry(1, 32, 32);
     let sphere = new THREE.Mesh(
       geometry,
       new THREE.MeshPhongMaterial({
         color: 0xffffff,
         side: THREE.DoubleSide,
       })
     ); //12面体
     ...         
     }
   }

效果图如下：

集成Echarts

Echarts 是一个基于 JavaScript 的开源可视化图表库，具有丰富的图表类型，可用于地理数据可视化的地图、热力图、线图等。Cesium通过与Echarts的地理数据可视化能力相结合，大大增强Cesium整体的可视化效果。本文通过封装EchartsLayer来实现迁徙图的效果。需要注意的是，在图表的option配置项中不需要写geo，同时每个series数组中元素都必须加coordinateSystem:'GLMap'。部分核心代码如下：

var EchartsLayer = function (map, options) {
  this._map = map;
  this._overlay = this._createChartOverlay();
  if (options) {
    this._registerMap();
  }
  this._overlay.setOption(options || {});
};

let _echartLayer = new EchartsLayer(viewer, option);

简单效果图如下所示：

集成heatmap

heatmap.js是一个轻量级的、最先进的用于表达热力图的可视化前端库，比如人群分布情况、污染物浓度变化情况、信号强度等。感兴趣的同学可以进入官网https://www.patrick-wied.at/static/heatmapjs/ 查看详情。
下面说一下cesium和heatmap集成的原理，其实也很简单，就是把使用heatmap.js生成的热力图，以贴图材质的方式赋给某个几何图形贴图属性。部分核心代码如下：

   // 根据热力图图片范围，生成随机热力点和强度值
   var dataRaw = [];
   for (var i = 0; i < len; i++) {
     var point = {
       lat: latMin + Math.random() * (latMax - latMin),
       lon: lonMin + Math.random() * (lonMax - lonMin),
       value: Math.floor(Math.random() * 100),
     };
     dataRaw.push(point);
   }
   // 生成数据
   for (var i = 0; i < len; i++) {
     var dataItem = dataRaw[i];
     var point = {
       x: Math.floor(((dataItem.lat - latMin) / (latMax - latMin)) * width),
       y: Math.floor(((dataItem.lon - lonMin) / (lonMax - lonMin)) * height),
       value: Math.floor(dataItem.value),
     };
     max = Math.max(max, dataItem.value);
     points.push(point);
   }

   // 创建热力图
   var heatmapInstance = h337.create({
     container: document.querySelector(".heatmap"),
   });

   var data = {
     max: max,
     data: points,
   };
   heatmapInstance.setData(data);

// 将热力图添加到球体上(生成的热力图canvas元素类名为heatmap-canvas)
   var canvas = document.getElementsByClassName("heatmap-canvas");
   // console.log(canvas);
   viewer.entities.add({
     name: "heatmap",
     rectangle: {
       coordinates: Cesium.Rectangle.fromDegrees(
         lonMin,
         latMin,
         lonMax,
         latMax
       ),
       material: new Cesium.ImageMaterialProperty({
         image: canvas[0],
         transparent: true,
       }),
     },
   });

效果图如下：

2.png

集成Turf

Cesium本身更侧重于三维可视化，在空间分析方面会显得薄弱些，当然空间分析能力可以借助开源postGIS中的函数去实现，然后将结果通过Cesium去呈现。这里我们不对postGIS进行介绍，而是给大家介绍一个轻量级的用于空间分析的前端库，即Turf。Turf的定位是地理空间分析库，处理各种地图算法；特点是离线计算、模块化、快速。下面是一个简单的示例：计算两点之间的距离。

var point1 = turf.point([144.834823, -37.771257]);
var point2 = turf.point([145.14244, -37.830937]);
var midpoint = turf.midpoint(point1, point2);

而下面的截图是通过Turf、Cesium实现的点、线、面缓冲区分析结果，即借助了Turf的空间分析能力和Cesium的可视化能力。

3.png

部分核心代码如下：

 // 初始化点缓冲
 function initPointBuffer() {
   let point = [106.422638966289, 29.5698367125623];
   addPoint(point);

   let pointF = turf.point(point);
   let buffered = turf.buffer(pointF, 60, { units: "meters" });
   let coordinates = buffered.geometry.coordinates;
   let points = coordinates[0];
   let degreesArray = pointsToDegreesArray(points);
   addBufferPolyogn(Cesium.Cartesian3.fromDegreesArray(degreesArray));
 }

 // 添加点
 function addPoint(point) {
   viewer.entities.add({
     position: Cesium.Cartesian3.fromDegrees(point[0], point[1], 0),
     point: {
       pixelSize: 10,
       heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
       color: Cesium.Color.YELLOW,
       outlineWidth: 3,
       outlineColor: Cesium.Color.YELLOW.withAlpha(0.4),
     },
   });
 }
 // 添加缓冲面
 function addBufferPolyogn(positions) {
   viewer.entities.add({
     polygon: {
       hierarchy: new Cesium.PolygonHierarchy(positions),
       material: Cesium.Color.RED.withAlpha(0.6),
       classificationType: Cesium.ClassificationType.BOTH,
     },
   });
 }

如果你觉得比较麻烦的话，网上也有大神基于cesium、turf、shpjs、proj4js等这些库文件封装好了CesiumVectorTile，GitHub地址为https://github.com/engineerhe/CesiumVectorTile，支持小数据量的geojson、shape文件矢量动态切片，并且还能实现贴地效果。
获取上述全部源代码可访问本人GitHub地址：https://github.com/ls870061011。