Merge pull request #123 from gberaudo/examples_fixes

Add synthetic points example using a new layer per batch
openlayers · Nov 14, 2014 · ceb4fc3 · ceb4fc3
2 parents 80ea07f + 2ff8997
commit ceb4fc3
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 0 deletions.
diff --git a/examples/synthvectors_batch.html b/examples/synthvectors_batch.html
@@ -0,0 +1,26 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="index, all" />
+    <title>ol3cesium synthetic vector layer example using several layers</title>
+    <link rel="stylesheet" href="../ol3/css/ol.css" type="text/css">
+  </head>
+  <body>
+    <div id="map2d" style="width:600px;height:400px;float:left;"></div>
+    <div>
+      <input type="button" value="Add 1k Features" onclick="javascript:addFeatures()" />
+      <span id="total"></span>
+    </div>
+    <div id="created"></div>
+    <div id="added"></div>
+    <input type="button" value="Clear" onclick="javascript:clearFeatures()" />
+    <div>Click to add a new layer of 1000 randomly colored circles.
+      <br />Other shapes or icons may be used in spite of the circles.
+    <script src="../ol3/build/ol.js"></script>
+    <script src="../cesium/Build/Cesium/Cesium.js"></script>
+    <script src="/@loader"></script>
+    <script src="synthvectors_batch.js"></script>
+  </body>
+</html>
diff --git a/examples/synthvectors_batch.js 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 = '';
+}