leaflet 请求geojson数据绘制面层

最新推荐文章于 2024-07-01 09:36:29 发布

炉火纯青-旺

最新推荐文章于 2024-07-01 09:36:29 发布

阅读量2.6k

点赞数 1

分类专栏： leaflet 文章标签： leaflet

本文链接：https://blog.csdn.net/qq_34870529/article/details/91849831

版权

leaflet 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>leaflet 添加行政区划面</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
</head>

<body>
    <div id="map" style="position:absolute;width:100%;height:100%;"></div>
    <script>
        var map = L.map('map').setView([31.82, 89.08], 8);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var loadData = function () {
            $.ajax("http://localhost:5000/data/xizang.geojson", {
                dataType: "json",
                success: function (response) {
                    var arr = [];
                    var coordinates = response.features[0].geometry.coordinates[0];
                    arr.push(coordinates);
                    var states = [{
                        "type": "Feature",
                        "properties": {
                            "NAME": "西藏自治区",
                        },
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": arr
                        }
                    }];
                    var myStyle = {
                        color:"#ff7800"
                    };
                    // Add to layer
                    L.geoJSON(states, {
                        style: myStyle
                    }).addTo(map);
                }
            });
        }
        loadData();
    </script>
</body>

</html>

炉火纯青-旺

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
leaflet 请求geojson数据绘制面层

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫

专栏目录