openlayer源码转cesium

前端灵派派2025-09-01 11:54

一、项目介绍

项目开发到一半，前期没说需要2d开发，后面又说最好有3d效果，这样比较炫酷。。。但是openlayer是2d开发，没办法使用3d开发的效果，因此需要用到一个插件将openlayer的地图转为3d的地图。 openlayer提供了插件 ol-cesium ，可以将openlayer的地图转3d地图。

2d地图转3d地图

二、安装插件

安装ol-cesium、cesium 插件，由于单独只安装ol-cesium插件，找不到cesium的声明，因此不仅要安装cesium，还要把cesium当初全局的对象。要不然会报错。

js 复制代码

npm install cesium ol-cesium vite-plugin-cesium

三、使用

js 复制代码

import * as Cesium from 'cesium'
import OLCesium from 'ol-cesium'
import "cesium/Build/Cesium/Widgets/widgets.css";
Cesium.Ion.defaultAccessToken = 'xxxxxx'
window.Cesium = Cesium

//ol的地图
 this.map = new Map({
      layers:new TileLayer({
      source: new XYZ({
                url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=6",
              }),
      }),
      target: id,
      view: new View({
        center: fromLonLat(this.center),
        zoom: 13,
      }),
      controls: [], // 不添加任何默认控件
});

//3d地图
const ol3d = new OLCesium({ map: this.map });
//开启3d地图
ol3d.setEnabled(true);

// 获取Cesium场景并配置
const scene = ol3d.getCesiumScene();
//地形配置
scene.terrainProvider = Cesium.createWorldTerrain({
    requestWaterMask : true, // required for water effects
    requestVertexNormals : true // required for terrain lighting
});

 // 设置初始视角
scene.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(120.0, 26.88, 1000000), // 经度,纬度,高度(米)
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-45), // 倾斜角度
    roll: 0.0
  }
});

四、使用效果

减少了2d转3d的代码量，openlayer地图上的打点、geojson的渲染可以在3d地图上正常展示，但是弹窗位置有点问题，感觉需要根据3d的坐标转换一下。openlayer的绘制的功能在3d上使用不了。目前大概遇到这些问题。后续继续研究方案。