leaflet 添加聚合marker点

最新推荐文章于 2024-09-13 22:06:16 发布

炉火纯青-旺

最新推荐文章于 2024-09-13 22:06:16 发布

阅读量4.3k

点赞数

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

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

版权

leaflet 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <!--<meta charset="utf-8" />-->
    <title>北京市顺义区学校聚合marker点</title>
    <link href="./css/leaflet.css" rel="stylesheet" />
    <link href="./css/MarkerCluster.css" rel="stylesheet" />
    <link href="./css/MarkerCluster.Default.css" rel="stylesheet" />
    <script src="./js/leaflet-src.js"></script>
    <script src="./js/leaflet.markercluster.js"></script>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var latlng = L.latLng(39.924, 116.463);
        var map = L.map('map', { center: latlng, zoom: 3 });
        var baseLayers = {
            "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
                subdomains: "1234"
            }),
            '天地图影像': L.layerGroup([L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
                subdomains: "1234"
            }), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', {
                subdomains: "1234"
            })]),
            'GeoQ灰色底图': L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map)
        };
        L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
            attribution: 'Map © Pacific Rim Coordination Center (PRCC).  Certain data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            key: 'BC9A493B41014CAABB98F0471D759707',
            styleId: 22677
        });
 
        var layercontrol = L.control.layers(baseLayers, {}, {
            position: "topleft"
        }).addTo(map);
        loadWFS("cite:university", "EPSG:4326");
        console.log($("#map"));
        
        var heatMarkerLayer = L.markerClusterGroup();

        function loadWFS(layerName, epsg) {
            var urlString = "http://10.1.1.8:8090/geoserver/ex1/ows";
            var param = {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typeName: 'ex1:JY',
                outputFormat: 'json',
                maxFeatures:50
            };
            var u = urlString + L.Util.getParamString(param, urlString);
            console.log("u",u);        
            $.ajax({
                url:u,
                dataType: 'json',
                success: loadWfsHandler,
            });
            function loadWfsHandler(data) {
                layer = L.geoJson(data, {
                    pointToLayer: function (feature, latlng) {
                        var title = feature.properties.NAME;
                        var marker = L.marker(L.latLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]));
                        console.log(marker);
                        marker.bindPopup(title);
                        // leafletView.RegisterMarker(marker);
                        heatMarkerLayer.addLayer(marker);
                    }
                })
            }
        }
        map.addLayer(heatMarkerLayer);
    </script>
</body>
</html>

效果图展示：