悬停在 WMS 图层上时的 Leafletjs 光标

Question

我正在使用Leafletjs。目前它非常直截了当，我可以从打开的地图上看到街景。

var streets = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    });

我还有一个来自地理服务器的 WMS 图层。它具有标准的 getFeatureInfo 并且一切都正确显示。

L.tileLayer.wms("GEOSERVERURL", {
            layers: 'layers',
            format: 'image/png'
            ,transparent: true
        }).addTo(map);

wms 层也是可点击的，我使用 getFeatureInfo 来获取该层的信息。问题是用户不知道它的可点击性，因为当他们悬停在 wms 层时光标永远不会改变。我的问题是鼠标悬停在图层上时如何改变光标？

之前有没有人实现过这个功能或者有实现它的想法？到目前为止，我偶然发现的唯一一项研究是在地图上使用鼠标悬停并调用 getFeatureInfo 来判断它是否在图层上。但是，这似乎只是为了识别光标区域会引起很多喋喋不休。

编辑：澄清一下，我希望光标仅在其悬停在已填充的 wms 图层上时才会更改。虽然它在技术上适用于整个地图，但它只有一部分内容。哪种会引发“我可以将 wms 层限制为仅内容区域然后显示光标吗？”的问题？也许是边界区域或类似的东西？

编辑 2：下面是它的外观示例。街道地图部分我想保留普通光标，但在将鼠标悬停在彩色 wms 地图部分上时我想要一个指针。

Answer 1

在tileLayer的容器上设置一个ID，然后用CSS改变光标：

Javascript：

var wms = L.tileLayer.wms("GEOSERVERURL", {
    layers: 'layers',
    format: 'image/png',
    transparent: true
}).addTo(map);

wms.getContainer().setAttribute('id', 'wmsContainer');

样式表：

#wmsContainer {
    cursor: grab; /* or any other cursor: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor */
}

注意：您需要在图层添加到地图后执行此操作。在将其添加到地图之前，getContainer 方法将返回 undefined。

在问题编辑和 cmets 之后编辑：

很遗憾，这是不可能的。至少据我所知不是。因为L.TileLayer.WMS是一层图片，所以绝对无法推断出哪些瓷砖上有features，哪些是透明的。

作为一种解决方法，您可以做的是计算对象的边界，使用它来创建一个没有描边的透明多边形并将其放在您的 WMS 图层上。多边形是交互式的，因此您可以包含光标更改，此外，您还可以做其他花哨的事情，例如在鼠标悬停时显示轮廓或类似的东西。我根据您在 cmets 中提供的 WMS 示例创建了一个小演示。

http://plnkr.co/edit/1HGn6IUzdrn1N5KGazXQ?p=preview

请注意，我使用的是具有一个特征而不是多边形的 GeoJSON 图层，因为以 GeoJSON 格式更容易找到美国的轮廓。但在你的情况下，一个四点多边形也可以做到这一点。

希望对您有所帮助，如果有不清楚的地方请告诉我。