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

最新推荐文章于 2024-09-27 09:12:59 发布
最新推荐文章于 2024-09-27 09:12:59 发布
阅读量6k 收藏 34
点赞数 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
关注
openlayers5绘制点线面圆.zip
08-01
这个"openlayers5绘制点线面圆.zip"文件应该包含了一个示例项目，演示如何在OpenLayers 5中实现这些绘制功能。 在OpenLayers 5中，我们可以使用`ol.interaction.Draw`交互类来实现地图上的绘制操作。首先，你需要...
ol7源码学习之Source
FJGISer的博客
10-08 1381
1）3）两种方法中都会指定数据来源format， 矢量数据源支持的格式包含很多：gml、EsriJSON、geojson、gpx、igc、kml、osmxml、ows、polyline、topojson、wfs、wkt、wms capabilities（兼容 wms 的格式）、 wms getfeatureinfo、 wmts capabilities、xlink、xsd等格式。Source类：Layer的重要组成部分，表示图层的来源，也就是服务地址。，加载要素使用的数据格式，采用异步的 AJAX 加载；
openlayers 绘制点图层
gis_sss的博客
09-25 2925
一、思路首先将单个点组成数据，然后添加到矢量资源中生产点图层，这样做的原因是将一种类型的点数据变成一个图层用于图层的控制 二、普通实现方式 var fillStyle = new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.8)' }) // 边界样式 var strokeStyle = new ol.style.Stroke({ ...
openlayer点、线、面绘制
最新发布
weixin_54514048的博客
09-27 255
【代码】openlayer点、线、面绘制。
ol基础扫盲【02】符号化渲染style
dreamgis的专栏
05-04 360
最近在学习openlayers的style，不得不佩服ol的设计太灵活了，很好很强大，也顺便了解了一下其它前端gis的框架，也都很强大，不得不佩服，前端技术已经发展到甩桌面程序几条街的程度。 本人学东西，一直都很慢而且容易忘，加上年龄又了，所以很多东西要反复记，所以这次写点下来，给自己看。 以前对arcgis桌面版的渲染了解的多些，所以对比了一下两套引擎的设计，发现ol的设计真尼玛简单，所有的渲染都来自var style =new ol.style.Style({})，{}里面可以放任何东西，不像arc
openlayers画线 (七)
吴佩佩佩佩的博客
04-13 5486
创建要素 var wireFeature = new ol.Feature({ geometry:new ol.geom.LineString([[121.5025,31.237015], [121.5025,31.247015], [121.4925,31.237015]]) }); 数据源 var vectorSource = new ol.source.Vector({ featu...
openlayers单击获取要素的两种方式(getFeaturesAtPixel，interaction.Select())
popstarqq的博客
07-08 8067
openlayers提供了两种单击要素的方式，这里说的单击就是拾取要素，能够通过事件获得单击要素空间信息和属性信息的意思； 效果 1和效果2 首先生成两个点 // 注意图层顺序，定义越前的图层 会被后面图层盖着 new layer.Tile({ source: new source.OSM() }), new layer.Vector({ source: new source.Ve.
OpenLayers实现图层切换控件
10-14
首先，我们需要了解OpenLayers的基础概念。OpenLayers是一个开源JavaScript库，主要用于构建交互式的地图应用。它支持多种地图服务，如WMS、WMTS等，并允许用户添加不同类型的图层，如矢量图层、栅格图层等。在...
Openlayers+EasyUI Tree动态实现图层控制
10-14
具体实现可能涉及到遍历数据数组，为每个图层创建一个新的OpenLayers Layer对象，并将其添加到地图的图层层组。 TCKZguanlian函数实现了树与图层的关联。当用户在树中勾选或取消一个节点时，onCheck事件会被触发。...
openlayers3各种元素图形绘制
11-02
在OpenLayers 3中，你可以通过创建线性几何对象（如LineString）并添加特定样式来绘制这些方向。你可以设置线的颜色、宽度和端点形状，以清晰地显示攻击路径。 2. **自由地**：自由地通常指不受限制的区域。这可以...
openlayers 编辑geoserver图层
11-19
在压缩包中的"OPENLAYERS+Geoserver修改图层要素"可能包含示例代码或教程，帮助初学者理解如何实现这些功能。学习时，你需要理解OpenLayers的图层、控件和事件处理机制，以及GeoServer的WFS服务和数据管理。通过实践...
OpenLayers 之 地图图层数据来源（ol.source）详解，ps图层混合模式详解
lu18225857116的博客
06-20 2737
source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址。除了在构造函数中制定外，可以使用 layer.setSource(source) 稍后指定。 一、包含的类型 上面介绍的都是可以实例化的类，还有一部分基类，不能被实例化，只负责被继承，有： ol.source.Image，提供单一图片数据的类型，直接继承自 ol.source.Source；ol.sou
openlayers学习二
qq_42583549的博客
05-26 1093
openlayers学习二 实现地图标记路线 地图上的点位在openlayers中都抽象为特征点。翻阅文档说明 ol/Feature~Feature import Feature from 'ol/Feature'; A vector object for geographic features with a geometry and other attribute properties, similar to the features in vector file formats like GeoJS
Openlayers 常见API (1)
m0_65607651的博客
05-07 3334
组定义映射中可用的图层组，用来盛放地图上的各种元素，其在地图上的显示顺序是按照数组中元素序列从下到上呈现的，可以直接在创建地图时定义图层，多个图层的时候可以单独定义。与控件不同的是，它们不在屏幕上的固定位置，而是绑定到地理坐标上，因此平移地图将移动。在适当的位置修改几何图形。投影，投影决定了中心的坐标系，其单位决定了分辨率的单位(每个像素的投影单位)。所以得到的几何形状也是一个圆，而这个圆并不等同于通过变换原圆的每一点得到的形状。检测在视图端口上的像素处具有颜色值的层，并对每个匹配的层执行回调。
openLayers实战(三)：图层layer与元素feature
在下魔王ii的博客
08-09 3644
在第一篇中，已经建立了map、view、source、layer之间的关系，并正确渲染，这里展开说明如何正确的创建图层和元素。
openlayers-06-坐标添加点、线、面
chuanren1991的博客
05-15 2924
openlayers坐标添加点、线、面。
openlayers 一些样式
qq_38000851的博客
08-27 2093
近期工作需要设计交通图，故需要设计一些类似铁路，桥梁，隧道等样式，在此记录下样式的一些效果。可能有更好的实现方式，在这里 就当抛转引玉了。 参考文章： https://www.jianshu.com/p/e68e8e1b7474 1.铁路 需要设计以下两种样式，一种再建的，一种已完工的 样式代码： //铁路已完工 [ new ol.style.Style({ stroke: new ol.style.Stroke({
openLayers绘制点、线、面
Raccon_的博客
10-24 2234
笔记
OpenLayers 3 之 map样式（ol.style）详解
热门推荐
jyj545的专栏
11-16 1万+
OpenLayers 3 之 地图样式（ol.style）详解       地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。       矢量图层样式可以事先写好，写成静态的，矢量图层直接按照定义好的样式渲染，也可以动态使用样式的 set() 方法，但是要注意刷新矢量图层
OpenLayers3教程：绘制要素与交互控制
在OpenLayers 3中，绘制要素是一项核心功能，它允许用户在地图上动态添加新的地理特征。通过`ol.interaction.Draw`接口，我们可以实现这个功能，它需要一个矢量图层作为绘制的基础，并指定要绘制的几何类型。在描述...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值