首页 > 解决方案 > 如何使用 react-leaflet-pixi-overlay 创建自定义图标?

问题描述

React 传单 Pixi 覆盖仅采用这些对象道具:id、位置、iconColor、popup、popupOpen、onClick 和 tooltip。那么如何创建自定义标记图标呢?没有传递图标标记的道具。

这是相同的链接https://www.npmjs.com/package/react-leaflet-pixi-overlay

有人可以帮忙吗?

标签: reactjspixi.jsreact-leaflet

解决方案


去年的“新版本”现在支持自定义图标,只需更新并像示例
https://github.com/knapcio/react-leaflet-pixi-overlay#custom-icon那样做

const markers = [{
            id: 'someIDUniqueToMarker',
            iconId: 'someIDUniqueToIcon', // used for cache
            customIcon:  '<svg style="-webkit-filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .4));filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .4));" xmlns="http://www.w3.org/2000/svg" fill="red" width="36" height="36" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 6.243 6.377 6.903 8 16.398 1.623-9.495 8-10.155 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.342-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'
        },
    ];

推荐阅读