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

根据坐标点画点线圆多边形，代码如下

Geometry type   Point LineString Polygon Circle None Bezier 绘制 绘制圆形 绘制线段 绘制多边形 绘制单个点 清除所有 清除指定

///地图部分
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<displayarr.length;i++){
source.removeFeature(displayarr[i][1]);
}
displayarr = [];
}

}

function clearOne(){
var str = 1;
areaClear(str);
}

// 清除指定
function areaClear(data){
var temparr;
if(data.indexOf(",")>-1){
temparr = data.split(",");
　　alert(‘str中包含bc字符串’);

}
var temparr = data.split(",");
if(temparr.length>0){
for(var i=0; i<temparr.length;i++){
for(var j=0; j<displayarr.length;j++){
if(temparr[i] == displayarr[j][0]){
source.removeFeature(displayarr[j][1]);
}
}

}

}

}

// 绘制圆形 [[13402105.463638451,4313876.565330492],[13407761.803731553,4316322.550235618],[13404589.66705772,4319418.249881168],[13401914.371067738,4316475.424292188]])
function drawcircle(){
var str = “13401952.589581877,4315481.742924481,2197.1491052936763”;
var pointarr = str.split(",");
var arr = [];
for(var i = 0;i<pointarr.length;i++){
arr.push(pointarr[i]-0);
}
console.log(arr[0]+"="+arr[1]+"="+arr[2]);
//var circle1 = new ol.Feature(new ol.geom.Circle([13401952.589581877,4315481.742924481],2197.1491052936763));
var circle1 = new ol.Feature(new ol.geom.Circle([arr[0],arr[1]], arr[2]));
source.addFeature(circle1);
displayarr.push([1,circle1]);
}

//绘制线段
function drawLines(){
var str = “13402105.463638451,4313876.565330492,13407761.803731553,4316322.550235618,13404589.66705772,4319418.249881168,13401914.371067738,4316475.424292188”;

var distrivtarr = str.split(",");
var pointarr = [];
for(var i=0; i<distrivtarr.length-1;){
pointarr.push([distrivtarr[i]-0,distrivtarr[i+1]-0]);
console.log(i+"====="+distrivtarr[i]+","+distrivtarr[i+1]);
i=i+2;
}
// var line = new ol.geom.LinearRing(pointarr);

var LineString1 = new ol.Feature(new ol.geom.LineString([[13402105.463638451,4313876.565330492],[13407761.803731553,4316322.550235618],[13404589.66705772,4319418.249881168],[13401914.371067738,4316475.424292188]]));

var LineString2 = new ol.Feature(new ol.geom.LineString(pointarr));

source.addFeature(LineString2);
displayarr.push([2,LineString2]);
/setTimeout(function(){
source.removeFeature(circle1);
},3000);/
//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([13401952.589581877,4315481.742924481], 2197.1491052936763)));

/var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});/

//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));

/var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});/
/* var lineFeature = new ol.Feature(
new ol.geom.LineString([[13402105.463638451,4313876.565330492],[13407761.803731553,4316322.550235618],[13404589.66705772,4319418.249881168],[13401914.371067738,4316475.424292188]]));
map.layers = new layers({
new ol.layer.Vector({
source: new ol.source.Vector({
features: [ lineFeature]
})
});
})/
// 13402105.463638451,4313876.565330492
// 13407761.803731553,4316322.550235618
// 13404589.66705772,4319418.249881168
// 13401914.371067738,4316475.424292188
/ map= new ol.Map({
//interactions: ol.interaction.defaults().extend([new app.Drag()]),
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
url: ‘https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure’
})
}),
new ol.layer.Vector({
source: new ol.source.Vector({
features: [ lineFeature]
}),
})
],
target: ‘map’,
view: new ol.View({
center: [13404016.389345577, 4314908.465212342],
zoom: 12
})
});*/
}
// 多边形
function drawPolygon(){
var str = “13399544.823190892,4311812.765566792,13400079.88238889,4309596.091746522,13404704.322600143,4309710.74728895,13402602.3043223,4311736.328538507,13399544.823190892,4311812.765566792”;
var Polygon1 = new ol.Feature(new ol.geom.Polygon([[[13399544.823190892,4311812.765566792],[13400079.88238889,4309596.091746522],[13404704.322600143,4309710.74728895],[13402602.3043223,4311736.328538507],[13399544.823190892,4311812.765566792]]]));
var distrivtarr = str.split(",");
var pointarr = [];
for(var i=0; i<distrivtarr.length-1;){
pointarr.push([distrivtarr[i]-0,distrivtarr[i+1]-0]);
// console.log(i+"====="+distrivtarr[i]+","+distrivtarr[i+1]);
i=i+2;
}
var Polygon2 = new ol.Feature(new ol.geom.Polygon([pointarr]));
source.addFeature(Polygon2);
displayarr.push([3,Polygon2]);

}
// 点
function drawPoint(){
var Point1 = new ol.Feature(new ol.geom.Point([13396745.317029951, 4310723.5379137285]));
source.addFeature(Point1);
displayarr.push([4,Point1]);
}

更多技术或者资料分享关注公众号：zhulin1028 二维码：[添加链接描述](https://img-blog.csdnimg.cn/20201030172030219.png#pic_center)