Openlayers实现图形绘制
更新时间：2020年09月28日 11:46:30 作者：桃李不言_下自成蹊
这篇文章主要为大家详细介绍了Openlayers实现图形绘制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Openlayers实现图形绘制的具体代码，供大家参考，具体内容如下
1、新建一个html页面，引入ol.js文件，然后在body中创建一个div标签、label标签和一个select下拉选项卡；
2、代码实现
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../lib/ol/ol.js"></script>
<script type="text/javascript">
window.onload = function () {
//获取下拉列表框
var typeSelect = document.getElementById('type');
//定义一个用来接收绘制对象的对象，方便以后对绘制对象进行添加、移除等操作
var draw;
//初始化地图对象
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
//初始化矢量数据源对象
//wrapX:Wrap the world horizontally. Default is true.
//For vector editing across the -180° and 180° meridians to work properly, this should be set to false
var source = new ol.source.Vector({ wrapX: false });
//实例化矢量数据图层
var vector = new ol.layer.Vector({
//数据源
source: source,
//样式
style: new ol.style.Style({
//样式填充
fill: new ol.style.Fill({
//填充颜色
color: 'rgba(37,241,239,0.2)'
}),
//笔触
stroke: new ol.style.Stroke({
//笔触颜色
color: '#264df6',
//笔触宽度
width:2
}),
//图形样式，主要适用于点样式
image: new ol.style.Circle({
//半径大小
radius: 7,
//填充
fill: new ol.style.Fill({
//填充颜色
color: '#e81818'
})
})
})
});
//将矢量图层加载到map中
map.addLayer(vector);
//添加绘图交互的函数
function addInteraction() {
//获取当前选择的绘图类型
var value = typeSelect.value;
//如果当前选择的绘图类型不为"None"的话，则进行相应绘图操作
//如果当前选择的绘图类型为"None"的话，则清空矢量数据源
if (value !== 'None') {
//如果当前的矢量数据源为空的话，则重新创建和设置数据源
//因为当你选择的绘图类型为"None"时，会清空数据源
if (source == null) {
source = new ol.source.Vector({ wrapX: false });
vector.setSource(source);
}
//geometryFunction变量，用来存储绘制图形时的回调函数
//maxPoints变量，用来存储最大的点数量
var geometryFunction, maxPoints;
//如果当前选择的绘图类型是"Square"的话，则将value设置为Circle
//然后调用createRegularPolygon()方法
if (value === 'Square') {
value = 'Circle';
//Create a geometryFunction for type: 'Circle'
//that will create a regular polygon with a user specified number of sides and start angle instead of an ol.geom.
//根据圆来创建一个四边形
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
} else if (value === 'Rectangle') {
//如果当前选择的绘图类型是"Square"的话，则将value设置为LineString
value = 'LineString';
//设置最大点数为2
maxPoints = 2;
geometryFunction = function (coordinates, geometry) {
//如果geometry对象不存在或者为空，则创建
if (!geometry) {
geometry = new ol.geom.Polygon(null);
}
//开始点的坐标
var start = coordinates[0];
//结束点的坐标
var end = coordinates[1];
//根据开始坐标和结束坐标设置绘图点坐标
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
return geometry;
};
}
//将交互绘图对象赋给draw对象
//初始化交互绘图对象
draw = new ol.interaction.Draw({
//数据源
source: source,
//绘制类型
type: value,
//回调函数
//Function that is called when a geometry's coordinates are updated
geometryFunction: geometryFunction,
//最大点数
maxPoints: maxPoints
});
//将draw对象添加到map中，然后就可以进行图形绘制了
map.addInteraction(draw);
} else {
//清空矢量数据源
source = null;
//设置矢量图层的数据源为空
vector.setSource(source);
}
}
//当绘制类型下拉列表框的选项发生改变时执行
typeSelect.onchange = function (e) {
//从map中移除交互绘图对象
//如果不移除，则会在下拉列表框选项发生改变时再次进行绘制时，保留上一次的draw对象
map.removeInteraction(draw);
//执行添加绘图交互的函数
addInteraction();
};
//添加绘图交互的函数
//此处是为保证刷新页面后，仍然能够根据下拉列表框框的选项进行图形绘制
addInteraction();
};
</script>
</head>
<body>
<div id="menu">
<label>几何图形绘制：</label>
<select id="type">
<option value="None">无</option>
<option value="Point">点</option>
<option value="LineString">线</option>
<option value="Polygon">多边形</option>
<option value="Circle">圆</option>
<option value="Square">正方形</option>
<option value="Rectangle">长方形</option>
</select>
</div>
<div id="map"></div>
</body>
</html>
3、结果展示
绘制点图形
绘制线图形
绘制多边形
绘制圆形
绘制正方形
绘制矩形
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
刚开始我以为是会跟平时使用onclick()一样，没想到最近在写javascript入门ppt的时候发现了，原来自己太自以为是了！看来还有很多javascript的细节没有掌握好啊2013-11-11
js 去掉空格实例 Trim() LTrim() RTrim()
js 去掉空格实例Trim(),LTrim(),RTrim() 需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家介绍了JavaScript数组的常用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
在前端开发中,模糊查询与下拉匹配是提高用户体验的重要功能,特别是在搜索功能上,这篇文章主要给大家介绍了关于JS中模糊查询功能的一些常用方法,需要的朋友可以参考下2024-06-06
最近继续玩一些微信小程序的api来做例子,感觉自己可能创造力不很足,只能模仿着别人的例子来做一个自己的计算器了,下面这篇文章主要给大家介绍了关于微信小程序计算器实现案例的相关资料,需要的朋友可以参考下2023-06-06
ng-options和ng-checked在表单中的高级运用(推荐)
AngularJS是当前非常的流行的前端框架，它的语法糖非常多，也极大的方便了前端开发者。这篇文章主要介绍了ng-options和ng-checked在表单中的高级运用,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了js根据后缀判断文件文件类型的代码，原来是获取文件的扩展名然后再判断属于什么类型，对于图片多个后缀的判断的实现也不是不错的思路，大家可以参考一下2020-05-05
这篇文章主要为大家详细介绍了javascript特殊日历控件的使用方法，展示了javascript日历控件实现效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
现在网上有非常多的Promise文章，但都是给你一堆代码，或者某些核心代码，让你看完之后感觉，嗯，很厉害，但还是不知所云，不知其所以然。那么本文真正从一个小白开始带你深入浅出，一步一步实现自己的 Promise，这种自己造轮子的过程一定是进步最快的过程，快上车开始吧2022-11-11
这篇文章主要介绍了详解webpack import()动态加载模块踩坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论