在地图上基于OpenLayers实现点/线/面静态的绘制显示

最新推荐文章于 2024-05-18 10:17:30 发布
最新推荐文章于 2024-05-18 10:17:30 发布
阅读量4.2k 收藏 15
点赞数 5
分类专栏： js 文章标签： javascript 前端 点线面显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanke_yh/article/details/128232361
版权

        在做GIS相关的工作过程中，是离不开矢量的数据的。矢量作为最基础的数据形式，一般通用在各个项目中。在导航软件开发或者应用中，点/线/面的标记，标绘，显示等都是不可缺少的。本文主要是来介绍在地图上基于OpenLayers实现点/线/面静态的绘制显示方法。

1、准备

        本文的实现是在前文的框架基础上，继续添加点线面样式和显示函数。具体的准备内容包括ol库文件，瓦片地图服务等。参考：基于OpenLayers实现导航地图上(起/终)点的交互式图标显示的准备内容，和地图瓦片数据的多种利用形式以及瓦片数据的浏览显示的地图创建与后端服务启动。

2、创建矢量图层

        在地图上增加点/线/面，则需要在地图之上增加一个矢量图层。

    //创建矢量图层
    var vecSource = new ol.source.Vector();
    var vecLayer = new ol.layer.Vector({
        source: vecSource
    });
    vecSource.clear();
    map.addLayer(vecLayer);//添加到map里面

注意：如果点线面公用一个图层，如果项目中有清除的功能，那么会使所有已存在的矢量均被清除。为此，根据项目需要，可创建多个矢量图层分别去控制point、line、polygon的要素，即可分别作用显示和清除。

3、点/线/面样式

        样式的处理一般有两种方式：1、固定写法，放在之前，用时直接调用；2、不固定写法，在绘制的时候再写，可处理细节。

3.1、固定写法例子

//点样式
    var pointStyle = new ol.style.Style({
    	image:new ol.style.Circle({
			radius:5,//半径
			fill:new ol.style.Fill({
				color:'red'
			}),	//填充颜色				
			stroke: new ol.style.Stroke({
				color: 'green',
				width: 1
			})//外环颜色和粗细
		})
    })
	
    //线样式
    var lineStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        })
    })
    //面样式
    var polygonStyle = new ol.style.Style({
		text:new ol.style.Text({
        	testAlign:'center',
        	text:"区域",
       		font:'bold 20px 微软雅黑',
        	fill:new ol.style.Fill({
            	color:'#19339e'
  			})
    	}),
    	fill: new ol.style.Fill({
    		color: '#0055ff'
			}),
		stroke: new ol.style.Stroke({
			color: '#ffcc33',
			width: 3
		})
	})

        上面写的例子可以看出，写死后，直接调用，样式基本就固定了。细微细节想要变化不太好处理了。

3.2、不固定写法例子

        直接在对点线面绘制遍历过程逐一添加样式，可以增加细节上的优化。

            //点样式
            var pointStyle = new ol.style.Style({
	    		text:new ol.style.Text({
					testAlign:'left',
					text:i+"     ",             ///可变化
					font:'bold 15px 微软雅黑',
					fill:new ol.style.Fill({
						color:'yellow'
					})
				}),
    			image:new ol.style.Circle({
					radius:r,//半径
					fill:new ol.style.Fill({
						color:c1
					}),	//填充颜色				
					stroke: new ol.style.Stroke({
						color: c2,
						width: w
					})//渐变颜色和大小
				})
    		});

        点样式放在每个点要素的绘制过程中，可以对每个点要素进行标注等等，而固定写法则没法做到序号标注。

            var pFeature = new ol.Feature(geoPoint);
            //pFeature.setStyle(pointStyle);
            pFeature.setStyle(new ol.style.Style({
                 text:new ol.style.Text({
                     testAlign:'left',
                     text:i+"    ",
                     font:'bold 20px 微软雅黑',
                     fill:new ol.style.Fill({
                         color:'red'
                     })
                 }),
            }));

        线样式中则可以对每个节点进行标注，处理显示。

            var polygonStyle = new ol.style.Style({
				text:new ol.style.Text({
                	testAlign:'center',
                	text:"区域"+i,
               		font:'bold 20px 微软雅黑',
                	fill:new ol.style.Fill({
                    	color:'black'
		  			})
		    	}),
		    	fill: new ol.style.Fill({
            		color: '#0055ff'
       			}),
				stroke: new ol.style.Stroke({
					color: '#ffcc33',
					width: 3
				})
			});

        面样式放在每个面要素的绘制过程中进行渲染，可以获得想要的标注等样式。

