ArcGIS api for JavaScript 4+版本tooltip控件

话不多说，先上效果图

效果图

Paste_Image.png

代码

define([
    "./Custom"
], function (Custom) {
    var _tpl = dojo.string.substitute;

    var ROOT_TEMPLATE = '
${content}
';
    var CONTENT_TEMPLATE = '
${content}
';
    var ARROW_TEMPLATE = '
'

    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;

});

小结

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