场景

Openlayers下载与加载geoserver的wms服务显示地图：

​​Openlayers下载与加载geoserver的wms服务显示地图_BADAO_LIUMANG_QIZHI的博客-

除了上面加载wms服务显示地图之外，还可以加载显示GeoJson数据显示地图。

Openlayers官方示例代码：

​​geojson-vt integration​​

这里借用示例代码中json文件的网络url以及中心点和边界等参数。

Openlayers中加载GeoJson文件显示地图_json

 

注：

博客：​​BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_C#,SpringBoot,架构之路领域博主​​

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、新建layer，并声明layer的source

var layer =  new ol.layer.Vector({
                source: new ol.source.Vector({
                    //url: './data/Line.json',     // 地图来源 使用本地url 离线加载会报跨域问题
                    url: 'https://openlayers.org/data/vector/ecoregions.json',     // 地图来源           
                    format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类
                })
            });

注意这里的url使用的是网络url，如果使用本地url的话，会报跨域问题

Openlayers中加载GeoJson文件显示地图_openlayers_02

2、设置视图管理器相关参数

var view = new ol.View({
            //中心点
            center: [0, 0],
            //缩放等级
            zoom: 4,
            //投影坐标系
            projection: "EPSG:4326",
            //边界
            extent: [0, 0, 4096, 4096],
            maxZoom: 7,
            minZoom: 4,
        });

3、地图map中添加图层并设置视图

var map = new ol.Map({
            layers: [layer],
            target: 'map',
            view: view
        });

4、完整示例代码

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

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers 离线加载GeoJson数据</title>
    <link rel="stylesheet" href="lib/ol65/ol.css" type="text/css">
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="lib/ol65/ol.js"></script>
    <script type="text/javascript">
 
        //Layers 图层管理类，用来管理图层信息。主要包括Tile，Image，Vector，VectorTile等图层。
        var layer =  new ol.layer.Vector({
                source: new ol.source.Vector({
                    //url: './data/Line.json',     // 地图来源 使用本地url 离线加载会报跨域问题
                    url: 'https://openlayers.org/data/vector/ecoregions.json',     // 地图来源           
                    format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类
                })
            });

        //View 视图管理器，主要用来管理地图视图，分辨率或旋转，中心、投影、分辨率、缩放级别等。
        var view = new ol.View({
            //中心点
            center: [0, 0],
            //缩放等级
            zoom: 4,
            //投影坐标系
            projection: "EPSG:4326",
            //边界
            extent: [0, 0, 4096, 4096],
            maxZoom: 7,
            minZoom: 4,
        });

        //Map Openlayers的核心组件，包含图层、交互事件、UI控制元素等。
        var map = new ol.Map({
            layers: [layer],
            target: 'map',
            view: view
        });


    </script>
</body>

</html>

5、效果

Openlayers中加载GeoJson文件显示地图_openlayers_03