4、显示效果

        为显示效果模拟的数据：

	var vectorlist = {"point":[[113.76101 , 23.52712],[113.73627 , 23.51769],[113.76506 , 23.51675],[113.74415 , 23.49535],[113.74415 , 23.49995],[113.75082 , 23.49976],[113.319 , 23.140],[113.319 , 23.109],[113.3386 , 23.1238]],"line":[[113.3386 , 23.1238],[113.4506 , 23.2675],[113.5415 , 23.49535],[113.74415 , 23.49995]],"polygon":["[[113.319 , 23.140],[113.319 , 23.109],[113.3386 , 23.1238]]","[[113.76101 , 23.52712],[113.73627 , 23.51769],[113.74415 , 23.49995],[113.76506 , 23.51675]]"]}

4.1、点显示

代码：

    function drawPoint(PointList){

        vecSource.clear();

        var points = PointList.point;//使用过程中需要修改为被请求服务中的字段

        for(var i=0;i<points.length;i++){

            var point = new ol.geom.Point(ol.proj.fromLonLat(points[i]));            
	    	var feature = new ol.Feature(point);
	    	var pointStyle = new ol.style.Style({
	    		text:new ol.style.Text({
					testAlign:'left',
					text:i+"     ",
					font:'bold 15px 微软雅黑',
					fill:new ol.style.Fill({
						color:'yellow'
					})
				}),
    			image:new ol.style.Circle({
					radius:5,//半径
					fill:new ol.style.Fill({
						color:'red'
					}),	//填充颜色				
					stroke: new ol.style.Stroke({
						color: 'blue',
						width: 1
					})//渐变颜色和大小
				})
    		});
	    	feature.setStyle(pointStyle);
	    	vecSource.addFeature(feature);
        }
    }

那么直接调用：

drawPoint(vectorlist);

得到效果有：

 4.2、线显示

代码：

    function drawLine(LineList){

        vecSource.clear();

        var lines = LineList.line;

        var line = new ol.geom.LineString();
        for(var i = 0;i < lines.length;i++){

            // var pPoint = ol.proj.transform([lines[i][0]*1,lines[i][1]*1], 'EPSG:4326', 'EPSG:3857');
            // line.appendCoordinate(pPoint);
            // var geoPoint = new ol.geom.Point([pPoint[0]*1,pPoint[1]*1]);

            line.appendCoordinate(ol.proj.fromLonLat(lines[i]));
            //标记每一个节点
            var geoPoint = new ol.geom.Point([ol.proj.fromLonLat(lines[i])[0]*1,ol.proj.fromLonLat(lines[i])[1]*1]);
            var pFeature = new ol.Feature(geoPoint);
            //pFeature.setStyle(pointStyle);
            pFeature.setStyle(new ol.style.Style({
                text:new ol.style.Text({
                    testAlign:'left',
                    text:i+"    ",
                    font:'bold 20px 微软雅黑',
                    fill:new ol.style.Fill({
                        color:'red'
                    })
                }),
            }));
            vecSource.addFeature(pFeature);
        }

        var feature = new ol.Feature(line);

        feature.setStyle(lineStyle);
        vecSource.addFeature(feature);
    }

效果：

4.3、面显示

