Question

在StackOverflow社区的帮助下，我构建了一个带有blogdata和articledata标记的传单地图。 blogdata代表新闻编辑室的ID和地理位置，而articledata是新闻编写的文章中的位置。所以每个新闻编辑室都有几篇文章，我用折线连接了这些文章（见下图）。

我现在要做的是使该传单可以搜索，不是针对城市或国家，而是针对新闻室ID。而且我想管理模糊所有其他标记和线条并缩放到搜索过的博客和它的连接文章。

这是我到目前为止所得到的：

    function myFunction() {

  var map = L.map('map').setView([51.101516, 10.313446], 6);
  // improve experience on mobile
  if (map.tap) map.tap.disable();
  L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
    maxZoom: 16
}).addTo(map);
  map._layersMinZoom=5;  

var newsroomsById = {};

for(i=0; i<newsrooms.length; i++) {
    newsroomsById[newsrooms[i].ID] = newsrooms[i];
}

for(i=0; i<articles.length; i++) {
    // retrieve newsroom
    var newsroom = newsroomsById[articles[i].ID];
    // draw your polyline
    var latlngs = [
      [articles[i].lat, articles[i].long],
      [newsroom.lat, newsroom.long]
    ];

    var polyline = L.polyline(latlngs, {
      color: 'grey',
      weight: 2,
      opacity: 0.5,
      smoothFactor: 1,
    }).addTo(map);

    var room_marker = L.circleMarker([newsroom.lat, newsroom.long], {
          radius: 3,
          color: '#29D3A0',
          fillColor: '#29D3A0',
          fillOpacity: 1,
        }).addTo(map);

    room_marker.bindPopup("<strong style='color: #84b819'>Newsroom </strong>" + newsroom.ID + "<br>").openPopup();
    var popup = L.popup();

    var art_marker = L.circleMarker([articles[i].lat, articles[i].long], {
          radius: 2,
          color: '#000',
          fillColor: '#000',
          fillOpacity: 1,
        }).addTo(map);
}
}

这就是地图的样子（黑色是文章，绿色是新闻室/博客）

修改要使地图可搜索，请使用Leaflet插件L.Search.Control

Answer 1

很难回答问题的搜索部分。我认为你必须为此描述一个用例。

但是，一旦您拥有要突出显示的新闻编辑室的ID，就可以使用setOption

更改折线和circleMarkers的不透明度

但是，您的代码需要进行一些调整：您需要保留一系列标记并将新闻编辑室的ID保留在标记中。

另一件事：你不应该在文章循环中创建新闻室标记;它会创建与您的文章数量一样多的新闻编辑室标记。

这是一个命题（通过点击新闻室标记进行选择）：

var selectedNewsroom = 0;

var newsroomsById = {};


// create newsroom markers
var newsroomMarkers = [];

for(i=0; i<newsrooms.length; i++) {
    newsroomsById[newsrooms[i].ID] = newsrooms[i];

    var room_marker = L.circleMarker([newsrooms[i].lat, newsrooms[i].long], {
        radius: 20,
        color: '#000',
        opacity: .4,
        fillOpacity: .4,
      }).addTo(map);

   //room_marker.bindPopup("<strong style='color: #84b819'>Newsroom </strong>" + newsrooms[i].ID + "<br>");

    room_marker.ID = newsrooms[i].ID;  // associate marker with newsroom

    room_marker.on('click', function(e) {
        console.log('clicked on ' + e.target.ID);
        changeSelection(e.target.ID);
    });

    newsroomMarkers.push(room_marker);  // keep marker reference for later
}


// create article markers and connections to newsrooms
var articleMarkers = [];

for(i=0; i<articles.length; i++) {
    // retrieve newsroom
    var newsroom = newsroomsById[articles[i].ID];
    // draw your polyline
    var latlngs = [
      [articles[i].lat, articles[i].long],
      [newsroom.lat, newsroom.long]
    ];

    var polyline = L.polyline(latlngs, {
      color: '#000',
      weight: 1,
      opacity: .4,
      smoothFactor: 1,
    }).addTo(map);

    var art_marker = L.circleMarker([articles[i].lat, articles[i].long], {
          radius: 2,
          color: '#000',
          fillColor: '#000',
          opacity: .4,
          fillOpacity: .4,
        }).addTo(map);

    art_marker.connection = polyline; // associate polyline with marker
    art_marker.newsroomID = newsroom.ID; 

    articleMarkers.push(art_marker); // keep marker reference for later
}


// highlight or blur newsrooms base on which is selected
function changeSelection(newsroomID) {
    // deselect everything
    for(i=0; i<articleMarkers.length; i++) {
        articleMarkers[i].setStyle({ opacity: .4, fillOpacity: .4 });
        articleMarkers[i].connection.setStyle({ opacity: .4 }); 
    }
    for(i=0; i<newsroomMarkers.length; i++) {
        newsroomMarkers[i].setStyle({ opacity: .4, fillOpacity: .4 });  
    }

    if(selectedNewsroom == 0 || selectedNewsroom != newsroomID) {
        selectedNewsroom = newsroomID;

        for(i=0; i<articleMarkers.length; i++) {
            if(articleMarkers[i].newsroomID == newsroomID) {
                articleMarkers[i].setStyle({ opacity: 1, fillOpacity: 1 });
                articleMarkers[i].connection.setStyle({ opacity: 1 });
            }
        }
        for(i=0; i<newsroomMarkers.length; i++) {
            if(newsroomMarkers[i].ID == newsroomID) {
                newsroomMarkers[i].setStyle({ opacity: 1, fillOpacity: 1 });                    
            }
        }           
    }
    else {
        selectedNewsroom = 0;
    }
}

工作example。

使Leafletmarkers可以搜索并模糊其他人

1 个答案: