宣传单更改标记颜色

Question

有没有办法随机更改原生Leaflet中的标记颜色？我正在使用可以设计风格的svg元素.我知道mapbox.js是可行的

编辑:澄清我打算做什么:如果您通过双击或其他东西添加标记,它应该有随机颜色.为了实现这一点,我想使用标记的svg图标来设置它们的样式.

这是我的代码:

myIcon = L.icon({
  iconUrl: "icon_33997.svg",
  iconAnchor: pinAnchor
});

newMarker = L.marker(lat, long], {
  icon: myIcon
});

Answer 1

所以这是谷歌在设计Leaflet Icon时的最佳热门之一,但它没有一个没有第三方的解决方案,我在React中遇到了这个问题,因为我们需要动态颜色来处理我们的路线和图标.

我想出的解决方案是使用Leaflet.DivIcon html属性,它允许您传递一个被评估为DOM元素的字符串.

例如,我创建了一个标记样式如下:

const myCustomColour = '#583470'

const markerHtmlStyles = `
  background-color: ${myCustomColour};
  width: 3rem;
  height: 3rem;
  display: block;
  left: -1.5rem;
  top: -1.5rem;
  position: relative;
  border-radius: 3rem 3rem 0;
  transform: rotate(45deg);
  border: 1px solid #FFFFFF`

const icon = Leaflet.divIcon({
  className: "my-custom-pin",
  iconAnchor: [0, 24],
  labelAnchor: [-6, 0],
  popupAnchor: [0, -36],
  html: `<span style="${markerHtmlStyles}" />`
})

更改background-color在markerHtmlStyles您自定义颜色,你是好去.

Answer 2

绑定此站点的图标!

https://github.com/pointhi/leaflet-color-markers

网站上包含详细的操作方法信息.

Answer 3

更改 Leaflet 标记颜色的一种廉价方法是使用 CSSfilter属性。给图标一个额外的类，然后在样式表中更改它的颜色：

<style>
img.huechange { filter: hue-rotate(120deg); }
</style>
<script>
var marker = L.marker([y, x]).addTo(map);
marker._icon.classList.add("huechange");
</script>

这将产生一个红色标记：改变给定的值hue-rotate来改变颜色。

Answer 4

与其他对象(如折线等)不同,传单标记存储为文件

如果您需要自己的标记,可以找到解释如何操作的官方Leaflet教程.

编辑:

在与主要开发人员阅读此对话后,我搜索了标记SVG,现在是.

有了这个,您应该能够以您想要的方式为标记着色并随机设置其颜色.

再次编辑:

您可以使用MakiMarkers设置标记的颜色,并使用此扩展来制作一些随机的东西.(这很简单,很好解释)

Answer 5

由于您正在使用svg元素,您可以使用L.divIcon的html属性来提供传单标记的图标,而不是使用来自L.icon的iconUrl来链接您的图像.

L.marker(latlng, {
    icon: L.divIcon({
        className: 'ship-div-icon',
        html: '<svg>...</svg>'
    })
}).addTo(map);

然后使用CSS 填充属性为svg形状着色.将类\ es添加到svg的路径以进行精确控制可能很有用

<svg ... >
    <g>
        <path class="ship-icon" ... />
    </g>
    ...
</svg>

最后,因为我还需要随机更改标记颜色,我在创建标记时直接更改了路径的填充属性

var pathFillColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

L.marker(latlng, {
    icon: L.divIcon({
        className: 'ship-div-icon',
        html: '<svg ... ><g><path fill="'+pathFillColor+'" ... /> </g></svg>'
    })
}).addTo(map);

Answer 6

尝试Leaflet.awesome-markers lib - 它允许您设置颜色和其他样式.

Answer 7

啊,一个事件监听器,并通过setIcon()方法更改图标:

createdMarker.on("dblclick", function(evt) {

        var myIcon = L.icon({
            iconUrl: 'res/marker-icon-red.png',
            shadowUrl: 'res/marker-shadow.png'
        });
        this.setIcon(myIcon);
});

Answer 8

您还可以使用 Google Charts API 来获取图标（只需将 'abcdef' 更改为您想要的十六进制颜色：

例子：

• 颜色'#abcdef'：
  • 网址：http : //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|abcdef&chf=a,s,ee00FFFF
  • 输出：
• 颜色“#e85141”：
  • 网址：http : //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|e85141&chf=a,s,ee00FFFF
  • 输出：
• 颜色“#2ecc71”：
  • 网址：http : //chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|2ecc71&chf=a,s,ee00FFFF
  • 输出：

Answer 9

我发现SVG 标记/图标是迄今为止最好的之一。它非常灵活，可以使用任何您喜欢的颜色。您可以轻松自定义整个图标：

function createIcon(markerColor) {
  /* ...Code ommitted ... */

  return new L.DivIcon.SVGIcon({
            color: markerColor,
            iconSize: [15,30],
            circleRatio: 0.35
  });
}

Answer 10

这是图标的SVG。

<svg width="28" height="41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="b">
   <stop stop-color="#2e6c97" offset="0"/>
   <stop stop-color="#3883b7" offset="1"/>
  </linearGradient>
  <linearGradient id="a">
   <stop stop-color="#126fc6" offset="0"/>
   <stop stop-color="#4c9cd1" offset="1"/>
  </linearGradient>
  <linearGradient y2="-0.004651" x2="0.498125" y1="0.971494" x1="0.498125" id="c" xlink:href="#a"/>
  <linearGradient y2="-0.004651" x2="0.415917" y1="0.490437" x1="0.415917" id="d" xlink:href="#b"/>
 </defs>
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" fill="#fff" width="12.625" height="14.5" x="411.279" y="508.575"/>
  <path stroke="url(#d)" id="svg_2" stroke-linecap="round" stroke-width="1.1" fill="url(#c)" d="m14.095833,1.55c-6.846875,0 -12.545833,5.691 -12.545833,11.866c0,2.778 1.629167,6.308 2.80625,8.746l9.69375,17.872l9.647916,-17.872c1.177083,-2.438 2.852083,-5.791 2.852083,-8.746c0,-6.175 -5.607291,-11.866 -12.454166,-11.866zm0,7.155c2.691667,0.017 4.873958,2.122 4.873958,4.71s-2.182292,4.663 -4.873958,4.679c-2.691667,-0.017 -4.873958,-2.09 -4.873958,-4.679c0,-2.588 2.182292,-4.693 4.873958,-4.71z"/>
  <path id="svg_3" fill="none" stroke-opacity="0.122" stroke-linecap="round" stroke-width="1.1" stroke="#fff" d="m347.488007,453.719c-5.944,0 -10.938,5.219 -10.938,10.75c0,2.359 1.443,5.832 2.563,8.25l0.031,0.031l8.313,15.969l8.25,-15.969l0.031,-0.031c1.135,-2.448 2.625,-5.706 2.625,-8.25c0,-5.538 -4.931,-10.75 -10.875,-10.75zm0,4.969c3.168,0.021 5.781,2.601 5.781,5.781c0,3.18 -2.613,5.761 -5.781,5.781c-3.168,-0.02 -5.75,-2.61 -5.75,-5.781c0,-3.172 2.582,-5.761 5.75,-5.781z"/>
 </g>
</svg>