杭州市实景地图 (杭州市实景地图全图)

style.css css map {width: 100%;height: 500px; }script.js javascript // 添加杭州市实景地图图层 var map = L.map('map').setView([30.287455, 120.153575], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors' }).addTo(map);// 添加杭州市边界线图层 L.geoJSON(hangzhouBoundary, {style: {color: 'ff0000',weight: 3} }).addTo(map);// 添加杭州市行政区划图层 L.geoJSON(hangzhouDistricts, {style: {color: '00ff00',weight: 2} }).addTo(map);// 添加杭州市主要道路图层 L.geoJSON(hangzhouRoads, {style: {color: '0000ff',weight: 1} }).addTo(map);// 添加杭州市主要河流图层 L.geoJSON(hangzhouRivers, {style: {color: '000000',weight: 1} }).addTo(map);// 添加杭州市主要湖泊图层 L.geoJSON(hangzhouLakes, {style: {color: '008080',weight: 1} }).addTo(map);// 添加杭州市主要公园图层 L.geoJSON(hangzhouParks, {style: {color: '00ffff',weight: 1} }).addTo(map);// 添加图例 var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) {var div = L.DomUtil.create('div', 'info legend');var labels = ['杭州市边界线', '杭州市行政区划', '杭州市主要道路', '杭州市主要河流', '杭州市主要湖泊', '杭州市主要公园'];var colors = ['ff0000', '00ff00', '0000ff', '000000', '008080', '00ffff'];for (var i = 0; i < labels.length; i++) {div.innerHTML += ' ' + labels[i] + '
';}return div; }; legend.addTo(map);