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

You may also like...