首页 > 其他分享 >leaflet插件leaflet-graticule经度标签格式化问题

leaflet插件leaflet-graticule经度标签格式化问题

时间：2023-05-18 11:35:18浏览次数：60  
标签：map 插件 graticule lon leaflet var ._ lat options

https://github.com/turban/Leaflet.Graticule

import "leaflet-graticule";
L.graticule().addTo(map);

解决办法：

import "leaflet-graticule";
L.LatLngGraticule.prototype.__format_lng_origin=L.LatLngGraticule.prototype.__format_lng;
L.LatLngGraticule.prototype.__format_lng = function (lng) {
  while (Math.abs(lng) > 180) {
    lng -= Math.sign(lng) * 360;
  }
  return L.LatLngGraticule.prototype.__format_lng_origin.call(this, lng);
};
L.latlngGraticule().addTo(map);
点击查看插件代码 
/**
*  Create a Canvas as ImageOverlay to draw the Lat/Lon Graticule,
*  and show the axis tick label on the edge of the map.
*  Author: [email protected]
*/

L.LatLngGraticule = L.Layer.extend({
    options: {
        showLabel: true,
        opacity: 1,
        weight: 0.8,
        color: '#aaa',
        font: '12px Verdana',
        lngLineCurved: 0,
        latLineCurved: 0,
        zoomInterval: [
            {start: 2, end: 2, interval: 40},
            {start: 3, end: 3, interval: 20},
            {start: 4, end: 4, interval: 10},
            {start: 5, end: 7, interval: 5},
            {start: 8, end: 20, interval: 1}
        ]
    },

    initialize: function (options) {
        L.setOptions(this, options);

        var defaultFontName = 'Verdana';
        var _ff = this.options.font.split(' ');
        if (_ff.length < 2) {
            this.options.font += ' ' + defaultFontName;
        }

        if (!this.options.fontColor) {
            this.options.fontColor = this.options.color;
        }

        if (this.options.zoomInterval) {
            if (this.options.zoomInterval.latitude) {
                this.options.latInterval = this.options.zoomInterval.latitude;
                if (!this.options.zoomInterval.longitude) {
                    this.options.lngInterval = this.options.zoomInterval.latitude;
                }
            }
            if (this.options.zoomInterval.longitude) {
                this.options.lngInterval = this.options.zoomInterval.longitude;
                if (!this.options.zoomInterval.latitude) {
                    this.options.latInterval = this.options.zoomInterval.longitude;
                }
            }
            if (!this.options.latInterval) {
                this.options.latInterval = this.options.zoomInterval;
            }
            if (!this.options.lngInterval) {
                this.options.lngInterval = this.options.zoomInterval;
            }
        }
    },

    onAdd: function (map) {
        this._map = map;

        if (!this._container) {
            this._initCanvas();
        }

        map._panes.overlayPane.appendChild(this._container);

        map.on('viewreset', this._reset, this);
        map.on('move', this._reset, this);
        map.on('moveend', this._reset, this);

// 		if (map.options.zoomAnimation && L.Browser.any3d) {
// 			map.on('zoom', this._animateZoom, this);
// 		}

        this._reset();
    },

    onRemove: function (map) {
        map.getPanes().overlayPane.removeChild(this._container);

        map.off('viewreset', this._reset, this);
        map.off('move', this._reset, this);
        map.off('moveend', this._reset, this);

// 		if (map.options.zoomAnimation) {
// 			map.off('zoom', this._animateZoom, this);
// 		}
    },

    addTo: function (map) {
        map.addLayer(this);
        return this;
    },

    setOpacity: function (opacity) {
        this.options.opacity = opacity;
        this._updateOpacity();
        return this;
    },

    bringToFront: function () {
        if (this._canvas) {
            this._map._panes.overlayPane.appendChild(this._canvas);
        }
        return this;
    },

    bringToBack: function () {
        var pane = this._map._panes.overlayPane;
        if (this._canvas) {
            pane.insertBefore(this._canvas, pane.firstChild);
        }
        return this;
    },

    getAttribution: function () {
        return this.options.attribution;
    },

    _initCanvas: function () {
        this._container = L.DomUtil.create('div', 'leaflet-image-layer');

        this._canvas = L.DomUtil.create('canvas', '');

        if (this._map.options.zoomAnimation && L.Browser.any3d) {
            L.DomUtil.addClass(this._canvas, 'leaflet-zoom-animated');
        } else {
            L.DomUtil.addClass(this._canvas, 'leaflet-zoom-hide');
        }

        this._updateOpacity();

        this._container.appendChild(this._canvas);

        L.extend(this._canvas, {
            onselectstart: L.Util.falseFn,
            onm ousemove: L.Util.falseFn,
            onl oad: L.bind(this._onCanvasLoad, this)
        });
    },

	// _animateZoom: function (e) {
	// 	var map = this._map,
	// 		container = this._container,
	// 		canvas = this._canvas,
	// 		zoom = map.getZoom(),
	// 		center = map.getCenter(),
	// 		scale = map.getZoomScale(zoom),
	// 		nw = map.containerPointToLatLng([0, 0]),
	// 		se = map.containerPointToLatLng([canvas.width, canvas.height]),

	// 		topLeft = map._latLngToNewLayerPoint(nw, zoom, center),
	// 		size = map._latLngToNewLayerPoint(se, zoom, center)._subtract(topLeft),
	// 		origin = topLeft._add(size._multiplyBy((1 / 2) * (1 - 1 / scale)));

	// 	L.DomUtil.setTransform(container, origin, scale);
	// },

    _reset: function () {
        var container = this._container,
            canvas = this._canvas,
            size = this._map.getSize(),
            lt = this._map.containerPointToLayerPoint([0, 0]);

        L.DomUtil.setPosition(container, lt);

        container.style.width = size.x + 'px';
        container.style.height = size.y + 'px';

        canvas.width  = size.x;
        canvas.height = size.y;
        canvas.style.width  = size.x + 'px';
        canvas.style.height = size.y + 'px';

        this.__calcInterval();

        this.__draw(true);
    },

    _onCanvasLoad: function () {
        this.fire('load');
    },

    _updateOpacity: function () {
        L.DomUtil.setOpacity(this._canvas, this.options.opacity);
    },

    __format_lat: function(lat) {
        if (this.options.latFormatTickLabel) {
            return this.options.latFormatTickLabel(lat);
        }

        // todo: format type of float
        if (lat < 0) {
            return '' + (lat*-1) + 'S';
        }
        else if (lat > 0) {
            return '' + lat + 'N';
        }
        return '' + lat;
    },

    __format_lng: function(lng) {
        if (this.options.lngFormatTickLabel) {
            return this.options.lngFormatTickLabel(lng);
        }
        while (Math.abs(lng) > 180) { lng -= Math.sign(lng) * 360 };
        // todo: format type of float
        if (lng > 180) {
            return '' + (360 - lng) + 'W';
        }
        else if (lng > 0 && lng < 180) {
            return '' + lng + 'E';
        }
        else if (lng < 0 && lng > -180) {
            return '' + (lng*-1) + 'W';
        }
        else if (lng == -180) {
            return '' + (lng*-1);
        }
        else if (lng < -180) {
            return '' + (360 + lng) + 'W';
        }
        return '' + lng;
    },

    __calcInterval: function() {
        var zoom = this._map.getZoom();
        if (this._currZoom != zoom) {
            this._currLngInterval = 0;
            this._currLatInterval = 0;
            this._currZoom = zoom;
        }

        var interv;

        if (!this._currLngInterval) {
            try {
                for (var idx in this.options.lngInterval) {
                    var dict = this.options.lngInterval[idx];
                    if (dict.start <= zoom) {
                        if (dict.end && dict.end >= zoom) {
                            this._currLngInterval = dict.interval;
                            break;
                        }
                    }
                }
            }
            catch(e) {
                this._currLngInterval = 0;
            }
        }

        if (!this._currLatInterval) {
            try {
                for (var idx in this.options.latInterval) {
                    var dict = this.options.latInterval[idx];
                    if (dict.start <= zoom) {
                        if (dict.end && dict.end >= zoom) {
                            this._currLatInterval = dict.interval;
                            break;
                        }
                    }
                }
            }
            catch(e) {
                this._currLatInterval = 0;
            }
        }
    },

    __draw: function(label) {
        function _parse_px_to_int(txt) {
            if (txt.length > 2) {
                if (txt.charAt(txt.length-2) == 'p') {
                    txt = txt.substr(0, txt.length-2);
                }
            }
            try {
                return parseInt(txt, 10);
            }
            catch(e) {}
            return 0;
        };

        var canvas = this._canvas,
            map = this._map,
            curvedLon = this.options.lngLineCurved,
            curvedLat = this.options.latLineCurved;

        if (L.Browser.canvas && map) {
            if (!this._currLngInterval || !this._currLatInterval) {
                this.__calcInterval();
            }

            var latInterval = this._currLatInterval,
                lngInterval = this._currLngInterval;

            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.lineWidth = this.options.weight;
            ctx.strokeStyle = this.options.color;
            ctx.fillStyle = this.options.fontColor;

            if (this.options.font) {
                ctx.font = this.options.font;
            }
            var txtWidth = ctx.measureText('0').width;
            var txtHeight = 12;
            try {
                var _font_size = ctx.font.split(' ')[0];
                txtHeight = _parse_px_to_int(_font_size);
            }
            catch(e) {}

            var ww = canvas.width,
                hh = canvas.height;

            var lt = map.containerPointToLatLng(L.point(0, 0));
            var rt = map.containerPointToLatLng(L.point(ww, 0));
            var rb = map.containerPointToLatLng(L.point(ww, hh));

            var _lat_b = rb.lat,
                _lat_t = lt.lat;
            var _lon_l = lt.lng,
                _lon_r = rt.lng;

            var _point_per_lat = (_lat_t - _lat_b) / (hh * 0.2);
            if (_point_per_lat < 1) { _point_per_lat = 1; }
            if (_lat_b < -90) {
                _lat_b = -90;
            }
            else {
                _lat_b = parseInt(_lat_b - _point_per_lat, 10);
            }

            if (_lat_t > 90) {
                _lat_t = 90;
            }
            else {
                _lat_t = parseInt(_lat_t + _point_per_lat, 10);
            }

            var _point_per_lon = (_lon_r - _lon_l) / (ww * 0.2);
            if (_point_per_lon < 1) { _point_per_lon = 1; }
            if (_lon_l > 0 && _lon_r < 0) {
                _lon_r += 360;
            }
            _lon_r = parseInt(_lon_r + _point_per_lon, 10);
            _lon_l = parseInt(_lon_l - _point_per_lon, 10);

            var ll, latstr, lngstr, _lon_delta = 0.5;
            function __draw_lat_line(self, lat_tick) {
                ll = map.latLngToContainerPoint(L.latLng(lat_tick, _lon_l));
                latstr = self.__format_lat(lat_tick);
                txtWidth = ctx.measureText(latstr).width;

                if (curvedLat) {
                    if (typeof(curvedLat) == 'number') {
                        _lon_delta = curvedLat;
                    }

                    var __lon_left = _lon_l, __lon_right = _lon_r;
                    if (ll.x > 0) {
                        var __lon_left = map.containerPointToLatLng(L.point(0, ll.y));
                        __lon_left = __lon_left.lng - _point_per_lon;
                        ll.x = 0;
                    }
                    var rr = map.latLngToContainerPoint(L.latLng(lat_tick, __lon_right));
                    if (rr.x < ww) {
                        __lon_right = map.containerPointToLatLng(L.point(ww, rr.y));
                        __lon_right = __lon_right.lng + _point_per_lon;
                        if (__lon_left > 0 && __lon_right < 0) {
                            __lon_right += 360;
                        }
                    }

                    ctx.beginPath();
                    ctx.moveTo(ll.x, ll.y);
                    var _prev_p = null;
                    for (var j=__lon_left; j<=__lon_right; j+=_lon_delta) {
                        rr = map.latLngToContainerPoint(L.latLng(lat_tick, j));
                        ctx.lineTo(rr.x, rr.y);

                        if (self.options.showLabel && label && _prev_p != null) {
                            if (_prev_p.x < 0 && rr.x >= 0) {
                                var _s = (rr.x - 0) / (rr.x - _prev_p.x);
                                var _y = rr.y - ((rr.y - _prev_p.y) * _s);
                                ctx.fillText(latstr, 0, _y + (txtHeight/2));
                            }
                            else if (_prev_p.x <= (ww-txtWidth) && rr.x > (ww-txtWidth)) {
                                var _s = (rr.x - ww) / (rr.x - _prev_p.x);
                                var _y = rr.y - ((rr.y - _prev_p.y) * _s);
                                ctx.fillText(latstr, ww-txtWidth, _y + (txtHeight/2)-2);
                            }
                        }

                        _prev_p = {x:rr.x, y:rr.y, lon:j, lat:i};
                    }
                    ctx.stroke();
                }
                else {
                    var __lon_right = _lon_r;
                    var rr = map.latLngToContainerPoint(L.latLng(lat_tick, __lon_right));
                    if (curvedLon) {
                        __lon_right = map.containerPointToLatLng(L.point(0, rr.y));
                        __lon_right = __lon_right.lng;
                        rr = map.latLngToContainerPoint(L.latLng(lat_tick, __lon_right));

                        var __lon_left = map.containerPointToLatLng(L.point(ww, rr.y));
                        __lon_left = __lon_left.lng;
                        ll = map.latLngToContainerPoint(L.latLng(lat_tick, __lon_left));
                    }

                    ctx.beginPath();
                    ctx.moveTo(ll.x+1, ll.y);
                    ctx.lineTo(rr.x-1, rr.y);
                    ctx.stroke();
                    if (self.options.showLabel && label) {
                        var _yy = ll.y + (txtHeight/2)-2;
                        ctx.fillText(latstr, 0, _yy);
                        ctx.fillText(latstr, ww-txtWidth, _yy);
                    }
                }
            };

            if (latInterval > 0) {
                for (var i=latInterval; i<=_lat_t; i+=latInterval) {
                    if (i >= _lat_b) {
                        __draw_lat_line(this, i);
                    }
                }
                for (var i=0; i>=_lat_b; i-=latInterval) {
                    if (i <= _lat_t) {
                        __draw_lat_line(this, i);
                    }
                }
            }

            function __draw_lon_line(self, lon_tick) {
                lngstr = self.__format_lng(lon_tick);
                txtWidth = ctx.measureText(lngstr).width;
                var bb = map.latLngToContainerPoint(L.latLng(_lat_b, lon_tick));

                if (curvedLon) {
                    if (typeof(curvedLon) == 'number') {
                        _lat_delta = curvedLon;
                    }

                    ctx.beginPath();
                    ctx.moveTo(bb.x, bb.y);
                    var _prev_p = null;
                    for (var j=_lat_b; j<_lat_t; j+=_lat_delta) {
                        var tt = map.latLngToContainerPoint(L.latLng(j, lon_tick));
                        ctx.lineTo(tt.x, tt.y);

                        if (self.options.showLabel && label && _prev_p != null) {
                            if (_prev_p.y > 8 && tt.y <= 8) {
                                ctx.fillText(lngstr, tt.x - (txtWidth/2), txtHeight);
                            }
                            else if (_prev_p.y >= hh && tt.y < hh) {
                                ctx.fillText(lngstr, tt.x - (txtWidth/2), hh-2);
                            }
                        }

                        _prev_p = {x:tt.x, y:tt.y, lon:lon_tick, lat:j};
                    }
                    ctx.stroke();
                }
                else {
                    var __lat_top = _lat_t;
                    var tt = map.latLngToContainerPoint(L.latLng(__lat_top, lon_tick));
                    if (curvedLat) {
                        __lat_top = map.containerPointToLatLng(L.point(tt.x, 0));
                        __lat_top = __lat_top.lat;
                        if (__lat_top > 90) { __lat_top = 90; }
                        tt = map.latLngToContainerPoint(L.latLng(__lat_top, lon_tick));

                        var __lat_bottom = map.containerPointToLatLng(L.point(bb.x, hh));
                        __lat_bottom = __lat_bottom.lat;
                        if (__lat_bottom < -90) { __lat_bottom = -90; }
                        bb = map.latLngToContainerPoint(L.latLng(__lat_bottom, lon_tick));
                    }

                    ctx.beginPath();
                    ctx.moveTo(tt.x, tt.y+1);
                    ctx.lineTo(bb.x, bb.y-1);
                    ctx.stroke();

                    if (self.options.showLabel && label) {
                        ctx.fillText(lngstr, tt.x - (txtWidth/2), txtHeight+1);
                        ctx.fillText(lngstr, bb.x - (txtWidth/2), hh-3);
                    }
                }
            };

            if (lngInterval > 0) {
                for (var i=lngInterval; i<=_lon_r; i+=lngInterval) {
                    if (i >= _lon_l) {
                        __draw_lon_line(this, i);
                    }
                }
                for (var i=0; i>=_lon_l; i-=lngInterval) {
                    if (i <= _lon_r) {
                        __draw_lon_line(this, i);
                    }
                }
            }
        }
    }

});

