OpenLayer4.6.5绘制和编辑要素及获取定位点
田成化
OpenLayer4.6.5绘制和编辑要素及获取定位点
- 使用OpenLayer4.6.5API
- 参考资料
openlayers 显示点击位置的经纬度
代码如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制修改要素</title>
<script src="../jslib/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<script src="../jslib/ol.js"></script>
</head>
<body>
<div id="map" class="map" style="height: 80%;">
</div>
<label>几何类型 </label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
</select>
<script>
var raster=new ol.layer.Tile({
source:new ol.source.OSM()
});
var source=new ol.source.Vector();
var 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:'#000',
width:5
}),
image:new ol.style.Circle({
radius:7,
fill:new ol.style.Fill({
color:"#F00"
})
})
})
});
var map=new ol.Map({
layers:[raster,vector],
target:"map",
view:new ol.View({
center:[0,0],
zoom:4
})
})
var modify=new ol.interaction.Modify({source:source});
map.addInteraction(modify);
var draw=null;
var snap=null;
function addInteractions(){
draw=new ol.interaction.Draw({
source:source,
type:$("#type").val()
});
map.addInteraction(draw);
snap=new ol.interaction.Snap({
source:source
});
map.addInteraction(snap);
}
//选择样式
$("#type").change(function(){
map.removeInteraction(draw);
map.removeInteraction(snap);
addInteractions();
});
addInteractions();//默认为点样式
map.on("click",function(e){
alert(e.coordinate);
alert(ol.proj.transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
// 通过getEventCoordinate方法获取地理位置，再转换为wgs84坐标，并弹出对话框显示
alert(map.getEventCoordinate(e.originalEvent));
alert(ol.proj.transform(map.getEventCoordinate(e.originalEvent), 'EPSG:3857', 'EPSG:4326'));
var lonlat = map.getCoordinateFromPixel(e.pixel);
alert(lonlat);
alert(ol.proj.transform(lonlat,"EPSG:3857", "EPSG:4326")); //由3857坐标系转为4326
})
</script>
</body>
</html>
类似资料：