要完成的任务是绘制点、线、面、圆、正多边形，指定半径的圆
官方示例：https://openlayers.org/en/latest/examples/draw-features.html
1、初始化地图
var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: ‘http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G’
}) //加载谷歌影像地图
});
var view = new ol.View({
center: [113, 23],
projection: ‘EPSG:4326’,
zoom: 10
});
map = new ol.Map({
layers: [rootLayer],
target: ‘map’,
view: view
});
source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source,
});
map.addLayer(vector);
2、初始化绘图的类型
draw = new ol.interaction.Draw({
//source: source,
type: value,
geometryFunction: geometryFunction,
});
3、效果如下
完整代码如下
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Draw Shapes</title>
<!– Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer –>
<script src=”https://unpkg.com/elm-pep”></script>
<style>
.map {
width: 100%;
height: 400px;
}
</style>
<link rel=”stylesheet” href=”../lib/openlayerv6.4.3/css/ol.css”>
<script src=”../lib/openlayerv6.4.3/build/ol.js”></script>
</head>
<script>
var map;
var typeSelect;
var draw; // global so we can remove it later
var source;
function init() {
var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: ‘http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G’
}) //加载谷歌影像地图
});
var view = new ol.View({
center: [113, 23],
projection: ‘EPSG:4326’,
zoom: 10
});
map = new ol.Map({
layers: [rootLayer],
target: ‘map’,
view: view
});
source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source,
});
map.addLayer(vector);
typeSelect = document.getElementById(‘type’);
/**
* Handle change event.
*/
typeSelect.onchange = function () {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();//设置回来类型并初始化绘图
}
var type;
var df;
var r = 10000;
function addInteraction() {
type = typeSelect.value;
var value;
if (type !== ‘None’) {
var geometryFunction;
switch (type) {
//圆
case ‘Circle’:
value = ‘Circle’;
geometryFunction = new ol.interaction.Draw.createRegularPolygon(32);
break;
case ‘RCircle’:
//指定半径圆
r = 10000
value = ‘Point’;
break;
case ‘Point’:
value = “Point”;
break;
case ‘LineString’:
value = “LineString”;
break;
case ‘Polygon’:
value = “Polygon”;
break;
case ‘Box’:
value = ‘Circle’;
geometryFunction = new ol.interaction.Draw.createBox();
break;
case ‘Square’:
value = ‘Circle’;
geometryFunction = new ol.interaction.Draw.createRegularPolygon(4);
break;
default:
value = ‘Point’;
break;
}
draw = new ol.interaction.Draw({
//source: source,
type: value,
geometryFunction: geometryFunction,
});
draw.on(‘drawend’, function (e) {
if (“RCircle” === type) {
//绘制指定半径的圆
var coors = e.feature.getGeometry().getCoordinates();
//创建一个圆，在3857坐标系下
var circleIn3857 = new ol.geom.Circle(ol.proj.transform(coors, ‘EPSG:4326’, ‘EPSG:3857’), r, ‘XY’);
//转成4326坐标系
var circleIn4326 = circleIn3857.transform(‘EPSG:3857’, ‘EPSG:4326’);
var circle4326 = new ol.geom.Polygon.fromCircle(circleIn4326, 32, 0);
var feature = new ol.Feature(circle4326);
source.addFeature(feature);//添加到地图中
} else
source.addFeature(e.feature);
});
map.addInteraction(draw);
}
}
</script>
<body οnlοad=”init()”>
<div id=”map” class=”map”></div>
<form class=”form-inline”>
<label>Shape type </label>
<select id=”type”>
<option value=”Circle”>Circle</option>
<option value=”RCircle”>RCircle</option>
<option value=”Square”>Square</option>
<option value=”Polygon”>Polygon</option>
<option value=”Box”>Box</option>
<option value=”Point”>Point</option>
<option value=”None”>None</option>
</select>
</form>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「mylove10086」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014572215/article/details/109204781