Question

我正在研究＆＃34;科罗拉多越野小道＆＃34;网页地图的乐趣，我陷入了一个问题。我对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获取Leaflet默认图标的彩色版本。您可以使用这些图像为各种难度等级定义L.Icon个对象：

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]
});

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

要根据评级更改每个开销的标记，您需要在setIcon函数中使用onEachFeature方法，并根据评级创建一个返回不同图标的函数：

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;
}

以下是对这些更改的更新提示：

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

基于geojson数据的小叶标记

1 个答案: