使用 Leaflet.js 调暗/隐藏国家周围的其他地图 [英] Dim/Hide rest of map around country with leaflet.js

问题描述

是否可以在标准的 leaflet.js 地图上调暗或隐藏世界其他地区"，除了一个国家/地区?Mabye 用某种倒置多边形"与国家的轮廓重叠?任何代码示例或链接将不胜感激.

Is it possible to dim or hide the "rest of the world" except one country on a standard leaflet.js map? Mabye overlay out with some kind of "inverted polygon" with the contours of the country? Any code examples or links would be appreciated.

推荐答案

扩展@tmcw 的答案...

Expanding @tmcw's answer ...

秘诀是使用 http://leafletjs.com/reference.html#polygon

您还可以通过传递数组数组来创建带孔的多边形latlngs，第一个 latlngs 数组代表外部环，其余的代表里面的孔.

You can also create a polygon with holes by passing an array of arrays of latlngs, with the first latlngs array representing the exterior ring while the remaining represent the holes inside.

第一个多边形将是一个与地图本身一样大的矩形，洞将是您要突出显示的国家/地区.

The first polygon will be a rectangle as big as the map itself, the hole will be the country you want to highlight.

L.polygon( [outerBoundsLatLngs, latLngs] ); 

这是一个工作示例:http://jsfiddle.net/FranceImage/1yaqtx9u/

这篇关于使用 Leaflet.js 调暗/隐藏国家周围的其他地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！