注：当前使用的是 ol 5.3.0 版本，天地图使用的
key请到天地图官网申请，并替换为自己的key
图形要素包括属性信息和几何信息，在实际应用中，不仅需要修改样式信息，也需要修改图形几何信息。在OpenLayers中，一般采用鼠标交互方式修改图形坐标。在OpenLayers5中提供了ol.interaction.Modify交互式控件，可以结合选择要素控件ol.interaction.Select使用。
本节主要介绍加载图形交互编辑。
1. 添加编辑几何图形
创建点、线、面几何图形并添加到地图中。
//绘制的几何图形要素
const pointFeature = new ol.Feature(new ol.geom.Point([11881771, 4588300]));
const lineFeature = new ol.Feature(
new ol.geom.LineString([[11421771, 4288300], [12428781, 4288350]]));
const polygonFeature = new ol.Feature(
new ol.geom.Polygon([[[11421771, 4228300], [11421771, 3588300], [11521771, 3588300], [11528771, 3688300], [12421771, 3988300]]]));
//实例化一个矢量图层Vector作为绘制层
const source = new ol.source.Vector({
features: [pointFeature, lineFeature, polygonFeature]
});
const vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ff0000'
})
})
})
});
//将绘制层添加到地图容器中
map.addLayer(vector);
2. 创建编辑控件
在Modify控件中实现以下三个方法。
init：控件初始化setEvents：设置事件，为当前选择的控件添加激活变更事件，在其事件处理函数中返回当前选择要素集的第一要素。setActive：调用选择要素控件和交互式编辑控件setActive方法，控制控件是否激活。
//定义修改几何图形功能控件
const Modify = {
init: function () {
//初始化一个交互选择控件,并添加到地图容器中
this.select = new ol.interaction.Select();
map.addInteraction(this.select);
//初始化一个交互编辑控件，并添加到地图容器中
this.modify = new ol.interaction.Modify({
//选中的要素
features: this.select.getFeatures()
});
map.addInteraction(this.modify);
//设置几何图形变更的处理
this.setEvents();
},
setEvents: function () {
//选中的要素
const selectedFeatures = this.select.getFeatures();
//添加选中要素变更事件
this.select.on('change:active', function () {
selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
});
},
setActive: function (active) {
//激活选择要素控件
this.select.setActive(active);
//激活修改要素控件
this.modify.setActive(active);
}
};
//初始化几何图形修改控件
Modify.init();
//激活几何图形修改控件;
Modify.setActive(true);
3. 完整代码
其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图形交互编辑</title>
<meta charset="utf-8" />
<link href="../libs/css/ol.css" rel="stylesheet" type="text/css" />
<script src="../libs/js/ol-5.3.3.js" type="text/javascript"></script>
<style>
* {
padding: 0;
margin: 0;
font-size: 14px;
font-family: '微软雅黑';
}
html,
body {
width: 100%;
height: 100%;
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
.ol-mouse-position {
padding: 5px;
top: 10px;
height: 40px;
line-height: 40px;
background: #060505ba;
text-align: center;
color: #fff;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="map" title="地图显示"></div>
</body>
</html>
<script>
//==============================================================================//
//============================天地图服务参数简单介绍==============================//
//================================vec：矢量图层==================================//
//================================img：影像图层==================================//
//================================cva：注记图层==================================//
//======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//
//==============================================================================//
//地图投影坐标系
const projection = ol.proj.get('EPSG:3857');
const map = new ol.Map({
//地图容器div的ID
target: 'map',
view: new ol.View({
//地图初始中心点
// center: [114.2905, 30.5607],
center: [11421771, 4288300],
projection: "EPSG:3857",
minZoom: 2,
zoom: 4
})
});
const gaodeLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
title: "高德",
url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
})
})
map.addLayer(gaodeLayer)
//绘制的几何图形要素
const pointFeature = new ol.Feature(new ol.geom.Point([11881771, 4588300]));
const lineFeature = new ol.Feature(
new ol.geom.LineString([[11421771, 4288300], [12428781, 4288350]]));
const polygonFeature = new ol.Feature(
new ol.geom.Polygon([[[11421771, 4228300], [11421771, 3588300], [11521771, 3588300], [11528771, 3688300], [12421771, 3988300]]]));
//实例化一个矢量图层Vector作为绘制层
const source = new ol.source.Vector({
features: [pointFeature, lineFeature, polygonFeature]
});
const vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ff0000'
})
})
})
});
//将绘制层添加到地图容器中
map.addLayer(vector);
//定义修改几何图形功能控件
const Modify = {
init: function () {
//初始化一个交互选择控件,并添加到地图容器中
this.select = new ol.interaction.Select();
map.addInteraction(this.select);
//初始化一个交互编辑控件，并添加到地图容器中
this.modify = new ol.interaction.Modify({
//选中的要素
features: this.select.getFeatures()
});
map.addInteraction(this.modify);
//设置几何图形变更的处理
this.setEvents();
},
setEvents: function () {
//选中的要素
const selectedFeatures = this.select.getFeatures();
//添加选中要素变更事件
this.select.on('change:active', function () {
selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
});
},
setActive: function (active) {
//激活选择要素控件
this.select.setActive(active);
//激活修改要素控件
this.modify.setActive(active);
}
};
//初始化几何图形修改控件
Modify.init();
//激活几何图形修改控件;
Modify.setActive(true);
</script>
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !
