TypeScript leaflet.Icon类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [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；未经允许，请勿转载。