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之Document元素选择器篇
Aug 14 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
js实现新年倒计时效果
Dec 10 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 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
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python实现百度语音识别api
2018/04/10 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python实现排序算法解析
2018/09/08 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python利用线程实现多任务
2020/09/18 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
机电工程学生自荐信范文
2013/12/07 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
中小学生学籍证明
2014/10/25 职场文书
学生检讨书范文
2014/10/30 职场文书
党校学习党性分析材料
2014/12/19 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
开除通知书范本
2015/04/25 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
使用CSS实现音波加载效果
2023/05/07 HTML / CSS