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、结果展示
绘制点图形
绘制线图形
绘制多边形
绘制圆形
绘制正方形
绘制矩形
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
openlayers4实现点动态扩散
本文实例为大家分享了openlayers4实现的点动态扩散的具体代码,供大家参考,具体内容如下 原理:连续刷新地图,并且刷新时,修过点样式的半径大小,来实现扩散效果: //定义底图 var baseLayer = new ol.layer.Vector({ renderMode: 'image', source: new ol.source.Vector({ url:'/data/shengjie.geojson', format: new ol.format.GeoJSON() }), sty
-
Openlayers实现点闪烁扩散效果
本文实例为大家分享了Openlayers实现点闪烁扩散效果的具体代码,供大家参考,具体内容如下 点闪烁样式: DOM的样式实现 /**橙色点扩散闪烁样式*/ .point_animation{ background: #ff9900; width: 6px; height: 6px; border: 2px #ff9900 solid; border-radius: 50%; position: absolute; } .point_animation p, .point_animation s
-
Openlayers实现扩散的动态点（水纹效果）
本文实例为大家分享了Openlayers实现扩散的动态点的具体代码,供大家参考,具体内容如下 在openlayers中制作危险源标识可以需要动态扩散的点(有很多种方法 可以加入jpg动图,也可以写css动画) 这里提供一种思路用openlayer自带的方法写 并给予详细的方法注释供初学者学习 (所有jar包都是在线的代码可以复制过去直接用) <!DOCTYPE html> <html> <head> <title>Icon Symbolizer</ti
-
基于openlayers4实现点的扩散效果
本文实例为大家分享了openlayers4实现点的扩散效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://openlayers.org/en
-
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"
-
Android开发实现各种图形绘制功能示例
本文实例讲述了Android开发实现各种图形绘制功能.分享给大家供大家参考,具体如下: 这里结合本人的开发事例,简单介绍一下如何在Android平台下实现各种图形的绘制. 首先自定义一个View类,这个view类里面需要一个Paint对象来控制图形的属性,需要一个Path对象来记录图形绘制的路径,需要一个Canvas类来执行绘图操作,还需要一个Bitmap类来盛放绘画的结果. Paint mPaint = new Paint(); mPaint.setAntiAlias(true); mPain
-
Python图形绘制操作之正弦曲线实现方法分析
本文实例讲述了Python图形绘制操作之正弦曲线实现方法.分享给大家供大家参考,具体如下: 要画正弦曲线先设定一下x的取值范围,从0到2π.要用到numpy模块. numpy.pi 表示π numpy.arange( 0 , 2π ,0.01) 从0到2π,以0.01步进. 令 x=numpy.arange( 0, 2*numpy.pi, 0.01) y=numpy.sin(x) 画图要用到matplotlib.pyplot模块中plot方法. plot(x,y) pyplot.plot.sh
-
extjs图形绘制之饼图实现方法分析
本文实例讲述了extjs图形绘制之饼图实现方法.分享给大家供大家参考,具体如下: 这篇文章将介绍extjs中自带的饼图. 代码如下: Ext.define('ChartPieTest', { extend: 'Ext.panel.Panel', autoScroll : true, initComponent: function () { var me = this; me.store = me.createStore(); me.grid = me.getGridPanel(); me.mai
-
python matplotlib模块基本图形绘制方法小结【直线，曲线，直方图，饼图等】
本文实例讲述了python matplotlib模块基本图形绘制方法.分享给大家供大家参考,具体如下: matplotlib模块是python中一个强大的绘图模块 安装 pip install matplotlib 首先我们来画一个简单的图来感受它的神奇 import numpy as np import matplotlib.pyplot as plt import matplotlib zhfont1=matplotlib.font_manager.FontProperties(fname
-
Unity Shader实现图形绘制（蓝天白云大海）
Unity Shader学习:2D图形绘制(蓝天白云大海),供大家参考,具体内容如下 基本是一些数学上的算法 shader部分: Shader "Unlit/2D-Ocean" { Properties { _MainTex ("Texture", 2D) = "white" {} _SunColor("SunColor",Color) = (1,1,1,1) _SunRoundColor("SunRoundColo
-
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
最近学了下 python opencv,分享下使用 opencv 在图片上绘制常用图形的方法. 案例中实现了在图片中添加线段.圆形.矩形.椭圆形以及添加文字的方法,使用 opencv2 实现的. 实现方法 1)画线段 cv.line 在图片中绘制一段直线 # 绘制线段 # 参数1:图片 # 参数2:起点 # 参数3:终点 # 参数4:BGR颜色 # 参数5:宽度 cv2.line(img, (60, 40), (90, 90), (255, 255, 255), 2); 参数说明 参数 值 说明
-
Python OpenCV实现基本图形绘制
1.导入模块 import cv2 as cv import numpy as np 2.OpenCV绘图大致步骤 OpenCV 图形绘制步骤 (1)先定义基础画布canvas = np.zeros((400,600,3),dtype=np.uint8)+255 (2)画布分界,(300,0)分别是宽.高cv.line(canvas,(300,0),(300,399),(0,0,0,),2) (3)在画布上绘制图形,如画圆cv.circle(canvas, (150, 300), 88, (0,
-
Android中常见的图形绘制方式总结
目录 图形绘制概述 View + Canvas SurfaceView + Canvas TextureView + Canvas SurfaceView + OpenGL ES GLSurfaceView + OpenGL ES TextureView + OpenGL ES 总结 图形绘制概述 Android平台提供丰富的官方控件给开发者实现界面UI开发,但在实际业务中经常会遇到各种各样的定制化需求,这必须由开发者通过自绘控件的方式来实现.通常Android提供了Canvas和OpenGL
-
Python matplotlib超详细教程实现图形绘制
目录 前言 1. matplotlib.patches概述 2. 绘制图形方法 3. 绘制图形步骤 4. 绘制图形属性 设置透明度 设置颜色 5. 小试牛刀 前言 我们前面对matplotlib模块底层结构学习,对其pyplot类(脚本层)类提供的绘制折线图.柱状图.饼图.直方图等统计图表的相关方法,列举往期文章如下. Python利用 matplotlib 绘制直方图 Python用 matplotlib 绘制柱状图 python 用matplotlib绘制折线图详情 Python利用matp