Merge pull request #4139 from tsauerwein/turf-jsts-example

Add turf.js and JSTS example

examples/jsts.html

@@ -0,0 +1,19 @@
+---
+template: example.html
+title: JSTS Example
+shortdesc: Example on how to use JSTS with OpenLayers 3.
+docs: >
+  Example showing the integration of <a href="https://github.com/bjornharrtell/jsts">JSTS</a>
+  with OpenLayers 3.
+tags: "vector, jsts, buffer"
+resources:
+  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/javascript.util.min.js
+  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/jsts.min.js
+
+
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/jsts.js

@@ -0,0 +1,53 @@
+// NOCOMPILE
+// this example uses JSTS for which we don't have an externs file.
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+
+
+var source = new ol.source.Vector();
+$.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
+  var format = new ol.format.GeoJSON();
+  var features = format.readFeatures(response,
+      {featureProjection: 'EPSG:3857'});
+
+  var parser = new jsts.io.olParser();
+
+  for (var i = 0; i < features.length; i++) {
+    var feature = features[i];
+    // convert the OpenLayers geometry to a JSTS geometry
+    var jstsGeom = parser.read(feature.getGeometry());
+
+    // create a buffer of 40 meters around each line
+    var buffered = jstsGeom.buffer(40);
+
+    // convert back from JSTS and replace the geometry on the feature
+    feature.setGeometry(parser.write(buffered));
+  }
+
+  source.addFeatures(features);
+});
+var vectorLayer = new ol.layer.Vector({
+  source: source
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.MapQuest({
+    layer: 'osm'
+  })
+});
+
+var map = new ol.Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([126.979293, 37.528787]),
+    zoom: 15
+  })
+});

examples/turf.html

@@ -0,0 +1,19 @@
+---
+template: example.html
+title: turf.js Example
+shortdesc: Example on how to use turf.js with OpenLayers 3.
+docs: >
+  Example showing the integration of <a href="http://turfjs.org">turf.js</a>
+  with OpenLayers 3. The turf.js function <code>along</code> is used to
+  display a marker every 200 meters along a street.
+tags: "vector, turfjs, along, distance"
+resources:
+  - https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js
+
+
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/turf.js

@@ -0,0 +1,57 @@
+// NOCOMPILE
+// this example uses turf.js for which we don't have an externs file.
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+
+
+var source = new ol.source.Vector();
+$.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
+  var format = new ol.format.GeoJSON();
+  var features = format.readFeatures(response);
+  var street = features[0];
+
+  // convert to a turf.js feature
+  var turfLine = format.writeFeatureObject(street);
+
+  // show a marker every 200 meters
+  var distance = 0.2;
+
+  // get the line length in kilometers
+  var length = turf.lineDistance(turfLine, 'kilometers');
+  for (var i = 1; i <= length / distance; i++) {
+    var turfPoint = turf.along(turfLine, i * distance, 'kilometers');
+
+    // convert the generated point to a OpenLayers feature
+    var marker = format.readFeature(turfPoint);
+    marker.getGeometry().transform('EPSG:4326', 'EPSG:3857');
+    source.addFeature(marker);
+  }
+
+  street.getGeometry().transform('EPSG:4326', 'EPSG:3857');
+  source.addFeature(street);
+});
+var vectorLayer = new ol.layer.Vector({
+  source: source
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.MapQuest({
+    layer: 'osm'
+  })
+});
+
+var map = new ol.Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([126.980366, 37.526540]),
+    zoom: 15
+  })
+});