Leaflet 改变 Marker(标记) 颜色

方案一:

这是谷歌在设计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}" />`
})

将markerHtmlStyles中的背景颜色更改为您的自定义颜色,您就可以开始使用了。

 

方案二:

绑定这个网站的图标!

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

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

 

用法:

var greenIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.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],
  shadowSize: [41, 41]
});

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

 

方案三:

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

1.首先,按照将Font-Awesome或Twitter bootstrap或Ionicons包含在您的应用程序中的步骤进行操作。

对于Font-Awesome,步骤位于:http://fortawesome.github.io/Font-Awesome/get-started/

对于Twitter bootstrap,步骤如下:http://getbootstrap.com/getting-started/

对于Ionicons:

你可以添加 ionicon stylesheet 从 https://ionicons.com/ ,或者直接在 head 引入以下内容:

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">

2.接下来,将dist / images目录,awesome-markers.css和awesome-markers.js复制到项目中并包含它们:

<link rel="stylesheet" href="css/leaflet.awesome-markers.css">
<script src="js/leaflet.awesome-markers.js"></script>

3.现在使用插件创建一个这样的标记:

  // Creates a red marker with the coffee icon
  var redMarker = L.AwesomeMarkers.icon({
    icon: 'coffee',
    markerColor: 'red'
  });
      
  L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);

详细的用法可以参考github,这里我不在赘述。

相关资源也可以到我的CSDN下载,希望这篇文章能帮到大家!

leaflet-color-markers-master.zip

Leaflet.awesome-markers-2.0-develop.zip

 

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页