1 |
|
2 |
|
3 | goog.require('ol.Map');
|
4 | goog.require('ol.View');
|
5 | goog.require('ol.format.GeoJSON');
|
6 | goog.require('ol.layer.Tile');
|
7 | goog.require('ol.layer.Vector');
|
8 | goog.require('ol.proj');
|
9 | goog.require('ol.source.OSM');
|
10 | goog.require('ol.source.Vector');
|
11 |
|
12 |
|
13 | var source = new ol.source.Vector();
|
14 | fetch('data/geojson/roads-seoul.geojson').then(function(response) {
|
15 | return response.json();
|
16 | }).then(function(json) {
|
17 | var format = new ol.format.GeoJSON();
|
18 | var features = format.readFeatures(json);
|
19 | var street = features[0];
|
20 |
|
21 |
|
22 | var turfLine = format.writeFeatureObject(street);
|
23 |
|
24 |
|
25 | var distance = 0.2;
|
26 |
|
27 |
|
28 | var length = turf.lineDistance(turfLine, 'kilometers');
|
29 | for (var i = 1; i <= length / distance; i++) {
|
30 | var turfPoint = turf.along(turfLine, i * distance, 'kilometers');
|
31 |
|
32 |
|
33 | var marker = format.readFeature(turfPoint);
|
34 | marker.getGeometry().transform('EPSG:4326', 'EPSG:3857');
|
35 | source.addFeature(marker);
|
36 | }
|
37 |
|
38 | street.getGeometry().transform('EPSG:4326', 'EPSG:3857');
|
39 | source.addFeature(street);
|
40 | });
|
41 | var vectorLayer = new ol.layer.Vector({
|
42 | source: source
|
43 | });
|
44 |
|
45 | var rasterLayer = new ol.layer.Tile({
|
46 | source: new ol.source.OSM()
|
47 | });
|
48 |
|
49 | var map = new ol.Map({
|
50 | layers: [rasterLayer, vectorLayer],
|
51 | target: document.getElementById('map'),
|
52 | view: new ol.View({
|
53 | center: ol.proj.fromLonLat([126.980366, 37.526540]),
|
54 | zoom: 15
|
55 | })
|
56 | });
|