短划线传单中的标记图标答案

【问题标题】：Marker Icons In Dash Leaflet短划线传单中的标记图标
【发布时间】：2022-09-23 00:27:22
【问题描述】：

我一直在使用 Folium 和 Dash Leaflet，我希望他们在如何做同样的事情上更加一致。正如问题的标题所示，我希望在 Dash Leaflet 中更改标记图标。我已经能够将标记更改为图像（下面的示例）

import dash_leaflet as dl
import dash_leaflet.express as dlx
from dash import html, Dash
from dash_extensions.javascript import assign
import json
locations = \'\'\'{
  \"type\": \"FeatureCollection\",
  \"features\": [
    {
      \"type\": \"Feature\",
      \"properties\": {},
      \"geometry\": {
        \"type\": \"Point\",
        \"coordinates\": [
          -74.00570869445801,
          40.713175131022695
        ]
      }
    }
  ]
}\'\'\'
use_icon = assign(\"\"\"function(feature, latlng){
const i = L.icon({iconUrl: `https://cdn4.iconfinder.com/data/icons/standard-free-icons/139/Checkin01-512.png`, iconSize: [40, 40]});
return L.marker(latlng, {icon: i});
}\"\"\")
app = Dash()
app.layout = html.Div(children=[
                        dl.Map(center=[39, -98], zoom=4, children=[
                            dl.TileLayer(),
                            dl.GeoJSON(data=dlx.geojson_to_geobuf(json.loads(locations)), 
                                format=\'geobuf\', 
                                options=dict(pointToLayer=use_icon))],
                            style={\'width\': \'100%\', \'height\': \'100vh\'})])

if __name__ == \"__main__\":
    app.run_server(debug=False)

这就是它的样子

这很好，但其中一件不可取的事情是制造商的坐标位于图像的中间。因此，当您缩小图像的中心时，坐标所在的位置。我想要的是常规标记的功能，其中基础始终是坐标所在的位置。

此外，我想做的就是你可以在 Folium 中做的同样的事情。 Folium 允许您从 Font-Awesome 4.0、Bootstrap 3 和（我相信）Ionicons 1.5.2 给出的选择中更改常规标记的颜色以及标记图标的颜色。下面是我所说的示例关于

import folium
m = folium.Map()
folium.Marker((40.713175131022695, -74.00570869445801), 
              icon=folium.Icon(color=\'black\', icon=\'fire\', prefix=\'fa\')).add_to(m)
m

这是代码的结果

这个标记的行为是我想在 Dash Leaflet 中做的。现在，在我完成这个问题之前，我确实想补充一件事。我希望使用这些标记来过滤数据（因此我使用 Dash Leaflet），所以我不是在寻找一种解决方案，您只需使用 iframe 标签在仪表板中使用所需标记的 Folium 地图。

如果有人熟悉实现这一点，我将不胜感激。

谢谢

标签： python leaflet plotly-dash folium dash-leaflet

【解决方案1】：

您可以通过iconAnchor 属性调整图标的锚点（有关详细信息，请参阅the docs）。因此，如果您将 use_icon 函数更新为类似的东西，

use_icon = assign("""function(feature, latlng){
const i = L.icon({
iconUrl: `https://cdn4.iconfinder.com/data/icons/standard-free-icons/139/Checkin01-512.png`, 
iconSize: [40, 40],
iconAnchor: [20, 40]
});
return L.marker(latlng, {icon: i});
}""")

你应该得到想要的行为。 dash-leaflet 和 Folium 的界面如此不同的主要原因是 dash-leaflet 构建在 React Leaflet 之上，以实现与 Dash（构建在 React 之上）的无缝集成。

【讨论】：