L.latlngGraticule = function (options) {
    return new L.LatLngGraticule(options);
};

标签：map,插件,graticule,lon,leaflet,var,._,lat,options
From： https://www.cnblogs.com/echohye/p/17411402.html

相关文章

  • es笔记四之中文分词插件安装与使用
    本文首发于公众号：Hunter后端原文链接：es笔记四之中文分词插件安装与使用前面我们介绍的操作及演示都是基于英语单词的分词，但我们大部分使用的肯定都是中文，所以如果需要使用分词的操作肯定也是需要使用中分分词。这里我们介绍一下如何安装中文分词插件。在介绍安装之前，我们可以......
  • VSCode上的代码变量命名工具插件，让你的开发效率倍增！
    本篇文章主要讲解VSCode上的代码变量命名工具插件chtml代码命名工具的使用。日期：2023年5月15日vscode版本1.78及以上转载地址：https://blog.csdn.net/weixin_46078894，已获作者同意！插件说明CHTML是一款在线的代码命名工具，提供变量命名规则库，可以帮助开发者快速选择合适的变......
  • edge浏览器上可用的AI聊天插件
    WeTab-免费ChatGPT新标签页-MicrosoftEdgeAddons......
  • Boris FX Silhouette 2023 for MAC 影视后期Roto抠像Paint视效合成独立版软件/Adobe插
    业界领先的rotoscoping和painttool，包含了主要的合成功能。Silhouette2023提供400多个VFX节点，包括BorisFXSapphire、MochaPro和ParticleIllusion。十五年来，Silhouette一直是好莱坞大片不可或缺的一部分，最近在《Dune》、《Spiderman:NoWayHome》、《FreeGuy》和《Th......
  • Ubuntu下，已经编译了OSG，如何增加OsgFbx插件，支持读取.fbx格式文件[转]
    最近在搞OSG相关的东西，美术给了个.fbx格式的模型，但死活无法加载，在网上搜了一圈，发现需要增加个插件才能支持这种格式的模型读取。一、osg支持的文件格式列表可以参看下这篇博文[原][资料整理][osg]osgDB文件读取插件，工作机制，支持格式，自定义插件-南水之源-博客园二、在fbx官......
  • wordpress 优化备份还原插件duplicator-pro-4_5_3_2的使用填坑
     创建备份我这边没有出错，就不说了 插件下载地址：https://www.wpjzb.com/wp-plugins/duplicator-pro/我是应的是  https://pan.baidu.com/share/init?surl=YRss-vqBVY2Twv1tBid9fQ   提取码:ibnshttps://pan.baidu.com/share/init?surl=6VSX3FUlugtfBfTPj4wLbg 提取......
  • SSM中使用Mybatis的PageHelper插件实现分页
    效果实现前言前面实现SSM整合以及实现原始手动分页参考添加jar包使用插件首先要先加载jar包将两个jar包，放到项目下的lib目录下。修改applicationContext.xml在sqlsession下增加<propertyname="plugins"><array><beanclass="com.github.pagehelper.Pa......
  • 【Go新手起步01】5步完成 vscode的go插件安装跟激活。
     首先下载vscode,进行两个插件安装，如图所示 然后下载go语言，在官网https://go.dev/doc/install下载 cmd打开，输入goversion验证下载是否成功。在dos页面输入goenv-wGO111MODULE=on                goenv-wGOPROXY=https://goproxy.cn,di......
  • （转）CNI 网络插件
    原文：https://ranchermanager.docs.rancher.com/zh/faq/container-network-interface-providers什么是CNI？​CNI（容器网络接口）是一个云原生计算基金会项目，它包含了一些规范和库，用于编写在Linux容器中配置网络接口的一系列插件。CNI只关注容器的网络连接，并在容器被删除时移除所......
  • VSCode版本和离线插件不匹配的解决方式
    相信很多人都遇到过这种情况，在内网环境使用VSCode进行开发时，无法在线下载插件，然而没有插件的话使用起来就很不方便，于是我们就需要离线下载插件然后离线安装，但是这又出现一个问题，下载的插件和vscode的版本常常不兼容，那么我们该如何准确找到vscode对应版本的插件呢？一、查看vscode的......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99