ArcGIS api for JavaScript 4+版本to

作者: Swanky | 来源:发表于2017-07-29 11:58 被阅读172次

    话不多说,先上效果图

    效果图

    Paste_Image.png

    代码

    define([
        "./Custom"
    ], function (Custom) {
        var _tpl = dojo.string.substitute;
    
        var ROOT_TEMPLATE = '<div class="esri-custom-tooltip esri-custom-visible_hide" id="${id}">${content}</div>';
        var CONTENT_TEMPLATE = '<div class="esri-custom-tooltip-content">${content}</div>';
        var ARROW_TEMPLATE = '<div class="esri-custom-tooltop-arrow"></div>'
    
        var Tooltip = Custom.createSubclass({
            declaredClass: "esri.custom._Tooltip",
            normalizeCtorArgs: function (view, options) {
                this.options = (options || (options = {}));
                this._mapView = view;
                this._randomId = 'tooltip-' + Math.random().toString().split('.')[1];
    
                this._createTooltip();
                if (options.visible) {
                    this.show();
                }
                this.registerEvents();
            },
            properties: {
    
            },
            registerEvents: function () {
                var me = this;
                this._handlers = [this._mapView.watch('extent', this.debounce(function (event) {
                    if (me.options.visible) {
                        me.show();
                    }
                }, 0))];
            },
            _createTooltip: function () {
                var contentHtml = _tpl(CONTENT_TEMPLATE, { content: this.options.content });
                var html = _tpl(ROOT_TEMPLATE, { content: contentHtml + ARROW_TEMPLATE, id: this._randomId });
                dojo.query(this._mapView.container).query('.esri-view-root').addContent(html);
            },
            show: function (param) {
                var rootNode = dojo.query('#' + this._randomId);
                rootNode.removeClass('esri-custom-visible_hide');
                var arrowNode = rootNode.query('.esri-custom-tooltop-arrow');
                this.options = param = dojo.mixin(this.options, param, {
                    visible: true
                });
                if (param.location) {
                    var screenPoint = this._mapView.toScreen(param.location);
                    var arrowLeft = rootNode.style('width')[0] / 2 - 6;
                    rootNode.style({
                        'left': (screenPoint.x - arrowLeft - 6) + 'px',
                        'top': (screenPoint.y - 48) + 'px'
                    });
                    arrowNode.style({
                        'left': arrowLeft + 'px'
                    });
                }
            },
            hide: function () {
                dojo.query('#' + this._randomId).addClass('esri-custom-visible_hide');
            }
        });
    
        Tooltip.getInterPointFromRing = Custom.getInterPointFromRing;
    
        return Tooltip;
    
    });
    

    小结

    该控件并没有写得多么强大,有些东西定得比较死,大家有兴趣可以自己去修改

    相关文章

      网友评论

      本文标题:ArcGIS api for JavaScript 4+版本to

      本文链接:https://www.haomeiwen.com/subject/qjnqlxtx.html