当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript Icon.extend方法代码示例

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


在下文中一共展示了Icon.extend方法的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.extend方法示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。