javascript - Openlayers 3 get segment and polygon points -
i working on drawing points/segments/polygons on map , uses openlayers 3. first part have done , draws points/images , makes segments/polygons etc. trying retrieve added elements points(coordinates) , in order build them other sessions. current progress getting coordinate point/image , can't coordinates segment/polygon . ideas / ??
<!doctype html> <html> <head> <title>draw , modify features example</title> <script src="jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="bootstrap.min.css"> <script src="bootstrap.min.js"></script> <link rel="stylesheet" href="ol.css" type="text/css"> <script src="ol.js"></script> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> <form class="form-inline"> <label>geometry type </label> <select id="type"> <option value="point">point</option> <option value="linestring">linestring</option> <option value="polygon">polygon</option> </select> </form> </div> </div> <script type="text/javascript"> var icons = [ "stop_sign.png", "argentina_p-32.svg.png" ]; var source = new ol.source.xyz({ url : 'tiles/{z}/{x}/{y}.png' }); var map = new ol.map({ layers : [new ol.layer.tile({ source : source })], target : 'map', view : new ol.view({ center : [3300000, 6000000], zoom : 9 }) }); var features = new ol.collection(); var featureoverlay = new ol.layer.vector({ source : new ol.source.vector({ features : features }), style : new ol.style.style({ fill : new ol.style.fill({ color : 'rgba(255, 255, 255, 0.2)' }), stroke : new ol.style.stroke({ color : '#ffcc33', width : 2 }), image : new ol.style.icon({ anchor : [0.5, 0.5], offset : [0, 0], opacity : 1, scale : 1, src : icons[1] }) }) }); featureoverlay.setmap(map); var modify = new ol.interaction.modify({ features : features, deletecondition : function (event) { return ol.events.condition.shiftkeyonly(event) && ol.events.condition.singleclick(event); }, }); map.addinteraction(modify); var draw; // global can remove later function addinteraction() { console.log(1); draw = new ol.interaction.draw({ features : features, type : (typeselect.value) }); map.addinteraction(draw); } var typeselect = document.getelementbyid('type'); typeselect.onchange = function (e) { map.removeinteraction(draw); addinteraction(); }; addinteraction(); </script> </body> </html>
your question not clear, neither show code getting point/image coordinates. polygons:
var polyfeatures = featureoverlay.getsource(); var coordsmulti = []; var coordssingle = []; polyfeatures.foreachfeature(function (polyfeature) { if (polyfeature.getgeometry().gettype() === 'polygon') { // polygon coordinates coordsmulti.push(polyfeature.getgeometry().getcoordinates()); // central coordinate of polygon coordssingle.push(polyfeature.getgeometry().getinteriorpoint()); } }); if wan't filter features other types here's useful link: http://openlayers.org/en/v3.6.0/apidoc/ol.geom.html#geometrytype
edit: haven't checked html before, see think don't need if clause.
Comments
Post a Comment