ArcGIS api for JavaScript 4+版本tooltip控件

话不多说,先上效果图

效果图

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;

});

小结

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,018评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,198评论 4 61
  • 文/嚯嚯 黄昏雨后天气湿润的空气里 听风吹落叶尖上欲滴的甘露 偶尔被淋上一滴 水的氛围里冰凉的侵袭 心如秋日天空明...
    小嚯嚯阅读 381评论 0 0
  • .......
    刚正好阅读 195评论 0 0
  • 感觉挺烦恼的。整天感觉状态不是很好,可能是感冒了吧,吃了药以后,全身昏昏沉沉的,特别想睡觉。可能是因为感冒了,工作...
    小坤爸阅读 147评论 0 0