OpenLayers绘图

最新推荐文章于 2024-04-12 14:29:08 发布

运宝道人

最新推荐文章于 2024-04-12 14:29:08 发布

阅读量326

点赞数

分类专栏：地图文章标签：地图

本文链接：https://blog.csdn.net/qq_38425662/article/details/78794483

版权

地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>Draw Features</title>
<script type="text/javascript" src="static/js/ol-debug.js"> </script>
<link rel="stylesheet" type="text/css" href="static/css/ol.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
/**
* 绘图工具点线圆面
*/
</script>
</head>
<body>
<div id="map" class="map"></div>

<script>
$(function(){
init();
});
var map;
var draw;
var raster = new ol.layer.Tile({ source: new ol.source.OSM() });
var source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({ source: source });
function init(){
map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center:[12723401,3578457],// 设置地图中心坐标点
zoom:8,// 设置初始化显示层级
minZoom:7,// 最小显示层级
maxZoom:14 // 最大显示层级
})
});
function addInteraction(value) {
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: value
});
console.log(draw);
map.addInteraction(draw);
}
}
$(".but").click(function(){
map.removeInteraction(draw);
addInteraction($(this).val());
});

}
</script>
<div style="color: #000000;">
<input type="button" class="but" value="Point" />点
<input type="button" class="but" value="LineString">线
<input type="button" class="but" value="Polygon">面
<input type="button" class="but" value="Circle">圆
<input type="button" class="but" value="None">无
</div>
</body>

</html>

静态文件需要自己下载！