OpenLayers基础教程——创建要素图层，绘制点线面

最新推荐文章于 2024-05-11 15:47:37 发布
最新推荐文章于 2024-05-11 15:47:37 发布
阅读量5.6k 收藏 33
点赞数 8
文章标签： openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HerryDong/article/details/110933819
版权

1、前言

一般来说，我们会选择百度、高德、谷歌地图作为一个WebGIS系统的基础底图。底图其实就是存放在服务器上的一张一张的瓦片，它的作用仅仅是供用户浏览而已。而有些地物我们则需要以要素的形式来展现它们，比如GPS实测点、车辆的位置等。下面就来介绍一下如何在openlayers中创建要素图层。

2、创建要素图层的基本流程

创建要素图层的流程很简单，如下所示：

  1. 创建样式——new ol.style.Style()
  2. 创建要素，设置其样式——new ol.Feature()
  3. 创建数据源，添加要素——new ol.source.Vector()
  4. 创建要素图层，设置数据源——new ol.layer.Vector()
  5. 创建地图，添加要素图层——new ol.Map()

3、绘制点

以绘制一个点为例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;"></div>
    <script>
        // 创建样式
        var style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 20,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        });

        // 创建要素，设置其样式
        var feature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'))
        });
        feature.setStyle(style);

        // 创建数据源，添加要素
        var source = new ol.source.Vector();
        source.addFeature(feature);

        // 创建要素图层
        var layer = new ol.layer.Vector({
            source: source
        });

        // 创建地图，将要素图层加入其中
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:3857',
                center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

4、绘制线

以绘制一条线为例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;"></div>

    <script>
        // 创建显示样式
        var style = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 2
            })
        })

        // 创建要素，设置其样式
        var feature = new ol.Feature({
            geometry: new ol.geom.LineString([
                ol.proj.transform([119.8, 29.8], 'EPSG:4326', 'EPSG:3857'),
                ol.proj.transform([120.0, 30.0], 'EPSG:4326', 'EPSG:3857'),
                ol.proj.transform([120.2, 29.8], 'EPSG:4326', 'EPSG:3857')
            ])
        });
        feature.setStyle(style);

        // 创建数据源，添加要素
        var source = new ol.source.Vector();
        source.addFeature(feature);

        // 创建要素图层
        var layer = new ol.layer.Vector({
            source: source
        });

        // 创建地图，将要素图层加入其中
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:3857',
                center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

5、绘制面

以绘制一个面为例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;"></div>

    <script>
        // 创建显示样式
        var style = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'pink'
            })
        });

        // 创建要素，设置其样式
        var feature = new ol.Feature({
            geometry: new ol.geom.Polygon([[
                ol.proj.transform([119.8, 29.8], 'EPSG:4326', 'EPSG:3857'),
                ol.proj.transform([120.2, 29.8], 'EPSG:4326', 'EPSG:3857'),
                ol.proj.transform([120.0, 30.0], 'EPSG:4326', 'EPSG:3857'),
                ol.proj.transform([119.8, 29.8], 'EPSG:4326', 'EPSG:3857')
            ]])
        });
        feature.setStyle(style);

        // 创建数据源，添加要素
        var source = new ol.source.Vector();
        source.addFeature(feature);

        // 创建要素图层
        var layer = new ol.layer.Vector({
            source: source
        });

        // 创建地图，将要素图层加入其中
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:3857',
                center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

6、绘制圆

以绘制一个圆为例，圆心经纬度[120.0, 30.0]、半径5000米，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;"></div>

    <script>
        // 创建显示样式
        var style = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'orange'
            })
        });

        // 创建要素，设置其样式
        var feature = new ol.Feature({
            geometry: new ol.geom.Circle(ol.proj.transform([120.0, 30.0], 'EPSG:4326', 'EPSG:3857'), 5000)
        });
        feature.setStyle(style);

        // 创建数据源，添加要素
        var source = new ol.source.Vector();
        source.addFeature(feature);

        // 创建要素图层
        var layer = new ol.layer.Vector({
            source: source
        });

        // 创建地图，将要素图层加入其中
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:3857',
                center: ol.proj.transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
                zoom: 10
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

