Изменение цвета маркера

Ответ 1

Так что это один из лучших хитов в Google для стилизации 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 на свой собственный цвет, и все готово.

Ответ 2

Привязать значки с этого сайта!

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

Подробная информация о том, как включить информацию на веб-сайте.

Ответ 3

Маркеры листовок хранятся в виде файлов, в отличие от других объектов (например, полилиний и т.д.).

Если вам нужны собственные маркеры, вы можете найти Официальный буклет-учебник, в котором объясняется, как это сделать.

ОБНОВЛЕНИЕ:

Прочитав этот разговор с основным разработчиком, я искал маркер SVG и здесь он.

Благодаря этому вы сможете раскрасить маркер так, как хотите, и произвольно установить его цвет.

ИЗМЕНИТЬ СНОВА:

Вы можете использовать MakiMarkers, чтобы установить цвет маркера, и использовать это расширение для создания случайных вещей. (Это просто и хорошо объяснено)

Ответ 4

Поскольку вы работаете с элементами svg, вы можете подать значок маркера вашего листка с помощью L.divIcon html вместо использования iconUrl из L.icon, чтобы связать ваше изображение.

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

Затем используйте свойство fill, чтобы покрасить вашу форму svg. Может быть полезно добавить класс \es в svg path\s для точного управления

<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);

Ответ 5

Попробуйте Leaflet.awesome-markers lib - он позволяет вам устанавливать цвета и другие стили.

Ответ 6

Ahh прослушиватель событий и измените значок с помощью метода 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

Вы также можете использовать API графиков Google для получения значков (просто измените "abcdef" на нужный вам шестнадцатеричный цвет:

Примеры:

• Цвет '#abcdef':
  • URL: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|abcdef&chf=a,s,ee00FFFF
  • Выход:
• Цвет '# e85141':
  • URL: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|e85141&chf=a,s,ee00FFFF
  • Вывод:
• Цвет "# 2ecc71 ':
  • URL: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|2ecc71&chf=a,s,ee00FFFF
  • Выход:

Ответ 8

Вот 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

Я нашел маркер/значок SVG, чтобы быть лучшим. Он очень гибкий и позволяет любой цвет вам нравится. Вы можете настроить весь значок без особых проблем:

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

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

Ответ 10

В R используйте функцию addAwesomeMarkers(). Пример кода, показывающий красный маркер:

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

Ссылка на иконки ионов: http://ionicons.com/

Ответ 11

Напишите функцию, которая с учетом цвета (или любых других характеристик) возвращает SVG-представление нужного значка. Затем, при создании маркера, свяжите эту функцию с соответствующим параметром (ами).

Ответ 12

добавив @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);

Ответ 13

1) Добавить маркер 2) найдите атрибут backgroundcolor для css и измените его. Вот:
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