通过原型对象prototype创建openlayers扩展库

在openlayers前端开发中，对于一些常用的方法，我们会考虑封装成一个通用函数库，这样在以后每次开发的时候，引入我们自己封装的库，会大大提升我们开发的效率。

这里会为大家推荐一种比较高级的封装方法，也就是通过javascript的原型对象prototype创建openlayers扩展库，扩展库创建完成后，我们可以直接通过对象去访问我们封装的方法，很实用，也很方便，很多openlayers的扩展库都是通过这种方法进行封装的。

首先我们去openlayers官方下载最新的openlayers开发包：openlayers，然后，创建一个demo.html，引入开发包，并创建一个地图，加入osm地图。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="ol.css">
    <style>
        body {
            margin: 0;
        }

        .map {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

    </style>
</head>

<body>
    <div class="map" id="map"></div>
    <script src="ol.js"></script>
    <script>
        // 创建图层
        var osmLayer = new ol.layer.Tile({
            source: new ol.source.OSM()
        })
        // 坐标投影
        var projection = new ol.proj.Projection({
            code: "EPSG:4326",
            units: "degrees"
        });
        //创建视图
        var view = new ol.View({
            projection: projection,
            center: [106.311027526855, 29.8532611846924],
            zoom: 12
        });
        //创建地图
        var map = new ol.Map({
            target: "map",
            view: view,
            layers: [osmLayer]
        });
    </script>
</body>

</html>

然后呢，就开始封装。首先我们创建一个js文件，随便命名，我这里命名为ol-extend.js
我们将ol-extend.js，引入到demo.html中。
这里我们就简单封装一个加载geojson的方法。
正常的加载方法如下：

var layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: url,
            format: new ol.format.GeoJSON(),
        }),
});
map.addLayer( layer )

我们通过javascript原型对象prototype进行封装,封装格式如下

ol.对象名+prototype+函数名称 = function(参数){};

// 扩展可添加geojson方法
ol.Map.prototype.addGeojsonLayer = function (url) {
    this.addLayer(new ol.layer.Vector({
        source: new ol.source.Vector({
            url: url,
            format: new ol.format.GeoJSON(),
        }),
    }))
};

这样，我们就可以通过 map.addGeojsonLayer(url) 快速的加载geojson图层。

完整的代码如下 demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="ol.css">
    <style>
        body {
            margin: 0;
        }

        .map {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

    </style>
</head>

<body>
    <div class="map" id="map"></div>
    <script src="ol.js"></script>
    <script src="ol-extend.js"></script>
    <script>
        // 创建图层
        var osmLayer = new ol.layer.Tile({
            source: new ol.source.OSM()
        })
        // 坐标投影
        var projection = new ol.proj.Projection({
            code: "EPSG:4326",
            units: "degrees"
        });
        //创建视图
        var view = new ol.View({
            projection: projection,
            center: [106.311027526855, 29.8532611846924],
            zoom: 12
        });
        //创建地图
        var map = new ol.Map({
            target: "map",
            view: view,
            layers: [osmLayer]
        });
        var url = "http://192.168.10.35:8595/geoserver/GIS_Model_BB/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=GIS_Model_BB%3Abb_xzq&maxFeatures=50&outputFormat=application%2Fjson";
        map.addGeojsonLayer(url);
    </script>
</body>

</html>

ol-extend.js 源代码

// 扩展可添加geojson方法
ol.Map.prototype.addGeojsonLayer = function (url) {
    this.addLayer(new ol.layer.Vector({
        source: new ol.source.Vector({
            url: url,
            format: new ol.format.GeoJSON(),
        }),
    }))
};

希望能对大家开发有所帮助。

来源：CSDN

作者：GIS骨灰爱好者

链接：https://blog.csdn.net/m0_37577670/article/details/104040085

标签

geojson