• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript leaflet.Icon类代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中leaflet.Icon的典型用法代码示例。如果您正苦于以下问题:TypeScript Icon类的具体用法?TypeScript Icon怎么用?TypeScript Icon使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。



在下文中一共展示了Icon类的2个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: testExampleControlOptions

function testExampleControlOptions() {
    const editableLayers = new L.FeatureGroup([]);
    map.addLayer(editableLayers);

    const MyCustomMarker = L.Icon.extend({
        options: {
            shadowUrl: null,
            iconAnchor: new L.Point(12, 12),
            iconSize: new L.Point(24, 24),
            iconUrl: 'link/to/image.png'
        }
    });
    const drawControl = new L.Control.Draw({
        position: 'topright',
        draw: {
            polyline: {
                shapeOptions: {
                    color: '#f357a1',
                    weight: 10
                }
            },
            polygon: {
                allowIntersection: false, // Restricts shapes to simple polygons
                drawError: {
                    color: '#e1e100', // Color the shape will turn when intersects
                    message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
                },
                shapeOptions: {
                    color: '#bada55'
                }
            },
            circle: false, // Turns off this drawing tool
            rectangle: {
                shapeOptions: {
                    // clickable: false // clickabkle is not a polyline option according to leaflet docs
                }
            },
            marker: {
                icon: new MyCustomMarker()
            }
        },
        edit: {
            featureGroup: editableLayers, // REQUIRED!!
            remove: false
        }
    });
}
开发者ID:AlexGalays,项目名称:DefinitelyTyped,代码行数:47,代码来源:leaflet-draw-tests.ts


示例2: initialize

const IconClass = Icon.extend({

    options: {
        icon: "leaf"
        , iconSize: defaults.iconSize.circle
        , iconAnchor: defaults.iconAnchor.marker
        , iconShape: "marker"
        , iconStyle: ""
        , innerIconAnchor: [0, 3] // circle with fa or glyphicon or marker with text
        , innerIconStyle: ""
        , isAlphaNumericIcon: false
        , text: 1
        , borderColor: defaults.iconColor
        , borderWidth: 2
        , borderStyle: "solid"
        , backgroundColor: "white"
        , textColor: defaults.iconColor
        , customClasses: ""
        , spin: false
        , prefix: "fa"
        , html: ""
    },

    initialize(options) {

        this.applyDefaults(options);
        this.options = (!options || !options.html) ? Util.setOptions(this, options) : options;
    },

    applyDefaults(options) {

        if (options) {
            if (!options.iconSize && options.iconShape) {
                options.iconSize = defaults.iconSize[options.iconShape];
            }

            if (!options.iconAnchor && options.iconShape) {
                options.iconAnchor = defaults.iconAnchor[options.iconShape];
            }

            if (!options.popupAnchor && options.iconShape) {
                options.popupAnchor = defaults.popupAnchor[options.iconShape];
            }

            if (!options.innerIconAnchor) {
                // if icon is type of circle or marker
                if (options.iconShape === "circle" || options.iconShape === "marker") {
                    if (options.iconShape === "circle" && options.isAlphaNumericIcon) { // if circle with text
                        options.innerIconAnchor = [0, -1];
                    } else if (options.iconShape === "marker" && !options.isAlphaNumericIcon) {// marker with icon
                        options.innerIconAnchor = defaults.innerIconAnchor[options.iconShape];
                    }
                }
            }
        }
    },

    createIcon() {

        const iconDiv = document.createElement("div");
        const options = this.options;

        iconDiv.innerHTML = !options.html ? this.createIconInnerHtml() : options.html;
        this._setIconStyles(iconDiv);

        // having a marker requires an extra parent div for rotation correction
        if (this.options.iconShape === "marker") {
            const wrapperDiv = document.createElement("div");
            wrapperDiv.className = "beautify-marker" + (options.props.owner._currSelRow === options.props.row ? " selected" : "");
            wrapperDiv.appendChild(iconDiv);
            return wrapperDiv;
        }

        return iconDiv;
    },

    createIconInnerHtml() {

        const options = this.options;

        if (options.iconShape === "circle-dot" || options.iconShape === "rectangle-dot" || options.iconShape === "doughnut") {
            return "";
        }

        const innerIconStyle = this.getInnerIconStyle(options);
        if (options.isAlphaNumericIcon) {
            return '<div style="' + innerIconStyle + '">' + options.text + "</div>";
        }

        let spinClass = "";
        if (options.spin) {
            spinClass = " fa-spin";
        }

        return '<i class="' + options.prefix + " " + options.icon + spinClass + '" style="' + innerIconStyle + '"></i>';
    },

    getInnerIconStyle(options) {

        const innerAnchor = point(options.innerIconAnchor);
//.........这里部分代码省略.........
开发者ID:GordonSmith,项目名称:Visualization,代码行数:101,代码来源:BeautifyIcon.ts



注:本文中的leaflet.Icon类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript leaflet.Map类代码示例发布时间:2022-05-25
下一篇:
TypeScript leaflet.GeoJSON类代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap