基于 geojson 数据的传单标记

Question

我正在制作一个 "Colorado Offroad Trails" 网络地图是为了好玩，但遇到了一个问题。我对 Leaflet 很陌生，但已经设法完成了我想完成的大部分工作。我的下一步是根据步道等级更改我的标记……基本上绿色表示容易，黄色表示中等，红色表示困难。我用地图创建了一个 JSFIDDLE。您可能必须转到 trailroute.js 或 trailhead.js 才能显示标记（托管在 http 站点上）

简而言之，我想根据 feature.properties.High_Ratin 属性更改标记颜色。

JSFIDDLE：https://jsfiddle.net/GratefulFisherman/Lftnr036/

代码：

// Mapbox Access Token
L.mapbox.accessToken = 'pk.eyJ1IjoibWF0dHJ1c3NvIiwiYSI6IjVlYzk3OTEzOTczZTEwYTMyNDRjZDA4NDY1MjYzNWNmIn0.0wkKxVGJyO8nEKjn2GcV3A';

// Create the map
var map = L.mapbox.map('map', null, {
minZoom: 7
}).setView([39.117, -105.353], 7);

// Setup basemaps for layer list
var baseMaps = {
Streets: L.mapbox.tileLayer('mapbox.streets'),
Outdoors: L.mapbox.tileLayer('mapbox.outdoors'),
Satellite: L.mapbox.tileLayer('mapbox.satellite'),
};

// Add Streets to the map
baseMaps.Streets.addTo(map);

// Trailhead popup
function onEachFeaturetrailhead(feature, layer) {
if (feature.properties && feature.properties.Trail) {
    layer.bindPopup("<h2>" + feature.properties.Trail + '<br></h2>' 
    + "<li>Low Rating | " + feature.properties.Low_Rating + '<br></li>' 
    + "<li>High Rating | " + feature.properties.High_Ratin + '<br></li>' 
    + "<li>Trail Damage | " + '<a href="' + feature.properties.Link + '">Link</a><br></li>' 
    + "<li>Latitude | " + feature.properties.Latitude + '<br></li>' 
    + "<li>Longitude | " + feature.properties.Longitude + '<br></li>' 
    + "<li>Close to | " + feature.properties.Location + '<br></li>' 
    + "<li>County | " + feature.properties.County + '<br></li>' 
    + "<li>Land Owner | " + feature.properties.Land_Owner + "</li>");
}
}

// Trail Tracks Popup
function onEachFeaturetrailtrack(feature, layer) {
if (feature.properties && feature.properties.Trail) {
    layer.bindPopup("<b>" + feature.properties.Trail + "</b>");
}
}

// Add the popup to the GeoJSON layer
var geoJsonLayer = L.geoJson(geoJSONtrailhead, {
onEachFeature: onEachFeaturetrailhead
});

// Create new Marker Clusters
var markers = new L.MarkerClusterGroup();

// Add Markers to map
markers.addLayer(geoJsonLayer);
map.addLayer(markers);

// Add Markers to Layer Control
var layerControl = {
"Trail Heads": markers
};

// Add the basemap toggle button with the basemaps in the list
L.control.layers(baseMaps, layerControl).addTo(map);

// GPS Track
var lineStyle = {
"color": "#F4A460",
"weight": 4,
"opactiy": 0
};

// Trail Route Popup
var tracks = L.geoJson(geoJSONtrailtrack, {
onEachFeature: onEachFeaturetrailtrack,
style: lineStyle
});

// Set Scale dependency to a layer
map.on('zoomend', function(e) {
if ( map.getZoom() <= 10 ){ map.removeLayer( tracks )}
else if ( map.getZoom() > 10 ){ map.addLayer( tracks ) }
 });

老实说，我一直在四处寻找解决方案，但找不到任何东西。就像我说的那样，我对此很陌生，所以我们将不胜感激。

Answer 1

您可以使用这些图像从 leaflet-color-markers. You can define L.Icon 对象中获取 Leaflet 默认图标的彩色版本，以获得各种难度等级：

var redIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
var yellowIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-yellow.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
var greenIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

（这只是从颜色标记站点复制示例代码，但您可能希望更改这些 URL 以指向这些标记的您自己的托管版本。）

要根据评级更改每个小道起点的标记，您需要在 onEachFeature 函数中使用 setIcon 方法并创建一个 returns 基于不同图标的函数评分：

function onEachFeaturetrailhead(feature, layer) {
  if (feature.properties && feature.properties.Trail) {
    layer.bindPopup("<h2>" + feature.properties.Trail + '<br></h2>' 
      + "<li>Low Rating | " + feature.properties.Low_Rating + '<br></li>' 
      + "<li>High Rating | " + feature.properties.High_Ratin + '<br></li>' 
      + "<li>Trail Damage | " + '<a href="' + feature.properties.Link + '">Link</a><br></li>' 
      + "<li>Latitude | " + feature.properties.Latitude + '<br></li>' 
      + "<li>Longitude | " + feature.properties.Longitude + '<br></li>' 
      + "<li>Close to | " + feature.properties.Location + '<br></li>' 
      + "<li>County | " + feature.properties.County + '<br></li>' 
      + "<li>Land Owner | " + feature.properties.Land_Owner + "</li>");
    layer.setIcon(getIcon(feature.properties.High_Ratin));
  }
}

//get icons based on difficulty rating
function getIcon(rating) {
  return rating > 6 ? redIcon :
         rating > 3 ? yellowIcon :
                      greenIcon;
}

这是更新后的 fiddle，其中包含以下更改：

http://jsfiddle.net/nathansnider/p585s265/

基于 geojson 数据的传单标记

leaflet markers based on geojson data

javascript

leaflet

mapbox