Openlayers实现图形绘制


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了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、结果展示

绘制点图形

Openlayers实现图形绘制

绘制线图形

Openlayers实现图形绘制

绘制多边形

Openlayers实现图形绘制

绘制圆形

Openlayers实现图形绘制

绘制正方形

Openlayers实现图形绘制

绘制矩形

Openlayers实现图形绘制

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 #Javascript
Openlayers实现地图全屏显示
Sep 28 #Javascript
Openlayers学习之加载鹰眼控件
Sep 28 #Javascript
Openlayers显示地理位置坐标的方法
Sep 28 #Javascript
Openlayers学习之地图比例尺控件
Sep 28 #Javascript
Openlayers实现地图的基本操作
Sep 28 #Javascript
TypeScript 运行时类型检查补充工具
Sep 28 #Javascript
You might like
PHP连接access数据库
2008/03/27 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP之数组学习
2011/05/29 PHP
PHP小技巧之函数重载
2014/06/02 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
js数组的基本使用总结
2021/01/18 Javascript
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
中文系师范生自荐信
2013/10/01 职场文书
一夜的工作教学反思
2014/02/08 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
学前教育专业求职信
2014/09/02 职场文书
内科护士节演讲稿
2014/09/11 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书