Question

对于我的地图项目（使用Openstreetmap），我想显示大约70条远足路线。到目前为止，我所做的只是阅读，复制和粘贴。我在某处找到了以下脚本。我不确定其有效性。我已根据需要对其进行了调整。我要实现的是，每条路线都有不同的颜色，并且宽度更大。我认为标准是蓝色，宽度为4或5。

由于我是js和编程的新手，因此我尚未完全了解该脚本。任何人都可以提供给我的帮助/建议将不胜感激；非常感谢！。

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

带有传单和geojson线串的远足地图。如何更改路线的颜色和智慧？

0 个答案: