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

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

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值