1

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

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

我不知道我该怎么做...设置一张图像很容易，但我不知道如何叠加它们。

我还可以考虑使用一种工具来叠加/分组/覆盖这些图像（本地？），以便只将一个发送到IconLeaflet Class，但在那里，我不知道要使用哪个工具。

尽管如此，我仍然认为双重叠加会更有效，而且我的案例可能对几个人有用。

4

2 回答 2

1

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

于 2013-06-11T07:19:34.793 回答
0

好吧，我终于可以自己解决了。这是代码，对不起，它是 CoffeeScript，但您可以使用将其转换为 JavaScriptthis将它翻译成 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;

  }

}
于 2013-06-27T16:18:19.727 回答