Leaflet-Ajax 项目教程

最新推荐文章于 2024-12-31 10:11:07 发布

宫俊潇Gresham

最新推荐文章于 2024-12-31 10:11:07 发布

阅读量1k

点赞数 15

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00886/article/details/142507935

Leaflet-Ajax 项目教程

leaflet-ajax plugin for leaflet for ajax 项目地址: https://gitcode.com/gh_mirrors/le/leaflet-ajax

1. 项目介绍

Leaflet-Ajax 是一个用于 Leaflet 地图库的插件，允许通过 Ajax 调用加载 GeoJSON 数据，并支持 JSONP 作为后备方案。该插件简化了在 Leaflet 地图上动态加载和显示 GeoJSON 数据的过程，适用于需要从远程服务器加载地理数据的应用场景。

2. 项目快速启动

安装

首先，通过 npm 或直接下载的方式安装 Leaflet-Ajax：

npm install leaflet-ajax

或者直接下载 leaflet-ajax.js 文件。

引入

在 HTML 文件中引入 Leaflet 和 Leaflet-Ajax：

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="path/to/leaflet.ajax.min.js"></script>

使用

以下是一个简单的示例，展示如何使用 Leaflet-Ajax 加载 GeoJSON 数据并显示在地图上：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet-Ajax 示例</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="path/to/leaflet.ajax.min.js"></script>
    <style>
        #map { height: 600px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        var geojsonLayer = new L.GeoJSON.AJAX("path/to/your/geojson.json", {
            onEachFeature: function(feature, layer) {
                layer.bindPopup(feature.properties.name);
            }
        }).addTo(map);
    </script>
</body>
</html>