Question

在Javascript / CoffeeScript中，使用 Leaflet 显示地图，我想从两个自定义图像中获取自定义标记，并且还为该图钉添加阴影：

我想要一个带有颜色（或形状）的“背景”图像来识别类别
最重要的是，我希望在此图像中包含每个图钉的特定图像（徽标）

我没有发现我怎么能这样做...设置一个图像很容易，但我不知道如何覆盖它们。

我还可以考虑使用工具叠加/分组/覆盖这些图像（本地？），以便只向Icon传单类发送一个，但也在那里，我不知道哪个工具使用。

尽管如此，我仍然认为双重覆盖会更有效率，而且我的情况可能对几个人有用。

Answer 1

Icon类有一个shadowUrl属性，可用于设置背景图像。

Answer 2

好吧，我终于可以自己解决了。以下是代码，抱歉是CoffeeScript，但您可以使用this将其翻译为JavaScript。

我做的第一件事就是创建一个新类来扩展DivIcon，重新激活DivIcon的阴影属性，默认情况下会停用它们：

class DivIconWithShadow extends L.DivIcon

  createShadow: (oldIcon) ->
    return L.Icon::createShadow.call this, oldIcon

然后在代码中，我使用以下内容创建带有图标的标记：

L.marker(latLng,
      icon: new DivIconWithShadow _.extend iconOptions,
          className: 'my-class',
          html: """
                <div class='icon_pin'>
                   <div class='logo' style='background-image: url(\"#{myVariablePath}\")'> </div>
                   <div class='top_pin'> </div>
                </div>
                """
    ).addTo(@map)

然后你可以在CSS中设置类似这样的东西

.icon_pin {
  .top_pin {

    position: absolute;
    .at2x('../images/pingreen_open.png', 43px, 58px);
    background-repeat: no-repeat;
    width: 43px;
    height: 58px;

  }

  .logo {
    position: absolute;
    width: 29px;
    height: 29px;
    margin-left: 7px;
    margin-top: 7px;
    background-size: 29px 29px;
    background-position: center center;
    background-color: white;

  }

}

从Leaflet中的两个图像生成自定义标记（图标）

2 个答案: