使用滑块更改 Polylie bu 的权重值

Question

我有一张地图，上面有旅行路线，根据交通类型分为不同颜色。 这些线的权重为 2，我将它们增加到 4。但我想通过滑块 (rangeCtrl) 使它们对用户来说更加灵活。 我尝试了以下一些不同的变体：

<script>
var linekleur = '<?php printf($KC) ?>';
if (linekleur == "T") {
var polyline_options = {
    weight: 4,
    opacity: 1,
    dashArray: '2, 8',
    lineCap: 'square',  
    color: '<?php printf($$KlCo) ?>'
};  
}else{
var polyline_options = {
    weight: 4,
    opacity: 1,
    color: '<?php printf($$KlCo) ?>'
};
};
var latlngs = [<?php printf($xyz_range1) ?>];
var polyline = L.polyline(latlngs, polyline_options).bindLabel('<?php printf($LineInfo) ?>').addTo(daggroep_<?php printf($Reisdag) ?>);
function SetupPolylineOptions(value) {
    polyline.setStyle(weight);
    };
</script>

我正在使用此命令向函数发送一个值。:

<input id='rangeCtrl' type='range' min='1' max='10' step='1' value='8' title='weight' width='20px' onchange='SetupPolylineOptions(value)' />

另请参阅：地图示例在图层菜单中查看右侧

Answer 1

我希望下面的代码有帮助。我就不解释了，因为代码很简单。

let config = {
  minZoom: 7,
  maxZoom: 18,
};
const zoom = 18;
const lat = 52.22977;
const lng = 21.01178;

const map = L.map("map", config).setView([lat, lng], zoom);

L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

const latlngs = [
  [38.91, -77.07],
  [37.77, -79.43],
  [39.04, -85.2],
];

const polyline = L.polyline(latlngs, { color: "red", weight: 1 });

polyline.addTo(map);

map.fitBounds(polyline.getBounds());

const rangeCtrl = document.querySelector("#rangeCtrl");

rangeCtrl.addEventListener("change", (e) => {
  polyline.setStyle({ weight: e.target.value });
});

*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

#rangeCtrl {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 999999;
}

<link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
    />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    
<input
      id="rangeCtrl"
      type="range"
      min="1"
      max="10"
      step="1"
      value="8"
      title="weight"
      width="20px"
    />
    <div id="map"></div>