7、结语

在openlayers中创建要素图层其实很简单，只需要遵照一定流程即可轻松完成。点线面这三者在创建过程中的区别仅是style和geometry不同而已。关于要素样式——ol.style.Style的创建和使用，我会在后续博客中进行介绍。

HerryDong
关注
  • 8
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
openlayers添加覆盖层
10-09
openlayers添加云层覆盖物至地图上，自定义移动范围，增添地图动态效果
openlayers5绘制点线面圆.zip
08-01
这个"openlayers5绘制点线面圆.zip"文件应该包含了一个示例项目，演示如何在OpenLayers 5中实现这些绘制功能。 在OpenLayers 5中，我们可以使用`ol.interaction.Draw`交互类来实现地图上的绘制操作。首先，你需要...
openlayers 绘制点图层
gis_sss的博客
09-25 2851
一、思路首先将单个点组成数据，然后添加到矢量资源中生产点图层，这样做的原因是将一种类型的点数据变成一个图层用于图层的控制 二、普通实现方式 var fillStyle = new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.8)' }) // 边界样式 var strokeStyle = new ol.style.Stroke({ ...
openlayers入门教程
最新发布
Admans的专栏
05-11 257
平铺图层。对于提供预呈现、平铺的网格图像的层源，这些网格按特定分辨率的缩放级别组织。图像图层。服务器呈现的映像，可用于任意范围和分辨率。(3)ol.layer.Vector()很常用矢量图层。矢量平铺图层。图层用于客户端呈现矢量平铺数据。
Openlayers 在地图上画点，线，面，圆
热门推荐
jimjiayu
03-10 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>OPenLayers 3 example</title> <link rel="stylesheet" href="ol3/ol.css"> <style> #map{ width: 100
JavaScript、jquery方法累计
BoBoLUI的博客
10-25 545
JavaScript、jquery方法累计 一、页面弹动 iG.setBounce = function(){ uexWindow.setBounce(“1”); uexWindow.showBounceView(“0”,”#f4f4f4”,”0”); uexWindow.showBounceView(“1”,”#f4f4f4”,”0”); uexWind
openlayer在图层中添加点
weixin_43371136的博客
01-06 323
let newFeature = new Feature({ geometry: new Point(center) }); layer.getSource().addFeatures([newFeature]); 有openlayer和cesium的问题可以一起讨论呀
Openlayers+EasyUI Tree动态实现图层控制
10-14
具体实现可能涉及到遍历数据数组，为每个图层创建一个新的OpenLayers Layer对象，并将其添加到地图的图层层组。 TCKZguanlian函数实现了树与图层的关联。当用户在树中勾选或取消一个节点时，onCheck事件会被触发。...
OpenLayers实现图层切换控件
10-14
首先，我们需要了解OpenLayers的基础概念。OpenLayers是一个开源JavaScript库，主要用于构建交互式的地图应用。它支持多种地图服务，如WMS、WMTS等，并允许用户添加不同类型的图层，如矢量图层、栅格图层等。在...
OpenLayers图层组控制
07-19
iClient for OpenLayers控制图层组显隐方式的实现步骤。 下载后直接运行目录下：example\示例\图层组控制.html(需要修改里面的服务地址url为自己发布的服务信息)
Openlayers通过元素获取图层，通过点元素获取线元素
03-12
Openlayers虽然提供了很多方法， 一般是从图层（Layer）获取获取元素（feature），或者从元素（Feature）获取坐标（Coordinate）。获取到的一般都是集合。但是想要反着通过元素（feature）获取图层（Layer）.OL选择...
openlayers在线绘制
08-24
在线绘制折线，多边形，并且返回相应的绘制后坐标，进行3857或4326坐标转换
openlayers5加载线要素.zip
07-04
采用openlayers5，在天地图上画直线，此代码可供参考。
openlayers-06-坐标添加点、线、面
chuanren1991的博客
05-15 2518
openlayers坐标添加点、线、面。
在vue中使用OpenLayers地图 02 绘制点线面等图形
不染-9732
02-21 2113
openLayers地图绘制多边形
Openlayers | Cesium 在线生成随机点线面坐标数据
linzi19900517的博客
11-11 3022
地图开发工作中，有时候需要模拟一些数据，之前都是手动用循环创建，数据太有规律，不好用，于是搞个在线工具。
openlayers学习——7、openlayers加图层
记录生活点滴
01-12 4029
openlayers加图层 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/index
OpenLayers笔记2：点、线、面矢量要素的自定义渲染
getMoreTime的博客
04-02 6655
新建矢量图层ol.layer.Vector时，可以通过使用ol.style来自定义渲染地图矢量要素的样式； ol.style概述 在ol.style中默认可以配置的要素包括： Fill：填充的样式，对应的模块为ol.style.Fill； Geometry：地理属性，对应模块为ol.style.Style，使用GeometryFunction设置要素的地理位置、几何属性等； Image：图像的样式...
layer添加元素 openlayer_OpenLayers开发：添加地标
weixin_31183253的博客
01-12 469
地标是地图应用中常用的方法，通过一个小图标在地图上来标识pointsof interest(POI)。地标方法主要涉及OpenLayers.Marker和OpenLayers.Layer.Markers两个类，下面介绍添加地标的方法。1. 创建HTML文件，引入OpenLayers开发包，插入地图div元素：2. 创建地图实例对象，添加基础图层和相应控件。3. 增加OpenLayers.Layer...
openlayers绘制点线面
05-02
OpenLayers是一个开源的JavaScript库，用于在Web上渲染交互式地图。它提供了丰富的功能和API，允许用户在地图上添加各种不同的元素，包括点、线和面。 以下是OpenLayers绘制点、线和面的基本步骤： 1. 创建地图对象 使用OpenLayers创建一个地图对象，设置地图中心点和缩放级别。 2. 创建矢量图层 使用OpenLayers创建一个矢量图层，并将其添加到地图中。 3. 创建要素 使用OpenLayers创建一个要素对象，可以是点、线或面。 4. 绘制要素 使用OpenLayers提供的绘制工具，将要素添加到矢量图层中。可以通过鼠标交互或代码方式来进行绘制。 5. 渲染地图 将地图渲染到页面上，可以使用OpenLayers提供的默认样式，也可以自定义样式。 下面是一个简单的示例代码，演示如何使用OpenLayers绘制点、线和面： ``` // 创建地图对象 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([116.38, 39.9]), zoom: 10 }) }); // 创建矢量图层 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector(), style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }) }); map.addLayer(vectorLayer); // 创建要素 var point = new ol.geom.Point(ol.proj.fromLonLat([116.38, 39.9])); var line = new ol.geom.LineString([ol.proj.fromLonLat([116.38, 39.9]), ol.proj.fromLonLat([116.4, 39.9])]); var polygon = new ol.geom.Polygon([[ ol.proj.fromLonLat([116.38, 39.9]), ol.proj.fromLonLat([116.4, 39.9]), ol.proj.fromLonLat([116.4, 39.92]), ol.proj.fromLonLat([116.38, 39.92]), ol.proj.fromLonLat([116.38, 39.9]) ]]); // 绘制要素 var pointFeature = new ol.Feature(point); var lineFeature = new ol.Feature(line); var polygonFeature = new ol.Feature(polygon); vectorLayer.getSource().addFeatures([pointFeature, lineFeature, polygonFeature]); // 渲染地图 map.render(); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值