如何将标记添加到具有不同图像和描述的传单地图中？

问题描述 投票：0回答：1

我有一个GeoJSON文件，其点（经度和纬度）是分水岭中的测距站，我想将它们分别添加到地图中，以便向每个测站显示流量图。

我已经尝试添加点，标记，弹出窗口和geoJSON文件，但地图上的任何地方都没有显示任何内容。我已经在地图上有了平铺层和分水岭多边形。这是我的GeoJSON的功能之一：

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
        }
      },
leaflet markers
1个回答
0
投票

您是否已检查此tutorial？

[将您geojson添加到地图，然后使用onEachFeature函数将geojson元数据添加到标记中，或使用它们来绘制您提到的图表。

示例：

  <!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/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/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
  }).addTo(map)

</script>



  </body>

</html>

如果要渲染不同的标记图标，则应执行以下操作。创建一个函数，您将根据条件动态传递要渲染的图标。 fi检查ID

<!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/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <script src="https://unpkg.com/[email protected]/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 => greenIcon = 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]
    });


    const onEachFeature = (feature, layer) => {


    }

    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,
      onEachFeature
    })
  </script>



</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.