Openlayers和geoserver对图层进行编辑

最新推荐文章于 2025-06-11 21:01:35 发布

二三三

最新推荐文章于 2025-06-11 21:01:35 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： openlayers GIS 架构设计 Map 文章标签： openlayers geoserver GIS 地图开发

本文链接：https://blog.youkuaiyun.com/qq_30408111/article/details/90043996

1，Openlayers展示地图文件

Openlayers可以展示在线地图文件，创建一个新的Map，并设置地图展示的图层和中心点。实现代码如下：

var map = new Map({
layers: [
new TileLayer({
source: new OSM()
}),
vectorLayer
],
target: 'map',
view: new View({
center: [-73.99710639567148, 40.742270050255556],
//center: [0, 0],
maxZoom: 19,
zoom: 13,
//zoom: 2,
projection: 'EPSG:4326'
}) 
});

Center：设置地图展示的中心点
MaxZoom：设置地图展示的最大图层级别
Zoom：设置地图展示的初始图层级别
Projection：设置地图展示的坐标格式

2，在openlayers上画点，多边形，圆形

在地图上原有图层标注点，多边形，和圆形，openlayers官网提供的有demo。HTML页面代码需要设置一个select框，选择需要绘制的图形，主要代码如下：

<form class="form-inline">
<label>Geometry type &nbsp;</label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
<option value="None">none</option>
</select>

在HTML页面设置好之后，需要用js代码实现具体的功能，主要实现代码如下：

var draw, snap;
var typeSelect = document.getElementById('type');

function addInteractions() {
if(typeSelect.value !== 'None'){
draw = new Draw({
source: vectorSource,
type: typeSelect.value
});
draw.on('drawend', function(e) {
// 绘制结束时暂存绘制的feature
drawedFeature = e.feature;
});
map.addInteraction(draw);
snap = new Snap({source: vectorSource});
map.addInteraction(snap);
}
}

3，openlayers展示geoserver工作空间的地图文件

Openlayers可以导入GeoJson格式的数据文件并且可以展示出来，可以把geoserver工作空间的地图数据文件转换成GeoJson格式的文件，并在地图上显示出来，代码其实就是一个aJax的一个异步请求，这里是根据WFS查询：

var vectorSource = new VectorSource({
format: new GeoJSON({
geometryName: 'the_geom' // 因为数据源里面字段the_geom存储的是geometry，所以需要指定
}),
url: 'http://localhost:8002/geoserver/wfs?service=wfs&version