宣传单更改标记颜色

时间：2014-05-09 14:31:04

标签： leaflet

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

编辑： 澄清我打算做什么：如果你通过双击或其他东西添加标记，它应该有随机颜色。为了达到这个目的，我想使用svg图标来标记它们。

这是我的代码：

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

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

17 个答案:

答案 0 :(得分：46)

所以这是谷歌在设计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更改为您的自定义颜色，您就可以了。

Map with multiple coloured Markers

答案 1 :(得分：23)

绑定此网站的图标！

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

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

答案 2 :(得分：21)

Leaflet Markers存储为文件，与其他对象（如Polylines等）不同，

如果您需要自己的标记，可以找到解释如何操作的The official Leaflet Tutorial。

编辑：

在与主要开发人员阅读this conversation后，我搜索了标记SVG和here it is。

有了这个，您应该能够以您想要的方式为标记着色并随机设置它们的颜色。

再次编辑：

您可以使用MakiMarkers设置标记的颜色，并使用此扩展程序制作一些随机内容。 （这很简单，很好解释）

答案 3 :(得分：12)

由于您使用的是svg元素，因此您可以使用L.divIcon的html属性提供传单标记图标，而不是使用L.icon中的iconUrl链接你的形象。

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

然后使用CSS fill属性为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);

答案 4 :(得分：9)

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

答案 5 :(得分：8)

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

<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赋予的值以更改颜色。

enter image description here

答案 6 :(得分：6)

啊，事件监听器并通过setIcon（）方法更改图标：

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

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

答案 7 :(得分：4)

您还可以使用Google Charts API获取图标（只需使用您想要的十六进制颜色更改＆＃39; abcdef＆＃39;

示例：

答案 8 :(得分：3)

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

答案 9 :(得分：2)

我发现the SVG marker/icon是最好的一个。它非常灵活，可以包含您喜欢的任何颜色。您可以毫不费力地自定义整个图标：

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

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

答案 10 :(得分：2)

添加地图的Html代码

<div id="map" style="height:480px; width:360px;"></div>

加载地图的css

.leaflet-div-icon
{
    background-image: url('http://cloudmade.com/images/layout/cm-logo.png');
}

改变标记颜色的逻辑


var map = L.map('map').setView([51.5, -0.09], 13);
        
L.marker([51.49, -0.09]).addTo(map)
    .bindPopup('Demo CSS3 popup. <br> Easily customizable.');
        
const myCustomColour = '#5f93ed'
        
const markerHtmlStyles = `
    background-color: ${myCustomColour};
    width: 15px;
    height: 15px;
    font-size:15px;
    text-align:center;
    display: block; 
`
        
function thing(ct) {
    return L.divIcon({
        className: "box",
        iconAnchor: [12, 25],
        labelAnchor: [-6, 0],
        popupAnchor: [0, -15],
        html: `<span style="${markerHtmlStyles}" >M</span>`
    })
}
       
L.marker([51.51, -0.09], {
    icon: thing("hello")
}).addTo(map)
    .bindPopup('divIcon CSS3 popup. <br> Supposed to be easily stylable.');

答案 11 :(得分：1)

在 R 中，使用addAwesomeMarkers（）函数。产生红色标记的示例代码：

leaflet() %>%
addTiles() %>%
addAwesomeMarkers(lng = -77.03654, lat = 38.8973, icon = awesomeIcons(icon = 'ion-ionic', library = 'ion', markerColor = 'red'))

离子图标链接：http://ionicons.com/

答案 12 :(得分：0)

一个非常简单的方法是使用色调旋转过滤器：

https://developer.mozilla.org/fr/docs/Web/CSS/filter-function/hue-rotate()

有了这个，你可以打电话

var random_value = Math.floor(Math.random() * 360);
marker._icon.style.webkitFilter = "hue-rotate(" + parseString(random_value) + "deg)";

其中 random_value 是 0 到 360 之间的数字。

