Leaflet 小叶改变标记颜色_Leaflet

Leaflet 小叶改变标记颜色

leaflet

Leaflet 小叶改变标记颜色,leaflet,Leaflet,有没有办法随机改变本地传单上的标记颜色？我正在使用svg元素，这些元素可以设置样式。我知道使用mapbox.js是可能的编辑：为了澄清我打算做什么：如果你通过双击或其他方式将标记添加到地图上，它应该有随机的颜色。为了实现这一点，我想使用svg图标作为标记来设置它们的样式这是我的代码： myIcon=L.icon({ iconUrl:“icon_33997.svg”， iconAnchor:pinAnchor }); newMarker=L.标记（横向，纵向）{ 图标：myIcon });

有没有办法随机改变本地传单上的标记颜色？我正在使用svg元素，这些元素可以设置样式。我知道使用mapbox.js是可能的

编辑：为了澄清我打算做什么：如果你通过双击或其他方式将标记添加到地图上，它应该有随机的颜色。为了实现这一点，我想使用svg图标作为标记来设置它们的样式

这是我的代码：

myIcon=L.icon({
iconUrl:“icon_33997.svg”，
iconAnchor:pinAnchor
});
newMarker=L.标记（横向，纵向）{
图标：myIcon
});

与其他对象（如多段线等）不同，传单标记存储为文件

如果你想要你自己的标记，你可以找到解释如何做

编辑：

在与主要开发人员一起阅读之后，我搜索了标记SVG和

有了它，你应该能够按照你想要的方式给标记上色，并随机设置它们的颜色

再次编辑：

您可以使用来设置标记的颜色，并使用此扩展来制作一些随机物品。（很简单，解释得很清楚）

1）添加标记 2）找到css的backgroundcolor属性并对其进行更改。这是：
JS

var myIcon = L.divIcon({
      className: 'my-div-icon',
      iconSize: [5, 5]
    });
var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
    marker.valueOf()._icon.style.backgroundColor = 'green'; //or any color

Ahh事件侦听器并通过setIcon（）方法更改图标：

尝试lib——它允许您设置颜色和其他样式。

绑定此站点的图标

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

编辑：使用下面的代码添加标记图标，只需将指向该图标的链接替换为您选择的颜色即可。（即，

marker-icon-2x-green.png

到其他图像）

var greenIcon=新的L.图标({
伊克努尔：'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
shadowUrl:'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize:[25,41]，
iconAnchor:[12,41]，
popupAnchor:[1，-34]，
阴影大小：[41,41]
});
标记（[51.5，-0.09]，{icon:greenIcon}）.addTo（map）；

您还可以使用谷歌图表API获取图标（只需将“abcdef”更改为您想要的十六进制颜色：

示例：

颜色“#abcdef”：
- 网址：
- 输出：
颜色“#e85141”：
- 网址：
- 输出：
颜色“#2ecc71”：
- 网址：
- 输出：

这是谷歌最热门的单张图标样式之一，但没有第三方的解决方案，我在React中遇到了这个问题，因为我们需要路线和图标的动态颜色

我提出的解决方案是使用attribute，它允许您将经过计算的字符串传递到DOM元素中

例如，我创建了一个标记样式，如下所示：

const mycustomcolor='#583470'
常数markerHtmlStyles=`
背景色：${myCustomColor}；
宽度：3rem；
高度：3雷姆；
显示：块；
左：-1.5雷姆；
顶部：-1.5雷姆；
位置：相对位置；
边界半径：3rem 3rem 0；
变换：旋转（45度）；
边框：1px实心#FFFFFF`
常量图标=传单.divIcon({
类名：“我的自定义pin”，
iconAnchor:[0,24]，
labelAnchor:[-6,0],，
popupAnchor:[0，-36]，
html:``
})

将

markerHtmlStyles

中的

背景色更改为您的自定义颜色，就可以开始了
在R中，使用addAwesomeMarkers（）函数。生成红色标记的示例代码：
leaflet() %>%
addTiles() %>%
addAwesomeMarkers(lng = -77.03654, lat = 38.8973, icon = awesomeIcons(icon = 'ion-ionic', library = 'ion', markerColor = 'red'))

离子图标链接：
由于您使用的是svg元素，因此可以使用的html
属性为传单标记的图标提供链接，而不是使用iconUrl from链接图像
L.marker(latlng, {
    icon: L.divIcon({
        className: 'ship-div-icon',
        html: '<svg>...</svg>'
    })
}).addTo(map);

L.标记器（板条{
图标：L.divIcon({
className:“ship div图标”，
html:“…”
})
}).addTo（地图）；

然后使用CSS属性为svg形状着色。将类添加到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);

var-pathFillColor='#'+（Math.random（）*0xFFFFFF我发现这是迄今为止最好的一个。它非常灵活，可以使用您喜欢的任何颜色。您可以自定义整个图标，而无需太多麻烦：
function createIcon(markerColor) {
  /* ...Code ommitted ... */

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

下面是图标的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>


第一层
编写一个函数，在给定颜色（或任何其他特征）的情况下，返回所需图标的SVG表示。然后，在创建标记时，使用适当的参数引用此函数。
添加到@tutts excellent answer，我将其修改为：
…包括一个标题-您可以在其中使用图标或类似图标
var mycustomcolor='#334455d0'，//d0->alpha值
lat=5.5，
lon=5.5；
变量标题=“”、//“”或“abc”或。。。
size=10，//标记的大小
边框=2；//边框厚度
var markerHtmlStyles=\
背景色：'+MyCustomColor+'\
宽度：'+（尺寸*3）+'px\
高度：'+（尺寸*3）+'px\
显示：块\
左：'+（大小*-1.5）+'px\
顶部：'+（尺寸*-1.5）+'px\
位置：相对位置\
边界半径：'+（大小*3）+'px'+（大小*3）+'px 0\
变换：旋转（45度）\
边框：'+border+'px实心#FFFFFF\
';
var captionStyles=\
变换：旋转（-45度）\
显示：块\
宽度：'+（尺寸*3）+'px\
文本对齐：居中\
线条高度：'+（尺寸*3）+'px\
';
var icon=L.divIcon({
类名：“颜色pin-”+MyCustomColor.replace（“#”，”），
//在另一个项目中需要：[0，大小*2+边框/2]
iconAnchor:[边框，大小*2+边框*2]，
labelAnchor:[-（大小/2），0]，
popupAnchor:[0，-（大小*3+边框）]，
html:“”+标题+“”
});
var标记=L。
<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>

import { ReactComponent as SatelliteIcon } from "../assets/icons/satellite.svg";

<SatelliteIcon className="svg-icon light-blue" />

<SatelliteIcon style={{ stroke: "black" }}/>

L.divIcon({
    className: 'div-icon',
    html: ReactDOMServer.renderToString(
        <SatelliteIcon className="svg-icon light-blue" />
    )
})

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