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 相关文章推荐
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
基于vue中的scoped坑点解说
Sep 04 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
多个应用共存的Django配置方法
2018/05/30 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python通过socketserver处理多个链接
2020/03/18 Python
python生成word合同的实例方法
2021/01/12 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
《陋室铭》教学反思
2014/02/26 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
胡桃夹子观后感
2015/06/11 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
MySql分区类型及创建分区的方法
2022/04/13 MySQL