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

Leaflet示例代码留档

2024-09-27 04:28:39   218人阅读

Leaflet 示例代码

功能点

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


null


附件列表

     

    Leaflet示例代码留档


    联系
    我们