I do have a bunch of coords as a string read from a wps request result. I want to display these coordinates as a new layer added to the exisiting map. What I do is to split the string by containing spaces and push it to a new array. After that I iterate over the new array so I can push the coordinates as points to another array in a desired format ([lat, lng]). After that, I want to build a LinearRing from these points and add the LinearRing as a layer to my map.
Unfortunately this is erroneous somewhere and I do not get any errors logged into my console. By now I do not know why it does not display anything on my map. I've tried to add a Point to the map with a coordinate pair from the string which works quite well.
Here's also a JSFiddle: http://jsfiddle.net/wbuao2p0/
(function () { var coords = "55.8634874529136 9.631500051342137 55.805972364525914 9.548784637840715 55.14482340752173 8.898109926807917 " + "54.37485632537419 8.380764572779743 53.522573247162796 8.014555510194093 52.617309603810206 7.812087589403351 " + "52.614355746887576 7.811710003292555 51.66694415234981 7.781187272498014 50.730797466775236 7.930015192081321 " + "49.83956156468691 8.252844765368144 49.82531948437923 8.259592481571666 48.98935698950589 8.76078730159239 " + "48.26651544342399 9.414644808782137 47.68426367900724 10.196317645257878 47.46134051972574 10.663796677950817 " + "47.44527206667563 10.65618066872225 47.41854993523704 10.712559712068128 47.3779293363187 10.838713359827098 " + "47.26472795130263 11.076101319594834 47.235921788657656 11.18904832359383 47.1275340000139 11.464071852121915 " + "47.12667976005475 11.466644260434636 47.03711564154165 11.874958636180834 46.94893974756699 12.137476538757129 " + "46.946391533519524 12.148647883992075 46.862762846216015 12.617094197216767 46.86208001538398 12.62235562376322 " + "46.84835634771807 12.808810685839008 46.82885100873644 12.887922280925599 46.82587936285959 12.913514148562475 " + "46.79313271854955 13.569218084395681 46.793186122964315 13.572597910595023 46.7968282660043 13.70010684882963 " + "46.797469135075175 13.715610737856597 46.91313241762351 14.597643499712868 46.91482995915892 14.605253829988193 " + "46.94051690258967 14.714615522672169 46.94470162532205 14.731573765998991 47.03965181587298 15.065926800025096 " + "47.04076570697014 15.069386735528871 47.0971543190374 15.234595324698322 47.10921639411892 15.26801495448744 " + "47.53141273642792 16.154028894640344 48.118553671058436 16.940499476725634 48.848016177433216 17.59712334576924 " + "49.691693468376144 18.098600246883922 50.0169553372784 18.21353961428459 50.21523496552912 18.31453702415812 " + "50.58776747601728 18.415250273922293 50.61707796761752 18.42560786478932 50.636347014984715 18.428383633035153 " + "51.21296112952521 18.58426984350083 51.25002091258902 18.590269409720722 52.29453665661267 18.64849965595591 " + "53.32830647762536 18.488113065951357 53.33169011267799 18.487217561626725 54.11128417393963 18.210077908740885 " + "54.4364395173484 18.02938155363006 54.71055010763587 17.908084827583007 54.720762056373424 17.902155827076 " + "54.915291540051065 17.761731176118456 55.13242755798435 17.647555434158786 55.47662158526144 17.356524858903985 " + "55.52396504913427 17.32234911719236 55.549477740903995 17.29976990766246 55.59558289581277 17.255938050595006 " + "55.96238666471352 16.945789984652894 56.621093859451975 16.08126023006796 56.62137995797971 16.08078530361504 " + "56.823246738627674 15.711335621037726 56.862438825053665 15.631824322664553 56.924133989456976 15.50198578534042 " + "56.959278380671066 15.425195193787415 57.28134660084014 14.48342212176854 57.41049116093812 13.49651476024982 " + "57.34159450394165 12.503580871072169 57.07738676862414 11.543967026746685 57.06553491005662 11.513261639456314 " + "56.971780105418375 11.335268426462179 56.97028222323641 11.331469925786793 56.63980353567406 10.649832439979386 " + "56.21014282052663 10.025943431541371 56.189078059345206 9.999836585481649 56.074375041474674 9.881733124306075 " + "55.9879654682174 9.753913025766153 55.8634874529136 9.631500051342137"; var style = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'http://ol3js.org/en/master/examples/data/icon.png' })) }); var vectorSource = new ol.source.Vector({ //create empty vector }); var res = []; var points = []; //split the string every space and push it to a new array res.push(coords.split(" ")); //iterate the new array and push a coordinate pair into a new array for (var i = 0; i < res[0].length; i += 1) { //points.push(new ol.geom.Point([res[0], res[0][i += 1]])); points.push(ol.proj.transform([res[0][i += 1], res[0]], 'EPSG:4326', 'EPSG:3857')); } //build a linearRing from the new array var linearRing = new ol.geom.LinearRing(points); //add linearRing as vector to the map /* var feature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([9.753913025766153, 55.9879654682174], 'EPSG:4326', 'EPSG:3857')) }); */ var feature = new ol.Feature({ geometry: new ol.geom.Polygon([[points]]) }); //add the feature vector to the layer vector, and apply a style to whole layer vectorSource.addFeature(feature); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: style }); var map = new ol.Map({ layers: [new ol.layer.Tile({source: new ol.source.OSM()})], target: document.getElementById('map'), view: new ol.View({ center: [ 9.753913025766153, 55.9879654682174], zoom: 3 }) }); map.addLayer(vectorLayer); })();
أكثر...
Unfortunately this is erroneous somewhere and I do not get any errors logged into my console. By now I do not know why it does not display anything on my map. I've tried to add a Point to the map with a coordinate pair from the string which works quite well.
Here's also a JSFiddle: http://jsfiddle.net/wbuao2p0/
(function () { var coords = "55.8634874529136 9.631500051342137 55.805972364525914 9.548784637840715 55.14482340752173 8.898109926807917 " + "54.37485632537419 8.380764572779743 53.522573247162796 8.014555510194093 52.617309603810206 7.812087589403351 " + "52.614355746887576 7.811710003292555 51.66694415234981 7.781187272498014 50.730797466775236 7.930015192081321 " + "49.83956156468691 8.252844765368144 49.82531948437923 8.259592481571666 48.98935698950589 8.76078730159239 " + "48.26651544342399 9.414644808782137 47.68426367900724 10.196317645257878 47.46134051972574 10.663796677950817 " + "47.44527206667563 10.65618066872225 47.41854993523704 10.712559712068128 47.3779293363187 10.838713359827098 " + "47.26472795130263 11.076101319594834 47.235921788657656 11.18904832359383 47.1275340000139 11.464071852121915 " + "47.12667976005475 11.466644260434636 47.03711564154165 11.874958636180834 46.94893974756699 12.137476538757129 " + "46.946391533519524 12.148647883992075 46.862762846216015 12.617094197216767 46.86208001538398 12.62235562376322 " + "46.84835634771807 12.808810685839008 46.82885100873644 12.887922280925599 46.82587936285959 12.913514148562475 " + "46.79313271854955 13.569218084395681 46.793186122964315 13.572597910595023 46.7968282660043 13.70010684882963 " + "46.797469135075175 13.715610737856597 46.91313241762351 14.597643499712868 46.91482995915892 14.605253829988193 " + "46.94051690258967 14.714615522672169 46.94470162532205 14.731573765998991 47.03965181587298 15.065926800025096 " + "47.04076570697014 15.069386735528871 47.0971543190374 15.234595324698322 47.10921639411892 15.26801495448744 " + "47.53141273642792 16.154028894640344 48.118553671058436 16.940499476725634 48.848016177433216 17.59712334576924 " + "49.691693468376144 18.098600246883922 50.0169553372784 18.21353961428459 50.21523496552912 18.31453702415812 " + "50.58776747601728 18.415250273922293 50.61707796761752 18.42560786478932 50.636347014984715 18.428383633035153 " + "51.21296112952521 18.58426984350083 51.25002091258902 18.590269409720722 52.29453665661267 18.64849965595591 " + "53.32830647762536 18.488113065951357 53.33169011267799 18.487217561626725 54.11128417393963 18.210077908740885 " + "54.4364395173484 18.02938155363006 54.71055010763587 17.908084827583007 54.720762056373424 17.902155827076 " + "54.915291540051065 17.761731176118456 55.13242755798435 17.647555434158786 55.47662158526144 17.356524858903985 " + "55.52396504913427 17.32234911719236 55.549477740903995 17.29976990766246 55.59558289581277 17.255938050595006 " + "55.96238666471352 16.945789984652894 56.621093859451975 16.08126023006796 56.62137995797971 16.08078530361504 " + "56.823246738627674 15.711335621037726 56.862438825053665 15.631824322664553 56.924133989456976 15.50198578534042 " + "56.959278380671066 15.425195193787415 57.28134660084014 14.48342212176854 57.41049116093812 13.49651476024982 " + "57.34159450394165 12.503580871072169 57.07738676862414 11.543967026746685 57.06553491005662 11.513261639456314 " + "56.971780105418375 11.335268426462179 56.97028222323641 11.331469925786793 56.63980353567406 10.649832439979386 " + "56.21014282052663 10.025943431541371 56.189078059345206 9.999836585481649 56.074375041474674 9.881733124306075 " + "55.9879654682174 9.753913025766153 55.8634874529136 9.631500051342137"; var style = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'http://ol3js.org/en/master/examples/data/icon.png' })) }); var vectorSource = new ol.source.Vector({ //create empty vector }); var res = []; var points = []; //split the string every space and push it to a new array res.push(coords.split(" ")); //iterate the new array and push a coordinate pair into a new array for (var i = 0; i < res[0].length; i += 1) { //points.push(new ol.geom.Point([res[0], res[0][i += 1]])); points.push(ol.proj.transform([res[0][i += 1], res[0]], 'EPSG:4326', 'EPSG:3857')); } //build a linearRing from the new array var linearRing = new ol.geom.LinearRing(points); //add linearRing as vector to the map /* var feature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([9.753913025766153, 55.9879654682174], 'EPSG:4326', 'EPSG:3857')) }); */ var feature = new ol.Feature({ geometry: new ol.geom.Polygon([[points]]) }); //add the feature vector to the layer vector, and apply a style to whole layer vectorSource.addFeature(feature); var vectorLayer = new ol.layer.Vector({ source: vectorSource, style: style }); var map = new ol.Map({ layers: [new ol.layer.Tile({source: new ol.source.OSM()})], target: document.getElementById('map'), view: new ol.View({ center: [ 9.753913025766153, 55.9879654682174], zoom: 3 }) }); map.addLayer(vectorLayer); })();
أكثر...