tiles都是完整的html,GeojsonTiles.html

Leaflet1

body {

margin: 0px;

padding: 0px;

}

/**

* 单独设置mapid为100%不显示，可能float坍塌

*/

html,

body,

#mapDiv {

height: 100%;

width: 100%;

}

//地图地址

var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var attr = ' Map data © OpenStreetMap contributors, © CartoDB';

var lon = 121.8170896;

var lat = 31.1471532;

var leafletMap = L.map('mapDiv').setView([lat, lon], 10);

//图层

L.tileLayer(url, {

maxZoom: 18,

attribution: attr,

id: 'mapbox.streets'

}).addTo(leafletMap);

var style = {

"clickable": true,

"color": "#00D",

"fillColor": "#00D",

"weight": 1.0,

"opacity": 0.3,

"fillOpacity": 0.2

};

var hoverStyle = {

"fillOpacity": 0.5

};

var geojsonURL = 'http://localhost:8080/tiles/{z}/{x}/{y}.geojson';

var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {

clipTiles: true,

unique: function (feature) {

return feature.id;

}

}, {

style: style,

onEachFeature: function (feature, layer) {

if (feature.properties) {

var popupString = '

';

for (var k in feature.properties) {

var v = feature.properties[k];

popupString += k + ': ' + v + '
';

}

popupString += '

';

layer.bindPopup(popupString);

}

if (!(layer instanceof L.Point)) {

layer.on('mouseover', function () {

layer.setStyle(hoverStyle);

});

layer.on('mouseout', function () {

layer.setStyle(style);

});

}

}

}

);

leafletMap.addLayer(geojsonTileLayer);

一键复制

编辑

Web IDE

原始数据

按行查看

历史