javascript - 有没有办法在运行时将修改后的 SVG 设置为 leafletjs 中的自定义图标?

标签 javascript css reactjs leaflet

我正在使用 leaflet js 并想为具有不同 Angular 标记设置我的自定义图标。有没有办法在运行时这样做? 以前,我尝试过“react-Samy-SVG”,但这没有用,因为在传单中我应该为 iconUrl 属性提供文件路径。

        var myIcon = L.icon({
        iconUrl: require('../../public/images/black-plane.svg'),
        iconRetinaUrl: require('../../public/images/black-plane.svg'),
        iconSize: [32, 32],
        iconAnchor: null,
        popupAnchor: null,
        shadowUrl: null,
        shadowSize: null,
        shadowAnchor: null,
        className: 'leaflet-custom-marker'
    });

显然,我不想为我想要的所有 Angular 生成 SVG!

最佳答案

我使用旋转标记库。 https://github.com/bbecquet/Leaflet.RotatedMarker 演示页面已损坏 cdn 链接...使用此演示:https://erasta.github.io/Leaflet.RotatedMarker/example.html

L.marker([48.8631169, 2.3708919], {
    rotationAngle: 45
}).addTo(map);

marker.setRotationAngle(newAngle)

它适用于 SVG 图标

关于javascript - 有没有办法在运行时将修改后的 SVG 设置为 leafletjs 中的自定义图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59244733/

相关文章:

javascript - morris.js 中 x 轴的问题

javascript - 没有带有 xmlhttprequest 的响应文本

javascript - Ember 数据 EmbeddedRecordMixin

node.js - 如何在基于 axios 的网络调用中传递消费者 key 和消费者 secret 参数?

javascript - 引导滑动不适用于 anchor 标记

php - 安装联系表7插件后缺少原始联系表样式

css - z-index 未正确堆叠

html - 将文本和按钮平行放置

reactjs - 顺序调用 redux sagas

reactjs - 如何更改 React 中全局变量的值?