• leaflet marker 旋转


    leaflet.markerRotation.js 代码(这段代码是从插件 leaflet.polylineDecorator.js 中复制的):

    // leaflet 实现 marker 旋转
    (function () {
        // save these original methods before they are overwritten
        var proto_initIcon = L.Marker.prototype._initIcon;
        var proto_setPos = L.Marker.prototype._setPos;
    
        var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');
    
        L.Marker.addInitHook(function () {
            var iconOptions = this.options.icon && this.options.icon.options;
            var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
            if (iconAnchor) {
                iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px');
            }
            this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center bottom';
            this.options.rotationAngle = this.options.rotationAngle || 0;
    
            // Ensure marker keeps rotated during dragging
            this.on('drag', function (e) { e.target._applyRotation(); });
        });
    
        L.Marker.include({
            _initIcon: function () {
                proto_initIcon.call(this);
            },
    
            _setPos: function (pos) {
                proto_setPos.call(this, pos);
                this._applyRotation();
            },
    
            _applyRotation: function () {
                if (this.options.rotationAngle) {
                    this._icon.style[L.DomUtil.TRANSFORM + 'Origin'] = this.options.rotationOrigin;
    
                    if (oldIE) {
                        // for IE 9, use the 2D rotation
                        this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
                    } else {
                        // for modern browsers, prefer the 3D accelerated version
                        this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)';
                    }
                }
            },
    
            setRotationAngle: function (angle) {
                this.options.rotationAngle = angle;
                this.update();
                return this;
            },
    
            setRotationOrigin: function (origin) {
                this.options.rotationOrigin = origin;
                this.update();
                return this;
            }
        });
    })();
    View Code

    引用 leaflet.markerRotation.js,然后就可以设置 marker 的旋转角度了:

    marker.setRotationOrigin('center center');
    marker.setRotationAngle(45);
    View Code

    参考github:

    https://github.com/bbecquet/Leaflet.RotatedMarker

  • 相关阅读:
    springboot 项目添加jaeger调用链监控
    使用Maven插件快捷打包发布远程Docker镜像 dockerfile-maven-plugin
    glide install失败 Update failed for golang.org/x/net: Cannot detect VCS
    Docker 修改默认存储位置
    istio 服务地图
    istio收集Metrics和日志信息
    istio分布式调用链Jaeger
    prometheus 通过企业微信接收告警
    prometheus alert rules文件格式化
    Effective C++ 笔记二 构造/析构/赋值运算
  • 原文地址:https://www.cnblogs.com/s0611163/p/15603106.html
Copyright © 2020-2023  润新知