OpenLayers加载GeoJSON格式数据

最新推荐文章于 2024-07-29 18:52:38 发布

HerryDong

最新推荐文章于 2024-07-29 18:52:38 发布

阅读量3.7k

点赞数

文章标签： OpenLayers GeoJSON

本文链接：https://blog.csdn.net/HerryDong/article/details/103163429

版权

GeoJSON是针对地理数据的一种轻量级数据格式，利用OpenLayers可以轻松加载GeoJSON文件。如果你当前只有shp文件，也可以登录https://mapshaper.org/进行相应的格式转换。我这里有一份省会点的GeoJSON文件，如下图所示：

在这里插入图片描述
利用OpenLayers加载GeoJSON的代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>加载GeoJSON</title>
    <link href="scripts/ol.css" rel="stylesheet" />
    <script src="scripts/ol.js"></script>
</head>
<body>
    <div id="map"></div>

    <script>
        var layer = new ol.layer.Vector({
            title: 'add Layer',
            source: new ol.source.Vector({
                projection: 'EPSG:4326',
                url: "../data/test.json",
                format: new ol.format.GeoJSON()
            })
        });

        var map = new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: ol.proj.fromLonLat([120, 30]),
                zoom: 5
            })
        });
    </script>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

HerryDong

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
OpenLayers加载GeoJSON格式数据

GeoJSON是针对地理数据的一种轻量级数据格式，利用OpenLayers可以轻松加载GeoJSON文件。如果你当前只有shp文件，也可以登录https://mapshaper.org/进行相应的格式转换。我这里有一份省会点的GeoJSON文件，如下图所示：利用OpenLayers加载GeoJSON的代码如下所示：<!DOCTYPE html><html><...
复制链接

扫一扫