OpenLayers 2 中的绘图功能
Posted
技术标签:
【中文标题】OpenLayers 2 中的绘图功能【英文标题】：Drawing features in OpenLayers 2 【发布时间】：2017-01-08 12:59:11 【问题描述】：我在 Openlayers 2 中创建了一个代码，用于选择各种 Google 地图主题（卫星、道路、地形等）。最重要的是，我从 Geoserver 输入了一些自定义功能。我也想添加一些绘图功能，我该怎么做..？这是我的代码：我知道 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】：这是您可以使用的代码示例：
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
【讨论】：
以上是关于OpenLayers 2 中的绘图功能的主要内容，如果未能解决你的问题，请参考以下文章
Flutter 和 Openlayers - 包括 Flutter 中的 js 库