場景
Openlayers下載與加載geoserver的wms服務顯示地圖：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114320531
除了上面加載wms服務顯示地圖之外，還可以加載顯示GeoJson數據顯示地圖。
Openlayers官方示例代碼：
https://openlayers.org/en/latest/examples/geojson-vt.html
這里借用示例代碼中json文件的網絡url以及中心點和邊界等參數。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
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的話，會報跨域問題
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、效果
