ol-cesium
Version:
OpenLayers Cesium integration library
42 lines (39 loc) • 1.36 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" crossorigin="anonymous" type="text/css">
<link rel="stylesheet" href="../olcs.css" type="text/css">
<style>
#map { height: 300px; width: 500px }
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js" crossorigin="anonymous"></script>
<script src="../olcesium.js"></script>
<!-- In production you should use the minified Cesium for better performances -->
<script src="https://cdn.jsdelivr.net/npm/cesium@1.81.0/Build/CesiumUnminified/Cesium.js" crossorigin="anonymous"></script>
</head>
<body>
<p>Old-fashioned example</p>
<input id="enable" type="button" value="Enable/disable" />
<div id="map"></div>
</body>
<script>
var ol2d = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform([25, 20], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
var ol3d = new olcs.OLCesium({
map: ol2d,
});
ol3d.setEnabled(true);
var setEnabled = function() {ol3d.setEnabled(!ol3d.getEnabled())};
document.getElementById('enable').addEventListener('click', setEnabled);
</script>
</html>