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通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
javascript操作表格排序实例分析
May 06 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
初学python数组的处理代码
2011/01/04 Python
Python中的index()方法使用教程
2015/05/18 Python
python定时执行指定函数的方法
2015/05/27 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
你们项目是如何进行变更控制的
2015/08/26 面试题
Java程序员面试90题
2013/10/19 面试题
公司门卫的岗位职责
2014/02/19 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
小学思想品德教学反思
2016/02/24 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Redis基本数据类型String常用操作命令
2022/06/01 Redis