geoserver 能很好地和ol進行結合，geoserver是一個很好的開源的服務器，免費開源，雖然在使用上還比不上ArcGerser但是開源，leaflet主框架支持加載wms服務，沒有WFS服務，加載WFS需要用個WFS插件，但是限制太多，在這里選用的方式為
Ajax的方式加載，加載返回geojson數據結合散點聚合插件。
效果圖：
一、加載數據代碼
function loadWFS(layerName, epsg) {
var urlString = "http://localhost:8080/geoserver/cite/ows";
var param = {
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
typeName: layerName,
outputFormat: 'application/json',
maxFeatures:3200,
srsName: epsg
};
var u = urlString + L.Util.getParamString(param, urlString);
console.log(u);
$.ajax({
url:u,
dataType: 'json',
success: loadWfsHandler,
});
function loadWfsHandler(data) {
console.log(data);
layer = L.geoJson(data, {
pointToLayer: function (feature, latlng) {
var title = feature.properties.name;
var marker = L.marker(L.latLng(feature.properties.lat, feature.properties.lon));
marker.bindPopup(title);
markers.addLayer(marker);
}
})
}
}二、demo示例
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8" />-->
<title>國內高校散點聚合</title>
<link href="../script/leaflet/leaflet.css" rel="stylesheet" />
<link href="../script/mark/MarkerCluster.css" rel="stylesheet" />
<link href="../script/mark/MarkerCluster.Default.css" rel="stylesheet" />
<script src="../script/leaflet/leaflet.js"></script>
<script src="../script/mark/leaflet.markercluster-src.js"></script>
<!--<script src="../js/WFS.js"></script>-->
<script src="../../Scripts/jquery-3.3.1.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 markers = L.markerClusterGroup({ chunkedLoading: true });
function loadWFS(layerName, epsg) {
var urlString = "http://localhost:8080/geoserver/cite/ows";
var param = {
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
typeName: layerName,
outputFormat: 'application/json',
maxFeatures:3200,
srsName: epsg
};
var u = urlString + L.Util.getParamString(param, urlString);
console.log(u);
$.ajax({
url:u,
dataType: 'json',
success: loadWfsHandler,
});
function loadWfsHandler(data) {
console.log(data);
layer = L.geoJson(data, {
pointToLayer: function (feature, latlng) {
var title = feature.properties.name;
var marker = L.marker(L.latLng(feature.properties.lat, feature.properties.lon));
marker.bindPopup(title);
markers.addLayer(marker);
}
})
}
}
map.addLayer(markers);
</script>
</body>
</html>