Как добавить маркеры на карту Leaflet с различными изображениями и описаниями? - PullRequest
Новая
       51

Как добавить маркеры на карту Leaflet с различными изображениями и описаниями?

0 голосов
/ 21 апреля 2020

У меня есть файлы Geo JSON с точками (широта и долгота), которые являются точечными станциями в водоразделах, и я хочу добавить их по отдельности на карту, чтобы показать графики расхода для каждой из станций.

Я попытался добавить точки, маркеры, всплывающие окна и файлы geo JSON, и на карте ничего не отображается. У меня уже есть слой плитки и полигоны водораздела на карте. Это одна из особенностей моего Geo JSON: 

var geojsonFeature = {
    "type" : "FeatureCollection",
    "crs" : {
      "type" : "name",
      "properties" : {
        "name" : "EPSG:4326"
      }
    },
    "features" : [
      {
        "type" : "Feature",
        "id" : 0,
        "geometry" : {
          "type" : "Point",
          "coordinates" : [
            -81.886014416973211,
            35.365065314637675
          ]
        },
        "properties" : {
          "FID" : 0,
          "FID_1" : 1,
          "Basin" : "BRD",
          "Sq_Miles" : 1513.8948122300001,
          "Acres" : 968892.679825,
          "Name" : "Broad",
          "ORIG_FID" : 0
        }
      },

1 Ответ

2 голосов
/ 21 апреля 2020

Вы проверили этот учебник ?

Добавьте свой geojson на карту и затем используйте функцию onEachFeature, чтобы добавить метаданные гео json к своему маркеру или использовать их для сюжетные диаграммы, как вы упомянули.

Пример: 

  <!DOCTYPE html>
<html>

  <head>

<title>GeoJSON tutorial - Leaflet</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>


<style>
  html,
  body {
    height: 100%;
    margin: 0;
  }

  #map {
    width: 600px;
    height: 400px;
  }

</style>


  </head>

  <body>

<div id='map'></div>

<script src="sample-geojson.js" type="text/javascript"></script>

<script>
  var map = L.map('map').setView([39.74739, -105], 2);

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/light-v9',
    tileSize: 512,
    zoomOffset: -1
  }).addTo(map);





  var geojsonFeature = [{
    "type": "Feature",
    "properties": {
      "FID": 0,
      "FID_1": 1,
      "Basin": "BRD",
      "Sq_Miles": 1513.8948122300001,
      "Acres": 968892.679825,
      "Name": "Broad",
      "ORIG_FID": 0
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-81.886014416973211,
        35.365065314637675
      ]
    },
  }, {
    "type": "Feature",
    "properties": {
      "FID": 1,
      "FID_1": 2,
      "Basin": "Another basin",
      "Sq_Miles": 2313.8948122300001,
      "Acres": 2332892.679825,
      "Name": "another name",
      "ORIG_FID": 4
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-91.886014416973211,
        35.365065314637675
      ]
    }
  }];


  function onEachFeature(feature, layer) {
    const {
      Basin,
      Name,
      Sq_Miles
    } = feature.properties;
    let popupContent = `
    <b>Basin</b>: ${Basin}
    <br>
    <b>Name</b>: ${Name}
    <br>
    <b>Square Miles</b>: ${Sq_Miles}
    `

    if (feature.properties && feature.properties.popupContent) {
      popupContent += feature.properties.popupContent;
    }

    layer.bindPopup(popupContent);
  }


  L.geoJSON(geojsonFeature, {
    onEachFeature: onEachFeature
  }).addTo(map)

</script>



  </body>

</html>

Если вы хотите визуализировать различные значки маркеров, вы должны сделать следующее: Используйте функцию pointToLayer вместо onEachFeature, где вы будете динамически передавать значок, который вы хотите отобразить на основе условий. я проверяю идентификаторы. Аналогично ответу на этот вопрос 

   <!DOCTYPE html>
<html>

  <head>

<title>GeoJSON tutorial - Leaflet</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>


<style>
  html,
  body {
    height: 100%;
    margin: 0;
  }

  #map {
    width: 600px;
    height: 400px;
  }

</style>


  </head>

  <body>

<div id='map'></div>

<script src="sample-geojson.js" type="text/javascript"></script>

<script>
  var map = L.map('map').setView([39.74739, -105], 2);

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/light-v9',
    tileSize: 512,
    zoomOffset: -1
  }).addTo(map);





  var geojsonFeature = [{
    "type": "Feature",
    "properties": {
      "FID": 0,
      "FID_1": 1,
      "Basin": "BRD",
      "Sq_Miles": 1513.8948122300001,
      "Acres": 968892.679825,
      "Name": "Broad",
      "ORIG_FID": 0
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-81.886014416973211,
        35.365065314637675
      ]
    },
  }, {
    "type": "Feature",
    "properties": {
      "FID": 1,
      "FID_1": 2,
      "Basin": "Another basin",
      "Sq_Miles": 2313.8948122300001,
      "Acres": 2332892.679825,
      "Name": "another name",
      "ORIG_FID": 4
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-91.886014416973211,
        35.365065314637675
      ]
    }
  }];

  const marker = iconColor => new L.Icon({
    iconUrl: `https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${iconColor}.png`,
    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
  });

  var pointToLayer = function(feature, latlng) {
    const {
      Basin,
      Name,
      Sq_Miles,
      FID
    } = feature.properties;

    let popupContent = ` 
    <b> Basin </b>: ${Basin} 
          <br>
          
          <b> Name </b>: ${Name} 
          <br>
          
          <b> Square Miles </b>: ${Sq_Miles}
        `




    console.log(FID)



    // read the coordinates from your marker
    var lat = feature.geometry.coordinates[1];
    var lon = feature.geometry.coordinates[0];

    // create a new marker using the icon style
    return L.marker([lat, lon], {
      icon: marker(FID === 0 ? 'red' : FID === 1 ? 'green' : 'blue')
    }).bindPopup(popupContent).addTo(map)
  }


  var layerGroup = L.geoJSON(geojsonFeature, {
    pointToLayer
  })

</script>



  </body>

</html>
...