利用OpenLayers加载GeoJSON矢量数据

最新推荐文章于 2025-08-04 17:00:19 发布

WSY开发联盟

最新推荐文章于 2025-08-04 17:00:19 发布

阅读量1.4w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： WebGIS 文章标签： GeoJSON

本文链接：https://blog.youkuaiyun.com/weixin_38307752/article/details/84112566

本文介绍了如何利用OpenLayers API加载和显示GeoJSON格式的矢量数据。GeoJSON是一种JSON格式的地理数据，易于编辑和在浏览器中处理。通过引入OpenLayers库并编写JavaScript代码，可以在网页上创建地图并展示GeoJSON数据。

随着互联网技术的不断发展，各大地理公司相继推出了基于JavaScript的地图开发API，典型的API有ArcGIS API for JavaScript、OpenLayers等。常见的地理数据格式除了Shapefile以外，还有GeoJSON格式的矢量数据。根据网站的官方解释，GeoJSON是一种包含着点、线、面的坐标信息及属性等各种地理要素的一种JSON格式，可以在记事本中直接打开。因此，在某种程度上GeoJSON的编辑不需要用户直接下载安装ArcGIS客户端，直接在浏览器编辑即可。典型的GeoJSON格式如下：

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

OpenLayers也有加载GeoJSON的能，具体操作如下：

首先，引入第三方的OpenLayers的JS和CSS，它们应放在<head>的下一级：

（第三方的插件可以通过HTTP直接引用，也可以下载到本地机器上）

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

其次，在<body>的下一级中建立DIV，作为地图展示的区域：