OpenLayers 2 中的繪圖功能
[英]Drawing features in OpenLayers 2
問題描述
我在 Openlayers 2 中創建了一個代碼，用於選擇各種谷歌地圖主題（衛星、道路、地形等）。 最重要的是，我從 Geoserver 輸入了一些自定義功能。 我也想添加一些 drwing 功能，我該怎么做..？ 這是我的代碼： PS 我知道沒有完善，但是我現在正在做的事情。
<!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>
1 個解決方案
解決方案1
0 2021-10-29 11:09:48
這是代碼示例，您可以使用它：
var polygonInteraction = new ol.interaction.Draw({
type: 'Polygon',
source: vectorLayer.getSource()
});
polygonInteraction.setActive(false);
polygonInteraction.on('drawend', onDrawend);
通過在Openlayers中按住Ctrl來啟用圖形功能
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.