Openlayers 根据坐标点画点线圆多边形

Geometry type  

Point
LineString
Polygon
Circle
None

Bezier
绘制
绘制圆形
绘制线段
绘制多边形
绘制单个点
清除所有
清除指定

var container = document.getElementById(‘popup’);
var content = document.getElementById(‘popup-content’);
var closer = document.getElementById(‘popup-closer’);
// 创建一个叠加层，将弹出式窗口定位到地图
var overlay = new ol.Overlay(/* @type {olx.OverlayOptions}/ ({
element: container,
autoPan: true,
autoPanAnimation:{
duration:250
}
}));
// 点击关闭按钮 关闭弹窗
closer.onclick = function () {
//不显示弹出框
overlay.setPosition(undefined);
closer.blur();
return false;
};
// 创建一个使用Open Street Map地图源的瓦片图层
var raster = new ol.layer.Tile({
source:new ol.source.OSM()
});
var source = new ol.source.Vector({wrapX:false});
//ol.layer.Vector用于显示在客户端渲染的矢量数据。
var vector = new ol.layer.Vector({
source:source
});

///地图部分
var map = new ol.Map({
//设置地图图层
layers:[raster,vector],
// 让id为map的div作为地图的容器
target:’map’,
overlays:[overlay],
// 设置显示地图的视图
view:new ol.View({
center:[13404016.389345577, 4314908.465212342], // 定义地图显示中心
zoom:12 //缩放层级
}),
controls:ol.control.defaults({
attributionOptions:{
collapsible:false
}
})

});

//下拉列表切换
var typeSelect = document.getElementById('type');

//添加形状的函数
var draw;
function addInteraction() {
var value = typeSelect.value;
if(value !== ‘None’){
//ol.interaction.Draw该类允许用户在地图上绘制一些几何图形，
// 可以通过构造方法设置type属性来指写是绘制哪种几何图形。目前支持点，线，多边形，圆形。
draw = new ol.interaction.Draw({
source:source,
type: /* @type {ol.geom.GeometryType} / (typeSelect.value)
});
draw.on(“drawend”, function(evt){
const geom = evt.feature.getGeometry();
console.log(geom.getType());
if (geom.getType() == ‘Circle’) {
console.log(geom.getCenter());
console.log(geom.getRadius());
alert(“圆形：”+geom.getCenter()+”,”+geom.getRadius());
} else {
const points = geom.getCoordinates();
console.log(points,”ddddddd”);
alert(“返回坐标：”+points);
}
map.removeInteraction(draw);
}, this);
map.addInteraction(draw);
}
}
addInteraction();
typeSelect.onchange = function () {
map.removeInteraction(draw);
addInteraction();

};

//向地图中添加点击处理程序以呈现弹出式窗口。
//map.on(‘click’,function (evt) {
//坐标
//var coordinate = evt.coordinate;
// console.log(coordinate);
//ol.proj.transform(coordinate, source, destination)来转换不同的坐标点，
// 比如，将地理坐标系108.4，23.7转换成墨卡托坐标系
//var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
// coordinate,’EPSG:3857’,’EPSG:4326’
// ));
// content.innerHTML = ‘

‘+’
• ‘+”坐标系：”+’‘+’'+hdms+'‘+’‘+’

‘+’

‘;
//verlay.setPosition(coordinate);

// });
function drawgeometry(){
addInteraction();
}

var displayarr = [];
// 清除所有
function areaAllClear(){

if(displayarr.length>0){
for(var i=0; i

转载自：https://blog.csdn.net/xiejiachao/article/details/81777807