подсветка функций полилинии в mapbox-gl.js

Я пытаюсь использовать следующий код, чтобы выделить функции под указателем мыши.подсветка функций полилинии в mapbox-gl.js

Разница между данными геоизона и данными геойсона, используемыми в связанном примере, состоит в том, что пример состоит из полигонов, тогда как мой геойсон состоит из полилиний. Я попытался соответствующим образом изменить код, чтобы линии выделялись, но это не работает. Мой GeoJSON доступен здесь:

http://iskandarblue.github.io/mapbox/data/prototype2.geojson

Любые советы о том, что нужно изменить?

Пример: https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>HTML markers from geoJSON url</title> 
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script> 
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet'/> 
<style> 
    body { margin:0; padding:0; } 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
</style> 
</head> 
<body> 
<div id='map'></div> 

<script> 
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ'; 

var map = new mapboxgl.Map({ 
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v8', 
    center: [37.625224, 55.744537,], 
    zoom: 13 
}); 

    map.on('style.load', function() { 
     map.addSource("streets", { 
      "type": "geojson", 
      "data": "http://iskandarblue.github.io/mapbox/data/prototype2.geojson" 
     }); 

     map.addLayer({ 
      "id": "m_streets", 
      "type": "line", 
      "source": "streets", 
      "interactive": true, 
      "layout": {}, 
      "paint": { 
       "line-color": "#627BC1", 
       "line-width": 2.5 
      } 
     }); 

     map.addLayer({ 
      "id": "route-hover", 
      "type": "line", 
      "source": "streets", 
      "layout": {}, 
      "paint": { 
       "line-color": "#627BC1", 
       "line-width": 2.5 
      }, 
      "filter": ["==", "rd_name", ""] 
     }); 

     // When the user moves their mouse over the page, we look for features 
     // at the mouse position (e.point) and within the states layer (states-fill). 
     // If a feature is found, then we'll update the filter in the route-hover 
     // layer to only show that state, thus making a hover effect. 
     map.on("mousemove", function(e) { 
      map.featuresAt(e.point, { 
       radius: 5, 
       layer: ["m_streets"] 
      }, function (err, features) { 
       if (!err && features.length) { 
        map.setFilter("route-hover", ["==", "rd_name", features[0].properties.rd_name]); 
       } else { 
        map.setFilter("route-hover", ["==", "rd_name", ""]); 
       } 
      }); 
     }); 
    }); 



    //.addTo(map); 


</script> 
</body> 
</html>

источник

2016-03-14 the_darkside

route-hover слой просто должен быть стилизовано по-другому в порядке? Вот живой пример вашего кода выше с небольшой корректировкой: https://jsbin.com/loxoquwiye/

источник

2016-03-14 16:51:16 tristen

Спасибо! Есть ли способ сделать линии прозрачными, когда они не выделены? Я попытался установить непрозрачность линии до 0,7, но это не сработало. –

Можете ли вы продемонстрировать, как это не работает в примере кода? '' непрозрачность 'должна быть применена к свойствам краски. то есть '' непрозрачность строки ': 0,5' – tristen

подсветка функций полилинии в mapbox-gl.js

ответ

Смежные вопросы