一、项目介绍
项目开发到一半,前期没说需要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上使用不了。目前大概遇到这些问题。后续继续研究方案。