它将根据此值应用颜色。

答案 13 :(得分：0)

除了@guillermogfer描述的方式之外，如果您不想将整个svg代码粘贴到您的react组件中，这也是这样做的方法。 您可以将svg代码放在一个单独的文件中，并将其作为React组件加载到代码文件中，如下所示：

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

完成此操作后，您就可以像使用React组件一样使用svg了，如下所示：

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

我们最终要做的是定义一些在我们的应用程序中使用的标准svg颜色，因此我们可以将它们作为一个类传递，以更改svg的颜色。如果您事先不知道颜色或没有定义的颜色，则可以使用style属性动态覆盖svg文件中的属性，如下所示：

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

要使其正常工作，将要覆盖的属性设置在svg中的元素上而不是单个路径上是很重要的。

为了使此svg图标显示在传单中，您可以使用@guillermogfer所述的divIcon。但是，由于divIcon的html属性不了解jsx，我们需要先将其转换为字符串：

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

答案 14 :(得分：0)

除了@tutts出色的答案外，我将其修改为：

...包括一个标题-您可以在其中使用FontAwesome图标或类似符号... 

var myCustomColour = '#334455d0', // d0 -> alpha value
    lat = 5.5,
    lon = 5.5;

var caption = '', // '<i class="fa fa-eye" />' or 'abc' or ...
    size = 10,    // size of the marker
    border = 2;   // border thickness

var markerHtmlStyles = ' \
    background-color: ' + myCustomColour + '; \
    width: '+ (size * 3) +'px; \
    height: '+ (size * 3) +'px; \
    display: block; \
    left: '+ (size * -1.5) +'px; \
    top: '+ (size * -1.5) +'px; \
    position: relative; \
    border-radius: '+ (size * 3) +'px '+ (size * 3) +'px 0; \
    transform: rotate(45deg); \
    border: '+border+'px solid #FFFFFF;\
    ';

var captionStyles = '\
    transform: rotate(-45deg); \
    display:block; \
    width: '+ (size * 3) +'px; \
    text-align: center; \
    line-height: '+ (size * 3) +'px; \
    ';

var icon = L.divIcon({
    className: "color-pin-" + myCustomColour.replace('#', ''),

    // on another project this is needed: [0, size*2 + border/2]
    iconAnchor: [border, size*2 + border*2], 

    labelAnchor: [-(size/2), 0],
    popupAnchor: [0, -(size*3 + border)],
    html: '<span style="' + markerHtmlStyles + '"><span style="'+captionStyles+'">'+ caption + '</span></span>'
});

var marker = L.marker([lat, lon], {icon: icon})
.addTo(mymap);

和ES6版本（例如@tutts）..我将其与vue-leaflet一起使用

// caption could be: '<i class="fa fa-eye" />',
function makeMarkerIcon(color, caption) {
	let myCustomColour = color + 'd0';

	let size = 10,    // size of the marker
		border = 2;   // border thickness

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

	let captionStyles = `
		transform: rotate(-45deg);
		display:block;
		width: ${size * 3}px;
		text-align: center;
		line-height: ${size * 3}px;
		`;

	let icon = L.divIcon({
		className: 'color-pin-' + myCustomColour.replace('#', ''),
		iconAnchor: [border, size*2 + border*2],
		labelAnchor: [-(size/2), 0],
		popupAnchor: [0, -(size*3 + border)],

		html: `<span style="${markerHtmlStyles}"><span style="${captionStyles}">${caption || ''}</span></span>`
	});

	return icon;
}

var marker = L.marker([lat, lon], {icon: makeMarkerIcon('#123456d0', '?')})
.addTo(mymap);

答案 15 :(得分：0)

编写一个函数，该函数具有给定的颜色（或其他任何特征），可返回所需图标的SVG表示形式。然后，在创建标记时，请使用适当的参数引用此函数。

答案 16 :(得分：-1)

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
相关问题
最新问题