diff options
| -rw-r--r-- | index.html | 37 |
1 files changed, 21 insertions, 16 deletions
@@ -7,37 +7,24 @@ <link rel="stylesheet" href="https://openlayers.org/en/v4.1.0/css/ol.css" type="text/css"> </head> <body> + <textarea class="js-wkt"></textarea> <textarea class="js-selected-feature"></textarea> <div id="map"></div> <script src="https://openlayers.org/en/v4.1.0/build/ol.js"></script> <script> + var input_el = document.getElementsByClassName('js-wkt')[0]; var output_el = document.getElementsByClassName('js-selected-feature')[0]; var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); - var wkt = 'POLYGON((10.689 -25.092, 34.595 ' + - '-20.170, 38.814 -35.639, 13.502 ' + - '-39.155, 10.689 -25.092))'; - var format = new ol.format.WKT(); - var feature = format.readFeature(wkt, { - dataProjection: 'EPSG:4326', - featureProjection: 'EPSG:3857' - }); - - var vector = new ol.layer.Vector({ - source: new ol.source.Vector({ - features: [feature] - }) - }); - var map = new ol.Map({ - layers: [raster, vector], + layers: [raster], target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([2.3475075, 48.869163]), @@ -56,6 +43,24 @@ }); map.addInteraction(select_click); + + input_el.onblur = function(e) { + var wkt_features = e.target.value.split('\n'); + wkt_features = wkt_features.map(function(wkt) { + return format.readFeature(wkt, { + dataProjection: 'EPSG:4326', + featureProjection: 'EPSG:3857' + }); + }); + + map.addLayer( + new ol.layer.Vector({ + source: new ol.source.Vector({ + features: wkt_features + }) + }) + ); + }; </script> </body> </html> |