关于 javascript：如何将标记添加到具有不同图像和描述的Leaflet地图？


How do you add markers to a Leaflet map with different images and descriptions?

我有一个带有点(纬度和经度)的 GeoJSON 文件，这些点是流域中的测量站，我想将它们单独添加到地图中，以便向每个站显示排放图。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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
        }
      },

你看过这个教程吗？

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

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
  <!DOCTYPE html>
<html>

  <head>

GeoJSON tutorial - Leaflet

<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="">


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

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

</style>


  </head>

  <body>



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


  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; OpenStreetMap contributors, ' +
      'CC-BY-SA, ' +
      'Imagery ? Mapbox',
    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 = `
    Basin: ${Basin}
   
    Name: ${Name}
   
    Square Miles: ${Sq_Miles}
    `

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

    layer.bindPopup(popupContent);
  }


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





  </body>

</html>

如果您想呈现不同的标记图标，您应该执行以下操作。使用 pointToLayer 函数而不是 onEachFeature 函数，您将根据条件动态传递要呈现的图标。 fi 检查 ID。类似于这个问题的答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
   <!DOCTYPE html>
<html>

  <head>

GeoJSON tutorial - Leaflet

<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="">


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

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

</style>


  </head>

  <body>



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


  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; OpenStreetMap contributors, ' +
      'CC-BY-SA, ' +
      'Imagery ? Mapbox',
    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 = `
     Basin : ${Basin}
         
         
           Name : ${Name}
         
         
           Square Miles : ${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
  })





  </body>

</html>