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图层限制为仅限内容区域，然后显示光标吗？”＃39;可能是一个边界区域或类似的东西？

编辑2：下面是它的外观示例。街道地图部分我想保持正常的光标，但我想要一个指针悬停在彩色的wms地图部分。 Example

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。

在问题编辑和评论后进行修改：

不幸的是，这是不可能的。至少不是我所知道的。由于L.TileLayer.WMS是一个图像层，因此绝对无法扣除哪些图块上有features哪些图块是透明的。

您可以做的解决方法是找出对象的边界，使用它来创建没有笔划的透明多边形并将其放在WMS图层上。多边形是交互式的，因此你可以获得包含的光标变换，另外作为额外的奖励，你可以做其他花哨的东西，比如在鼠标悬停时显示轮廓或类似的东西。我已经在您在评论中提供的WMS示例中创建了一个小演示。

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

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

希望有所帮助，如果有什么事情不清楚，请告诉我。

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

1 个答案: