<!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>效果图展示：
