javascript - 悬停在WMS层上时的Leafletjs光标

我正在使用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层时，光标永远不会改变。我的问题是将鼠标悬停在图层上时如何使光标改变？

有没有人以前实现过此功能，或者有实现的想法？到目前为止，我偶然发现的唯一研究是在地图上使用mouseover并调用getFeatureInfo来判断其是否在图层上。但是，这似乎会引起很多震颤，仅是识别光标区域。

编辑：为澄清起见，我只希望将光标悬停在填充的wms层上时进行更改。尽管从技术上讲，它已应用于整个地图，但其中只有一部分内容。哪种问题引发了以下问题：“我可以将wms层限制为仅内容区域，然后显示光标吗？”可能是边界区域或沿这些边界的东西？

编辑2：下面是它的外观示例。街道地图零件我想保持正常的光标，但是将鼠标悬停在彩色wms地图零件上时需要一个指针。

最佳答案

在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。

在问题编辑和评论后编辑：

不幸的是，这是不可能的。至少据我所知。因为L.TileLayer.WMS是一层图像，所以绝对没有办法推断出哪些瓷砖上有features以及哪些瓷砖是透明的。

作为解决方法，您可以做的是确定对象的边界，使用该对象创建不带笔触的透明多边形并将其放在WMS图层上。多边形是交互式的，因此您可以包括光标更改，此外，作为额外的奖励，您还可以做其他花哨的东西，例如显示轮廓或将鼠标悬停在上面。我已经根据您在注释中提供的WMS示例创建了一个小演示。

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

请注意，我使用的是带有一个要素而不是多边形的GeoJSON图层，因为更容易找到GeoJSON格式的美国轮廓。但是，在您的情况下，四点多边形可以解决问题。

希望能有所帮助，让我知道是否不清楚。

关于javascript - 悬停在WMS层上时的Leafletjs光标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28679697/