代码：

	function drawPolygon(PloygonList){
        vecSource.clear();
		var ploys = PloygonList.polygon;
		for(var i=0;i < ploys.length;i++){
			var ploy = ploys[i];
			var json = JSON.parse(ploy);
			var polygon = new ol.geom.Polygon([json]);
			polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
			var feature = new ol.Feature(polygon);
			var polygonStyle = new ol.style.Style({
				text:new ol.style.Text({
                	testAlign:'center',
                	text:"区域"+i,
               		font:'bold 20px 微软雅黑',
                	fill:new ol.style.Fill({
                    	color:'black'
		  			})
		    	}),
		    	fill: new ol.style.Fill({
            		color: '#0055ff'
       			}),
				stroke: new ol.style.Stroke({
					color: '#ffcc33',
					width: 3
				})
			});
			feature.setStyle(polygonStyle);
			vecSource.addFeature(feature);
		}

    }

效果：

 5、结束

        由于个人喜好因素，矢量数据表现形式可能存在无数样式。所以往往大家有喜欢定制化的。那么在细节之处传入喜好的参数，就能够得到自己想要的样式了。所以有时候则需要将函数改动的更为灵活，这里静态显示其实也体现不出这种形式的好处，如若改为交互式的情形，那么所有配置参数将都可让用户自己设置。

        这里仅用点显示函数做例子，其他的都类似：

function drawPoint(PointList,c1,c2,r,w){

        vecSource.clear();

        var points = PointList.point;//使用过程中需要修改为被请求服务中的字段

        for(var i=0;i<points.length;i++){

            var point = new ol.geom.Point(ol.proj.fromLonLat(points[i]));            
	    	var feature = new ol.Feature(point);
	    	var pointStyle = new ol.style.Style({
	    		text:new ol.style.Text({
					testAlign:'left',
					text:i+"     ",
					font:'bold 15px 微软雅黑',
					fill:new ol.style.Fill({
						color:'yellow'
					})
				}),
    			image:new ol.style.Circle({
					radius:r,//半径
					fill:new ol.style.Fill({
						color:c1
					}),	//填充颜色				
					stroke: new ol.style.Stroke({
						color: c2,
						width: w
					})//渐变颜色和大小
				})
    		});
	    	feature.setStyle(pointStyle);
	    	vecSource.addFeature(feature);
        }
    }

        这里就可以将，点要素的半径、填充颜色、渐变色和大小都定制化选择了。

