openlayer与cesium地图相互联动

最新推荐文章于 2025-09-11 14:51:16 发布

原创

最新推荐文章于 2025-09-11 14:51:16 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

博客探讨了如何实现openlayer与cesium地图的相互联动，尤其是如何在不使用olcesium.js插件的情况下，让二维的openlayer与三维的cesium地图保持位置同步，同时介绍了自定义cesium容器来更好地控制三维数据展示的需求和实现过程。

关于openlayer与cesium相互联动的功能其实有很多方法，但是网上的方法大多指向了olcesium.js这个插件，而它的功能其实更多的是将二维的数据如何在三维地图上展现，而这一点其实对于我来说是没有用得，我们想做的是，二维地图openlayer只展现二维数据，而三维地图cesium展现三维数据，但是两者查看地图位置的行为可以绑定到一起。可是olcesium.js 这个插件就没有自定义的cesium容器，导致我们不好控制三维数据的展现。没办法只能自己写一个先用着了，效果如下（记录一下），代码却是不多，遇到问题真不少o(￣ヘ￣o＃)

在这里插入图片描述

var Camera = function (viewer, map) {
  var scene=viewer.scene;//cesium场景
  //初始化三维场景
   scene.camera.setView({
     destination: Cesium.Rectangle.fromDegrees(
         map.getView().calculateExtent(map.getSize())[0],
         map.getView().calculateExtent(map.getSize())[1],
         map.getView().calculateExtent(map.getSize())[2],
         map.getView().calculateExtent(map.getSize())[3]
       ),
       orientation: {
         heading : -map.getView().getRotation(), // east, default value is 0.0 (north)
     }
   });
  //地图行为  
  var MapAction=function (e) {
   scene.camera.setV