首页 > 代码库 > Leaflet示例代码留档

Leaflet示例代码留档

Leaflet 示例代码

功能点

  1. 加载本地png瓦片
  2. 加载GeoJson
  3. 点要素自动聚类
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Leaflet debug page</title>
  5. <link rel="stylesheet" href="../dist/leaflet.css" />
  6. <script src="../dist/leaflet.js"></script>
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <link rel="stylesheet" href="screen.css" />
  9. <link rel="stylesheet" href="../dist/MarkerCluster.css" />
  10. <link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
  11. <script src="../dist/leaflet.markercluster-src.js"></script>
  12. <script type="text/javascript" src="geojson-sample.js"></script>
  13. </head>
  14. <body>
  15. <div id="map"></div>
  16. <span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those bounds</span>
  17. <script type="text/javascript">
  18. var geoJsonData = {
  19. "type": "FeatureCollection",
  20. "features": [
  21. { "type": "Feature", "id":"1", "properties": { "address": "2" }, "geometry": { "type": "Point", "coordinates": [113.2209316333,31.2210922667 ] } },
  22. { "type": "Feature", "id":"2", "properties": { "address": "151" }, "geometry": { "type": "Point", "coordinates": [114.2238417833,31.20975435 ] } },
  23. { "type": "Feature", "id":"3", "properties": { "address": "21" }, "geometry": { "type": "Point", "coordinates": [112.2169955667,31.218193 ] } },
  24. { "type": "Feature", "id":"4", "properties": { "address": "14" }, "geometry": { "type": "Point", "coordinates": [112.2240856667,31.2216963 ] } },
  25. { "type": "Feature", "id":"5", "properties": { "address": "38B" }, "geometry": { "type": "Point", "coordinates": [113.2196982333,31.2188702167 ] } },
  26. { "type": "Feature", "id":"6", "properties": { "address": "38" }, "geometry": { "type": "Point", "coordinates": [113.2209942 ,31.2192782833 ] } }
  27. ]
  28. };
  29. <!-- var mymap = L.map(‘map‘).setView([31, 113], 10); -->
  30. var tiles = L.tileLayer(‘http://localhost/roadmap/{z}/{x}/{y}.png‘, {
  31. maxZoom: 15,
  32. attribution: ‘&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors‘
  33. }),latlng = L.latLng(31, 113);
  34. var map = L.map(‘map‘, {center: latlng, zoom: 10, layers: [tiles]});
  35. var geojson = L.geoJson(geoJsonData, {
  36. style: function (feature) {
  37. return {color: feature.properties.color};
  38. },
  39. onEachFeature: function (feature, layer) {
  40. var popupText = ‘geometry type: ‘ + feature.geometry.type;
  41. if (feature.properties.address) {
  42. popupText += ‘<br/>address: ‘ + feature.properties.address;
  43. }
  44. layer.bindPopup(popupText);
  45. }
  46. });
  47. geojson.addLayer(new L.Marker(new L.LatLng(31.745530718801952, 113.194091796875)));
  48. var eye1 = new L.Marker(new L.LatLng(30.7250783020332547, 111.8212890625));
  49. var eye2 = new L.Marker(new L.LatLng(30.7360637370492077, 113.2275390625));
  50. var nose = new L.Marker(new L.LatLng(31.3292264529974207, 112.5463867187));
  51. var mouth = new L.Polygon([
  52. new L.LatLng(30.3841426927920029, 111.7333984375),
  53. new L.LatLng(30.6037944300589726, 111.964111328125),
  54. new L.LatLng(31.6806671337507222, 112.249755859375),
  55. new L.LatLng(31.7355743631421197, 112.67822265625),
  56. new L.LatLng(31.5928123762763, 113.0078125),
  57. new L.LatLng(30.3292264529974207, 113.3154296875)
  58. ]);
  59. var markers = L.markerClusterGroup();
  60. markers.addLayer(geojson).addLayers([eye1,eye2,nose,mouth]);
  61. map.addLayer(markers);
  62. </script>
  63. </body>
  64. </html>


null


附件列表

     

    Leaflet示例代码留档