diff --git a/examples/synthvectors_batch.html b/examples/synthvectors_batch.html new file mode 100644 index 000000000..fb073d2c3 --- /dev/null +++ b/examples/synthvectors_batch.html @@ -0,0 +1,26 @@ + + + + + + + ol3cesium synthetic vector layer example using several layers + + + +
+
+ + +
+
+
+ +
Click to add a new layer of 1000 randomly colored circles. +
Other shapes or icons may be used in spite of the circles. + + + + + + diff --git a/examples/synthvectors_batch.js b/examples/synthvectors_batch.js new file mode 100644 index 000000000..4bd54d080 --- /dev/null +++ b/examples/synthvectors_batch.js @@ -0,0 +1,109 @@ +var total = 0; +var created = 0; +var added = 0; +var vectorLayers = []; + +var addFeatures = function() { + var then = Date.now(); + var count = 1000; + var features = []; + var e = 18000000; + for (var i = 0; i < count; ++i) { + var feature = new ol.Feature({ + geometry: new ol.geom.Point([ + 2 * e * Math.random() - e, + 2 * e * Math.random() - e, + e * Math.random() + ]) + }); + var style = [new ol.style.Style({ + image: new ol.style.Circle({ + radius: 2, + fill: new ol.style.Fill({color: [ + Math.random() * 255, + Math.random() * 255, + Math.random() * 255, + Math.random() + ]}) + }) + })]; + feature.setStyle(style); + + feature.setId(e * Math.random()); + features.push(feature); + } + + var now = Date.now(); + created = now - then; + then = now; + + var vectorSource = new ol.source.Vector({}); + var vector = new ol.layer.Vector({ + source: vectorSource, + }); + vectorSource.addFeatures(features); + map.addLayer(vector); + vectorLayers.push(vector); + now = Date.now(); + added = now - then; + total += count; + + document.getElementById('total').innerHTML = total; + document.getElementById('created').innerHTML = 'Features created in ' + created + 'ms.'; + document.getElementById('added').innerHTML = 'Features added in ' + added + 'ms.'; +}; + +var tile = new ol.layer.Tile({ + source: new ol.source.TileWMS({ + url: 'http://demo.opengeo.org/geoserver/wms', + params: { + 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR' + } + }) +}); + +var map = new ol.Map({ + layers: [tile], + target: 'map2d', + view: new ol.View({ + center: [0, 0], + zoom: 2 + }) +}); + +var ol3d = new olcs.OLCesium(map); +var scene = ol3d.getCesiumScene(); +var terrainProvider = new Cesium.CesiumTerrainProvider({ + url: '//cesiumjs.org/stk-terrain/tilesets/world/tiles' +}); +scene.terrainProvider = terrainProvider; +ol3d.setEnabled(true); + + +// Show off 3D feature picking +var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); +var lastPicked; +handler.setInputAction(function(movement) { + var pickedObjects = scene.drillPick(movement.position); + if (Cesium.defined(pickedObjects)) { + for (i = 0; i < pickedObjects.length; ++i) { + var picked = pickedObjects[i].primitive; + if (picked.olFeatureId == lastPicked) continue; + var carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(picked.position); + console.log('Picked feature', picked.olFeatureId, ' is at ', carto); + lastPicked = picked.olFeatureId; + } + } else { + lastPicked = undefined; + } +}, Cesium.ScreenSpaceEventType.LEFT_CLICK); + +function clearFeatures() { + vectorLayers.forEach(function(layer) { + map.getLayers().remove(layer); + }); + vectorLayers.length = 0; + total = document.getElementById('total').innerHTML = 0; + document.getElementById('created').innerHTML = ''; + document.getElementById('added').innerHTML = ''; +}