html 根据坐标画多边形,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