Javascript 带传单和geojson线串的徒步旅行地图。如何更改路线的颜色和方向？
对于我的地图项目（使用Openstreetmap），我想展示大约70条徒步路线。到目前为止，我所做的只是阅读、复制和粘贴。我在某处找到了下面的脚本。我不确定它的有效性。我已经根据自己的需要对它进行了调整。我想要实现的是，每条路线都有不同的颜色，并且更宽一点。标准是蓝色的，我想宽度是4或5 我还没有完全理解这个脚本，因为我是js和编程新手。如果有人能给我任何帮助/建议，我将不胜感激；非常感谢Javascript 带传单和geojson线串的徒步旅行地图。如何更改路线的颜色和方向？,javascript,jquery,leaflet,Javascript,Jquery,Leaflet,对于我的地图项目（使用Openstreetmap），我想展示大约70条徒步路线。到目前为止，我所做的只是阅读、复制和粘贴。我在某处找到了下面的脚本。我不确定它的有效性。我已经根据自己的需要对它进行了调整。我想要实现的是，每条路线都有不同的颜色，并且更宽一点。标准是蓝色的，我想宽度是4或5 我还没有完全理解这个脚本，因为我是js和编程新手。如果有人能给我任何帮助/建议，我将不胜感激；非常感谢 <html> <head> <title>Example
<html>
<head>
<title>Example Route Map</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
#map{ height: 90% }
#info {
margin:10px;
}
</style>
</head>
<body onload="init()">
Select a route
<div id="info"></div>
<select name="Layerchoice" id="select1" onchange="dropdown_onchange(this)">
<option value="dummy" disabled selected>Select a route</option>
<option value="route1">Blue Cross</option>
<option value="route2">Yellow Cross</option>
<option value="route3">Green Cross</option>
</select>
<div id="map"></div>
<script>
var map, layerControl;
var dropdownlayers = {};
dropdownlayers["route1"] =
{
name: "Blue Cross",
layer: L.geoJson(),
url: "tracks/bluecross_157611.geojson"
}
;
dropdownlayers["route2"] =
{
name: "Yellow Cross",
layer: L.geoJson(),
url: "tracks/yellowcross_133389.geojson"
}
;
dropdownlayers["route3"] =
{
name: "Green Cross",
layer: L.geoJson(),
url: "tracks/greencross_181243.geojson"
}
;
function init() {
map = L.map('map').setView([49.25, 7.70], 10);
var osmUrl = 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
attribution: osmAttrib
}).addTo(map);
var baseLayers = {
"OpenStreetMap": osm
};
var overlays = {
};
layerControl= L.control.layers(baseLayers, overlays,{collapsed:false}).addTo(map);
} // end init
function clean_map() {
map.eachLayer(function (layer) {
if (layer instanceof L.GeoJSON)
//Do marker specific actions here
{
layerControl.removeLayer(layer);
map.removeLayer(layer);
}
console.log(layer);
});
}
function load_layer(dropdownchoice) {
clean_map();
$.ajax({
dataType: "json",
url: dropdownchoice.url,
success: function (data) {
var layer = dropdownchoice.layer;
layer.clearLayers();
layer.addTo(map);
$(data.features).each(function (key, data) {
layer.addData(data);
});
layerControl.addOverlay(layer, dropdownchoice.name);
map.fitBounds(layer.getBounds());
}
}).error(function () {});
}
function dropdown_onchange(choice) {
console.log(choice.value);
load_layer(dropdownlayers[choice.value]);
}
</script>
</body>
</html>
示例路线图
#地图{高度：90%}
#信息{
利润率：10px；
}
选择路线
选择路线
蓝十字
黄十字
绿十字
var图，分层控制；
var dropdownlayers={}；
下拉层[“路由1”]=
{
名称：“蓝十字”，
层：L.geoJson（），
url:“tracks/bluecross_157611.geojson”
}
;
下拉层[“路由2”]=
{
名称：“黄十字”，
层：L.geoJson（），
url:“tracks/yellowcross_133389.geojson”
}
;
下拉层[“路由3”]=
{
名称:"绿十字",，
层：L.geoJson（），
url:“tracks/greencross_181243.geojson”
}
;
函数init（）{
map=L.map（'map'）.setView（[49.25,7.70]，10）；
var osmUrl='http://{s}.tiles.wmflabs.org/bw mapnik/{z}/{x}/{y}.png'；
var osmAttrib=‘地图数据©贡献者’；
var osm=新的L.Tillelayer（osmUrl{
署名：奥斯马特里布
}).addTo（地图）；
var baseLayers={
“OpenStreetMap”：osm
};
变量覆盖={
};
layerControl=L.control.layers（基本层，覆盖层，{collazed:false}）.addTo（映射）；
}//结束初始化
函数clean_map（）{
map.eachLayer（函数（层）{
if（L.GeoJSON的层实例）
//在此处执行特定的操作
{
图层控制。移除图层（图层）；
map.removeLayer（层）；
}
控制台日志（层）；
});
}
功能加载层（下拉选择）{
clean_map（）；
$.ajax({
数据类型：“json”，
url:dropdownchoice.url，
成功：功能（数据）{
var layer=dropdownchoice.layer；
layer.clearLayers（）；
图层。添加到（地图）；
$（data.features）。每个（函数（键、数据）{
图层.添加数据（数据）；
});
layerControl.addOverlay（layer，dropdownchoice.name）；
map.fitBounds（layer.getBounds（））；
}
}).error（函数（）{}）；
}
功能下拉菜单更改（选项）{
console.log（choice.value）；
加载层（下拉层[choice.value]）；
}