問題描述

我想畫一張地圖，上面畫了幾條路線.

I want to draw a map with few routes drawn on it.

我想要一個帶有數(shù)字 1,..,n 的保管箱

I want to have a dropbox with numbers 1,..,n

當(dāng)下拉框中的一個項(xiàng)目被選中時，相應(yīng)的路線會在地圖上突出顯示.

when an item in the dropbox is chosen, the corresponding route is highlighted on the map.

我已經(jīng)開始使用傳單"了.

I have started using "leaflet".

如何突出顯示一行?我使用了重量"，但它更像是一條線的邊界.我想看到這條線越來越粗.

how do I highlight a line? I have used "weight" but it's more a border to a line. I would like to see the line is getting bolder.

這是我的代碼:

document.onload = loadMap();

function loadMap() {
  var map = L.map('map').setView([37.8, -96], 4);


  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a >OpenStreetMap</a> contributors,<a >CC-BY-SA</a>, Imagery ? <a ,
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZW======V6ZTdlb2V5cyJ9.3HqHQ4BMRvSPaYe8ToA7YQ'
  }).addTo(map);


  var marker = L.marker([51.5, -0.09]).addTo(map);


  var myLines = [{
    "type": "LineString",
    "properties": {
      "id": "1"
    }
    "coordinates": [
      [-100, 40],
      [-105, 45],
      [-110, 55]
    ]
  }, {
    "type": "LineString",
    "properties": {
      "id": "2"
    }
    "coordinates": [
      [-105, 40],
      [-110, 45],
      [-115, 55]
    ]
  }];

  var myLayer = L.geoJson().addTo(map);
  myLayer.addData(myLines);


  geojson = L.geoJson(myLines, {
    onEachFeature: onEachFeature
  }).addTo(map);

}



function highlightFeature(e) {
  var layer = e.target;

  layer

  layer.setStyle({
    weight: 25,
    color: '#ff3300',
    dashArray: '',
    fillOpacity: 0.7
  });

  if (!L.Browser.ie && !L.Browser.opera) {
    layer.bringToFront();
  }
}

function resetHighlight(e) {
  geojson.resetStyle(e.target);


  layer.setStyle({
    weight: 5,
    color: '#0000ff',
    dashArray: '',
    fillOpacity: 0.7
  });
}


function onEachFeature(feature, layer) {
  layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight,
    // click: zoomToFeature
  });
}

$('select[name="dropdown"]').change(function() {

  var item = $(this).val();
  alert("call the do something function on option " + item);
  //how to make the chosen line highlighted ??

});

推薦答案

weight 屬性不會改變線條邊框，它會改變筆畫寬度(以像素為單位).您會獲得 border 效果，因?yàn)槟砑恿藘纱尉€條.這里:

weight property is not changing line border, it changes stroke width in pixels. You get border effect because you are adding lines twice. Here:

myLayer.addData(myLines);

這里:

geojson = L.geoJson(myLines, {
    onEachFeature: onEachFeature
  }).addTo(map);

當(dāng)懸停多段線時，頂層的樣式會發(fā)生變化，但由于您添加了兩次多段線，因此仍然保留來自下層的多段線.正如 here 所述，默認(rèn)筆畫不透明度為 0.5(設(shè)置 <順便說一句，code>fillOpacity 對于折線來說是多余的，用于更改 stroke-opacity opacity 屬性).頂層的折線變成半透明的，這會產(chǎn)生邊框效果的錯覺.

When a polyline is hovered, top layer's style is changed, but because you are adding polylines twice, there still remains a polyline from the lower layer. As it is described here, default stroke opacity is 0.5 (setting fillOpacity is redundant for the polyline by the way, for changing stroke-opacity opacity property is used). Polyline from the top layer becomes semi-transparent, and that makes the illusion of the border effect.

因此，您只需刪除這一行 myLayer.addData(myLines); 并獲得預(yù)期的結(jié)果.

So, you can just remove this line myLayer.addData(myLines); and get the expected result.

我制作了一個 fiddle，您的示例已在其中得到糾正.

I've made a fiddle, where your example is corrected.

這篇關(guān)于如何在傳單地圖上突出顯示選定的行?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！