2017-08-14 55 views
2

我还想强调包含在我的地图风格时,悬停层的特定功能上悬停切换高亮特定功能..这样的事情:Mapbox GL - 使用地图样式

map.on('mousemove', function(e) { 
    var states = map.queryRenderedFeatures(e.point, { 
    layers: ['n_Region6 Municipals'] 
    }); 
    if (states.length > 0) {  
     map.setPaintProperty('n_Region6 Municipals', 'fill-color',' 
     {"property":"NAME_2","type":"category","stops": + 
     [[states[0].properties.NAME_2 +,"blue"]]}');  
     }); 

与setpaintproperty与数据驱动功能配对我没有运气.. 我试着用这个过滤器。

 map.addLayer({ 
      "id": "state-fills", 
      "type": "fill", 
      "source": { 
      "type": "vector", 
      "url": "mapbox://noeltech.c8nzzthb" 
      }, 
      "source-layer":"R6_Pop_byMunicipal-5cqj12", 
      "layout": {}, 
      "paint": { 
         "fill-color": "#627BC1", 
         "fill-opacity": 0 
     } 
    }); 
    map.addLayer({ 
    "id": "state-fills-hover", 
    "type": "line", 
    "source": { 
     "type": "vector", 
     "url": "mapbox://noeltech.c8nzzthb" 
    }, 
    "source-layer":"R6_Pop_byMunicipal-5cqj12", 
    "layout": {}, 
    "paint": { 
     "line-color": "#627BC1", 
     "line-width": 3 
    }, 
    "filter": ["==", "NAME_2", ""] 
    }); 
// map.setLayoutProperty('n_Region6 Municipals', 'visibility', 'none'); 

}); 
map.on("mousemove", "state-fills", function(e) { 
    map.setFilter("state-fills-hover", ["==", "NAME_2", 
    e.features[0].properties.NAME_2]); 

它做什么,我想这样做,但它使我添加其他层,我不希望出现这种情况。我想在我的地图样式中使用该图层,就像第一个代码一样。 如何在简单的代码中做到这一点?

回答

2

您需要使用"type":"categorical"

和语法将

map.setPaintProperty('n_Region6 Municipals', 'fill-color',{ 
    "property":"NAME_2", 
    "type":"categorical", 
    "stops":[ 
    [states[0].properties.NAME_2,"blue"], 
    ], 
    "default": "red" 
}); 
+0

这可以工作..didn't尝试它,因为我得到它与传递一个对象携带填充颜色参数 – noeltech

0

我得到了它,此代码的工作:

var highlight = { 
      property: 'NAME_2', 
      type: "categorical", 
      stops: [[MunicipalName, 'blue']] 
     }; 
    map.setPaintProperty('n_Region6 Municipals', 'fill-color', highlight); 

现在的问题是我没有考虑到它会将多边形的其余部分着色为黑色。有没有简单的方法来突出显示单个功能,而无需添加更多图层? Highlights blue but change all the colors

+0

是的。你设置'默认'颜色是一种半透明的颜色,即'rgba(0,0,0,0)' – mollymerp

+0

但我想其余的保持不变,因为它们可能是数据驱动函数不是答案突出显示地图样式中的功能。 – noeltech

+1

您可以使用数据驱动样式 - 您必须将默认值设置为其余功能的当前值,但这不是最高性能的方法,因为它涉及在为图层中的每个单个要素重新计算要素属性缓冲区时你只需要改变一个功能。我会用'filter's来代替2层。 – mollymerp