Drawing features in OpenLayers 2

Question

I have created a code in Openlayers 2 for selecting the various Google Maps themes (sat, road, terraing etc). On top of that i have input some custom features from Geoserver. I want to add some drwing features too, how can i do it..? Here is my code: PS I know is not polished, but is something i am working on right now.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>OpenLayers map preview</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- add here more css definition libraries--> <!-- Basic CSS definitions --> <style type="text/css"> body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: small; } /* Toolbar styles */ #toolbar { position: relative; padding-bottom: 0.5em; display: none; } /* The map and the location bar */ #map { clear: both; position: relative; width: 1000px; height: 800px; border: 2px solid black; } #wrapper { width: 337px; height: 50px; } #location { float: right; font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #483D8B; background-color: white; } #scale { float: left; font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #483D8B; background-color: white; } #nodelist { font-family: Arial, Verdana, sans-serif; font-size: 14px; color: #000000; font-style: normal; background-color: white; } </style> <!-- Import OpenLayers, reduced, wms read only version --> <script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js" type="text/javascript"></script> <!-- add here more js libraries --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9KCxuVLagy1WttatAuRS5kFhSEXAmrGI" type="text/javascript"></script> <script defer="defer" type="text/javascript"> var map; var untiled; var tiled; var pureCoverage = false; // pink tile avoidance OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5; // make OL compute scale according to WMS spec OpenLayers.DOTS_PER_INCH = 25.4 / 0.28; function init() { format = 'image/png'; var bounds = new OpenLayers.Bounds( // modify parameters -11569688.90, -11530706.01, 5514344.58, 5553327.46 ); var options = { controls: [], // maxExtent: bounds, //modify parameter scales: [100000, 250000, 500000, 1000000, 2000000, 4000000, 8000000], //modify parameter projection: "EPSG:900913", //setting zoom levels //numZoomLevels:15, units: 'm' }; map = new OpenLayers.Map('map', options, { allOverlays: true }); map.addControl(new OpenLayers.Control.LayerSwitcher()); var gsat = new OpenLayers.Layer.Google( "Google Satellite", { type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22 } ); var gphy = new OpenLayers.Layer.Google( "Google Physical", { type: google.maps.MapTypeId.TERRAIN, visibility: false } ); var gmap = new OpenLayers.Layer.Google( "Google Streets", // the default { numZoomLevels: 20, visibility: false } ); var ghyb = new OpenLayers.Layer.Google( "Google Hybrid", { type: google.maps.MapTypeId.HYBRID, numZoomLevels: 22, visibility: false } ); map.addLayers([gsat, gphy, gmap, ghyb]); /* var gphy = new OpenLayers.Layer.Google( "Google Satellite", {type: google.maps.MapTypeId.Satellite, sphericalMercator:true} ); map.addLayer(gphy); */ var streets = new OpenLayers.Layer.WMS( "vag_alla_ny", "http://localhost:8080/geoserver/wms", { layers: 'LundProject:vag_alla_ny', transparent: true }, { isBaseLayer: false, // numZoomLevels:15 opacity: 0.5, visibility: true } ); //add controls here map.addLayer(streets); map.zoomToMaxExtent(); //end add controls map.zoomToExtent(bounds); //bugsites = new OpenLayers.Layer.WMS( //"bugsites", //"http://localhost:8080/geoserver/wms", //{ // layers: 'sf:bugsites', // styles: 'capitals', // transparent: true, // format: format, //} //); // map.addLayer(bugsites); //map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.PanZoomBar()); map.addControl(new OpenLayers.Control.Navigation()); } </script> </head> <body onload="init()"> Map viewer using Geoserver and OpenLayers <br> <br> <div id="map"> </div> <br> <div id="wrapper"> <div id="location">Location</div> <br> <div id="scale"> </div> </div> <br> <div id="nodelist"> </div> </body> </html>

Answer 1

This is the code example, which you could use:

 var polygonInteraction = new ol.interaction.Draw({
 type: 'Polygon',
 source: vectorLayer.getSource()
});
polygonInteraction.setActive(false);
polygonInteraction.on('drawend', onDrawend);

https://openlayers.org/workshop/en/vector/draw.html

Drawing features in OpenLayers 2

Question

1 answers

solution1
0 2021-10-29 11:09:48

Drawing features in OpenLayers 2

Question

1 answers

solution1 0 2021-10-29 11:09:48

solution1
0 2021-10-29 11:09:48