openlayers實現線上編輯
阿新 • • 發佈：2019-01-06
概述：
在前面有篇博文講述了基於Arcgis for js和wkt實現線上資料的採集和編輯功能，在本文講述如何在openlayers實現類似的功能。上一篇博文的地址為：
思路：
前後臺的資料互動以wkt的形式，載入已完成物件用wkt，物件更新完成之後將geometry轉換為wkt傳給後臺，將資訊儲存到資料庫中。實現線上編輯主要為OpenLayers.Control.ModifyFeature。
實現：
1、新建vector圖層
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; vectors = new OpenLayers.Layer.Vector("Vector Layer", { renderers: renderer }); map1.addLayer(vectors);
2、新增wkt物件
3、新增編輯控制元件var wkts = [ "POINT(107.5758285931443 29.7822116459692)", "LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)", "POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))" ]; var wktFormat = new OpenLayers.Format.WKT(); for(var i= 0,dl=wkts.length;i<dl;i++){ var geometry = wktFormat.read(wkts[i]); vectors.addFeatures(geometry); } }
var editor = new OpenLayers.Control.ModifyFeature(vectors);
map1.addControl(editor);
editor.activate();4、給vector新增編輯完成事件
vectors.events.on({ "afterfeaturemodified":editEnd }); function editEnd(evt){ if(evt.modified){ console.log("發生變化"); var geom = evt.feature.geometry; var wkt = new OpenLayers.Format.WKT(geom); console.log(wkt.toString()); } else{ console.log("未發生變化"); } }
實現完整程式碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>openlayers map</title>
<link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">
<style>
html, body{
padding:0;
margin:0;
height:100%;
width:100%;
overflow: hidden;
font-size: 12px;
}
#map1{
width: 100%;
height: 100%;
float: left;
border-right: 1px solid #000000;
}
</style>
<script src="http://localhost/olapi/OpenLayers.js"></script>
<script src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>
<script src="http://localhost/jquery/jquery-1.8.3.js"></script>
<script>
var map1, vectors;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
$(function(){
var bounds = new OpenLayers.Bounds(
73.45100463562233, 18.16324718764174,
134.97679764650596, 53.531943152223576
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.2403351289487642,
projection: "EPSG:4326",
units: 'degrees'
};
map1 = new OpenLayers.Map('map1', options);
map1.addLayer(getWms("china"));
map1.addControl(new OpenLayers.Control.Zoom());
map1.addControl(new OpenLayers.Control.Navigation());
map1.zoomToExtent(bounds);
addVectors();
addEditor();
});
function getWms(layer){
return new OpenLayers.Layer.WMS(
"Geoserver layers - Tiled",
"http://localhost:8081/geoserver/lzugis/wms",
{
"LAYERS": layer,
"STYLES": '',
format: 'image/png'
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
}
function addVectors(){
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
vectors = new OpenLayers.Layer.Vector("Vector Layer", {
renderers: renderer
});
map1.addLayer(vectors);
vectors.events.on({
"afterfeaturemodified":editEnd
});
var wkts = [
"POINT(107.5758285931443 29.7822116459692)",
"LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)",
"POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"
];
var wktFormat = new OpenLayers.Format.WKT();
for(var i= 0,dl=wkts.length;i<dl;i++){
var geometry = wktFormat.read(wkts[i]);
vectors.addFeatures(geometry);
}
}
function addEditor(){
var editor = new OpenLayers.Control.ModifyFeature(vectors);
map1.addControl(editor);
editor.activate();
}
function editEnd(evt){
if(evt.modified){
console.log("發生變化");
var geom = evt.feature.geometry;
var wkt = new OpenLayers.Format.WKT(geom);
console.log(wkt.toString());
}
else{
console.log("未發生變化");
}
}
</script>
</head>
<body>
<div id="map1"></div>
</body>
</html>實現效果：
編輯狀態
編輯完成
