OL二三维联动实例效果
OL4二三维联动实例
二三维地图联动在webGIS项目中经常使用,该文简单说明openlayers3与Cesium整合实现。
效果:
脚本准备:
<script src=”js/Cesium.js”></script>
<script src=”js/ol3cesium.js”></script>
代码:
<body onload=”init()”>
<div id=”map” style=”width:50%;height:100%;float:left;”>
</div>
<div id=”map3d” style=”width:50%;height:100%;float:left;position:relative;”></div>
</body>
function init() {
view = new ol.View({
center: ol.proj.transform([106, 30], ‘EPSG:4326’, ‘EPSG:3857’),
zoom: 4
});
layers = initLayers();
map = new ol.Map({
/// controls: initControls(),
layers: [new ol.layer.Tile({
title: “天地图地形”,
baseLayer: true,
source: new ol.source.XYZ({
url: ‘http://t0.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}’
}),
visible: true
})],
target: ‘map’,
loadTilesWhileAnimating: true,
view: view
});
///三维
map3d = new olcs.OLCesium({map: map,
target: ‘map3d’});
scene = map3d.getCesiumScene();
map3d.setEnabled(true);
}
转载自:https://blog.csdn.net/pdw521/article/details/78593189