nanke_yh
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
全网最新版openlayers视频教程
02-27
学习关于二维地理图层渲染，投影转换，各种数据类型渲染，OGC服务，各种地图交互
如何基于openlayers绘制点、线、面各类要素缓冲区
HeyLoong的博客
06-15 994
然而官方demo对于如何绘制缓冲区未详细说明。
vue3 + openlayers---流动线条（含动画效果）
最新发布
QDxin_xyz的博客
05-18 188
和上一篇博客一样使用的是 setInterval 但是处理方式不一样。
【openlayers-5】地图点、线、面等要素添加
WXG1011的博客
01-01 1533
openlayers点、线、面等要素添加
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
我只是个很菜的前端
09-30 9592
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
OpenLayers设置显示文本
Gary Leong
10-16 6160
var nonTextStyle = new ol.style.Style({ //把点的样式换成ICON图标 fill: new ol.style.Fill({ //填充颜色 color: 'rgba(37,241,239,0.2)' ...
基于openlayers实现图片地图，路径绘制，点是否在区域中判定，路径播放，回放控制
02-16
1、实现图片地图，图片地图比例尺 2、绘制点的路径 3、绘制多边形，定位不规则多边形中心点，显示名称 4、多边形编辑 5、地图全屏，地图截图 6、点是否在区域中判定 7、暂停，播放，向前，向后20s，倍速播放控制路径...
Openlayers实现地图全屏显示
10-14
在OpenLayers中，实现地图全屏显示是通过集成全屏控制（FullScreen Control）来完成的，这使得用户可以轻松地将地图扩展到整个浏览器窗口，提高地图的可读性和用户体验。 首先，为了使用OpenLayers库，我们需要在...
openlayers实现地图测距测面
10-14
当用户完成绘制后，OpenLayers会自动计算出几何图形的长度或面积，并在地图上显示。 总的来说，OpenLayers 提供了丰富的API和工具，使得在Web应用中实现地图测距和测面变得相对简单。通过创建交互、监听事件、处理...
基于openlayers和canvas绘制海量数据的实现
01-26
基于openlayers和canvas绘制海量数据的实现
基于openlayers的局域网地图开发第8课基本图形绘制源码
12-22
可以实现地图显示、地点标注、绘制图形、添加图片与文字、地图保存与恢复、地点搜索查询、路径规划、二三维地图切换等功能，为局域网地图的开发和部署提供了比较完整的解决方案，所有功能均可在离线条件下实现。
openlayer 添加闪烁点,并移动到点位置
YangZe的博客
02-17 539
import "ol/ol.css"; import Map from "ol/Map"; import View from "ol/View"; import VectorSource from "ol/source/Vector"; import VectorLayer from "ol/layer/Vector"; import Feature from "ol/Feature"; import Point from "ol/geom/Point"; import { Fill, Stroke, S.
openlayers 根据style设置显示级别并在字体加背景框
dreamgis的专栏
09-24 2176
根据图层的属性字段设置图层显示级别 Iconstyle:function(feature,resolution) { var style = new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(241,242,236,0.8)', }), stroke : new ol.style.Stroke({ color : 'red', width : 2 }), image:new ol.style.Icon(({ offset: [0, 0]
Openlayers中实现地图上打点并显示图标和文字
BADAO_LIUMANG_QIZHI的博客
07-10 4941
场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118492511 在上面显示地图的基础上，怎样在地图上添加点，并且显示图标和文字信息。 实现效果如下 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 .
openlayers6 踩坑系列（三）绘制和编辑（矩形，圆，多边形，点，线）
qq_39404437的博客
11-23 8895
openlayers6 下的点、线、圆形、矩形、多边形的绘制与编辑
openlayers6【十五】地图样式 Style类详解
热门推荐
@必意玲
07-17 1万+
文章目录1. 写在前面2. ol.style 属性及子类3. ol.style使用栗子 1. 写在前面 地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。 了解更多矢量图层可以参考：openlayers6【十三】地图矢量图层 Vector 详解 2. ol.style 属性及子类 1.1 可以配置的选项 /* * @typedef {{ * geometry: (undefined|
OpenLayers基础教程——地图交互之绘制图形
HerryDong的博客
12-14 4705
1、前言 前面的博客其实已经介绍过了如何在openlayers中绘制图形，不过那是基于已有的坐标进行绘制。很多时候，用户往往需要使用鼠标自行在地图上进行图形绘制，这就涉及到了openlayers中的地图交互功能，下面开始介绍。 2、绘制基础图形 在openlayers中，实现地图交互的类是ol.interaction，默认情况下，openlayers只支持Point(点)、LineString(线)、Polygon(面)、Circle(圆)这四种基本图形。下面一段代码实现了这四种基本图形的绘制： <!
openlayers实现画圆
weixin_30808575的博客
05-31 923
概述： 本文讲述如何在openlayers中实现画圆。 效果： 实现思路： 1、画中心点 通过OpenLayers.Control.DrawFeature和OpenLayers.Handler.Point实现在地图上画圆心。 2、移动鼠标设置半径 画点结束后，激活地图的鼠标移动事件，获取圆心到鼠标点的距离，并画圆，将结果展示到地图上。 3、点击地图结...
Vue+Openlayers实现地图上绘制线
BADAO_LIUMANG_QIZHI的博客
11-10 3482
场景 Vue+Openlayers实现显示图片并分优先级多图层加载： Vue+Openlayers实现显示图片并分优先级多图层加载_BADAO_LIUMANG_QIZHI的博客-CSDN博客 上面是添加多个点的图层，如果添加线的图层，形如下面的效果 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、导入新的模块 //导入基本模块 import "ol/ol.css";
openlayers怎么在静态图片用经纬度绘制点
07-11
你可以使用 OpenLayers 库来在静态图片上使用经纬绘制点。下面是一个简单的例代码： ```html DOCTYPE html> <title>OpenLayers Example</title> style> #map { width: %; height: 400px } </style> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

nanke_yh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值