精华内容
下载资源
问答
  • Leaflet使用经验总结

    2020-07-14 15:43:09
    Leaflet使用中经验总结 标签:leaflet 1.Leaflet中使用复选框控制图层显示 ​ Leaflet本身有图层控制的支持,但最近用Leaflet做台风的小项目,其中一个细节是使用复选框控制图层显示与否,解决方法作如下记录。在...

    Leaflet使用中经验总结

    标签:leaflet

    1.Leaflet中使用复选框控制图层显示

    ​ Leaflet本身有图层控制的支持,但最近用Leaflet做台风的小项目,其中一个细节是使用复选框控制图层显示与否,解决方法作如下记录。在表格中的"选择”列是对应一个台风图层的复选框,通过勾选来展示和隐藏本图层。Leaflet中的图层有其所属的leaflet_id,是为了保证图层的唯一性,但要选中复选框来操作对应的图层,显然leaflet_id帮不上什么忙了。

    ​ 于是,在绘制图层时给图层绑定一个自定义的layerId

    var id = 202002;
    var lyr_point = L.circle(……);
    var lyr_polyline = L.polyline(……);
    var lyr = L.featureGroup([lyr_point,lyr_polyline]);
    lyr.options.layerId = id; // 给图层(组)lyr绑定自定义id,在options参数里添加
    

    ​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NdqTQCT6-1594712495587)(https://user-images.githubusercontent.com/43515397/86454827-681e3700-bd52-11ea-946a-b8719fff90c4.png)]

    ​ js创建复选框时,给每一个复选框绑定id,值即为对应台风的id。要展示图层时,查看当前选中复选框是否选中,若选中则根据id构造url绘制;要隐藏图层时,遍历图层组,若传入的id与某一个图层的layerId匹配,则隐藏该图层。复选框绑定的函数框架如下,这样就可以实现使用复选框控制图层了。

    function showPath(id){
        if(document.getElementById(id.toString()).checked){
            //这里使用id构造url,利用返回的数据绘制图层
        }else{
            lyrGroup.eachLayer(function (layer){
                if(id == layer.options.LayersID){
                    lyr.removeLayer(layer);
                }
        	}
        }
    }
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c88Eqvpb-1594712495592)(https://user-images.githubusercontent.com/43515397/86453494-723f3600-bd50-11ea-9bd0-246a9c4ec6fe.png)]

    2.台风风圈的绘制

    ​ Leaflet中绘制台风风圈,网上有 一篇博客 实现的比较完整,具体思路是扩展L.Polygon类,使用SVG的path绘制。但我这里调用这个扩展类绘制的风圈不稳定,在地图缩放、拖动,窗口大小的改变都会是风圈图层消失。在浏览器中查看,发现上述操作是SVG的path里的d属性清零了,百思不得其解,于是乎放弃这个方法,改使用turf.js绘制风圈。

    ​ turf.js是浏览器和Node.js环境下的高级地理空间分析的js库,里面实现了很多常见的空间分析,比如缓冲区、点在多边形内等。我这里用lineArc函数,指定中心点、半径、起始和终止角度后,它可以绘制一段圆弧,注意这里的圆弧是由计算出来的很多点拟合而成的,并不是真正的绘制了一条圆弧。其中options参数中的step默认为64,如果想要展示效果更顺滑一点,可以选择拟合点数。

    ​ 分别指定东北,东南,西南,西北四个方向上的半径长度,单位默认是kilometer,生成四段圆弧,再把四段圆弧的坐标都push进一个数组,利用lineString函数生成线要素,再利用lineToPolygon函数转换为多边形。

    ​ 最后,使用L.geoJSON将风圈图层添加到地图上。实现函数贴在下方。

    // p--中心点(包含四个方向的半径),lyr--风圈图层所添加进的图层组
    function drawTyphoonCircle(p,lyr){
        var center = turf.point([p.longitude, p.latitude]);
        var r_ne,r_se,r_sw,r_nw;
        if(p.radius7_quad && p.radius7){    
            r_ne = p.radius7_quad.ne;
            r_se = p.radius7_quad.se;
            r_sw = p.radius7_quad.sw;
            r_nw = p.radius7_quad.nw;
        }else{
            return;
        }
        var options = {number:2048};
        var arc_ne = turf.lineArc(center, r_ne, 0, 89.9,options);
        var arc_se = turf.lineArc(center, r_se, 90, 179.9,options);
        var arc_sw = turf.lineArc(center, r_sw, 180, 269.9,options);
        var arc_nw = turf.lineArc(center, r_nw, 270, 360.1,options);
    
        var arcs = [];
        arcs.push(arc_ne,arc_se,arc_sw,arc_nw);
    
        var myStyle = {
            "color": "#ccffcc",
            "weight": 2,
            "fillColor":"#ccffcc"
        };
    
        var typhoonCircleCoords = [];
        for(var i=0;i<arcs.length;i++){
            var rawCoords1 = arcs[i].geometry.coordinates;
    
            for(var j=0;j<rawCoords1.length;j++){
                typhoonCircleCoords.push(rawCoords1[j]);
            }
        }
    
        var lineAll = turf.lineString(typhoonCircleCoords);
        var typhoonCirclePolygon = turf.lineToPolygon(lineAll);
    
        L.geoJSON(typhoonCirclePolygon,{style:myStyle}).addTo(lyr);
    }
    

    3.给表格添加滚动条,设置后无效

    overflow-y设置为true后,要设置height为一个固定的值,比如600px。

    4.Leaflet中加载Mapbox自定义地图

    使用L.tileLayer创建,url template中的username是Mapbox的注册账户的用户名。在https://studio.mapbox.com/中自定义图层的分享按钮处点击,即可看到style_id和Access Token。

    var mymap = L.map('map').setView([20.557212,126.402354],3.5);
    
    L.tileLayer('https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/512/{z}/{x}/{y}?access_token={accessToken}',{
        username:'whitedreamer',
        style_id:'cjn64ahui0ycg2rq72fer5a3r',
        accessToken:'pk.eyJ1Ijoid2hpdGVkcmVhbWVyIiwiYSI6ImNqbjN4azFjcDAwbG0zcG52aGc3M2x0M2sifQ.CYsl1oXDVr1PWgx4z6lSeg'
    }).addTo(mymap);
    

    5.单击表格行等同于单击行内的复选框,选中图层

    这个功能是问题1的改进版,需要修改原有的代码逻辑。首先,删除复选框的onclick绑定的事件,然后改写showPath函数:根据图层id(等同于checkbox的id)绘制台风路径,增加hidePath函数:根据图层id隐藏台风路径;最后,编写selectARow函数,获取所点击表格行中的复选框id,根据id判断图层是否已绘制,若未绘制则绘制该图层,若已绘制则取消绘制。

    注意:selectARow函数根据id判断复选框是否被选中来判断图层是否已绘制,存在逻辑矛盾,因为点击复选框是点击就绘制,取消就取消绘制;而点击表格行是若未选中则选中后绘制,若选中了则取消选中然后取消绘制。这两个逻辑相反,无法调和,故采取上述逻辑。

    function showPath(id){
        lyr_num += 1;//lyr_num是图层数量
            if(lyr_num > 4){
                alert('Layers More Than 4.');
            }
    
            var url = 'https://www.readearth.com/typhoon/'+id.toString().slice(0,4)+'/'+id+'.json';
            draw(url,id);
            $('.badge')[0].innerHTML=lyr_num;//bootstrap徽标,显示在按钮上,展示当前选中的图层数量
            ids.push(id);
    }
    
    function hidePath(id){
        lyr.eachLayer(function (layer){
            if(id == layer.options.LayersID){
                lyr.removeLayer(layer);
                lyr_num -= 1;
                $('.badge')[0].innerHTML=lyr_num;//更新当前显示的图层数量
            }
        });
    
        ids.forEach(function(item, index) {
            if(item == id) {
                ids.splice(index, 1);//删除id数组中的对应项
            }
        });
    }
    
    function selectARow(){
        $('.table').on('click','tr',function(){
            var td_checkbox = $(this)[0].children[3];//获取checkbox所在td
            var checkbox = td_checkbox.children[0];//获取checkox
            var id = parseInt(checkbox.id);//获取checkbox的id
    
            // flag标志行对应的图层是否已绘制,若已绘制则移除,若未绘制则绘制,默认未绘制
            var layers = lyr.getLayers();
            var flag = 0;
            if(layers.length){
                lyr.eachLayer(function(layer){
                    if(id == layer.options.LayersID){
                        flag = 1;
                    }
                })
            }
            if(flag){
                checkbox.checked = false;
                hidePath(id);  
            }else{
                checkbox.checked = true;
                showPath(id);
            }      
        })
    }
    

    6.一个div浮在一个div之上

    假设div1在底下,div2浮在上方,则css应该这么写。注意:div1与div2之间是平行关系,不是嵌套关系,但div1定义要在div2之上。

    #div1{
        position:absolute;
    }
    
    #div2{
        positon:relative;
        z-index:1/*div2的z-index大于div1的z-index即可,默认div1的z-index为0*/
    }
    

    7.Echarts绘制图表的依赖

    从Echarts官网下载的官方案例会引入很多文件,一般的图表,像饼图、条形图、折线图等等,只需要引入一个文件,即:

     <!-- 引入echarts.js -->
    <script type='text/javascript' src='https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js'></script>
    

    推荐下载下来本地引用,在线引用速度略慢。

    展开全文
  • vue2-leaflet使用

    2021-07-20 14:59:21
    vue2-leaflet使用 文章目录vue2-leaflet使用前言一、vue2-leaflet使用引用?二、获取vue中的地图元素1.找到vue中的地图对象,并保存成this.map2.绑定事件3.地图数据问题常用且重要的属性总结 前言 关于vue2-...

    vue2-leaflet使用


    前言

    关于vue2-leaflet使用过程中踩过许多坑,因为网上关于这个的使用比较少,资料不好找,本篇文章介绍了一些比较使用的技巧


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、vue2-leaflet使用引用?

    关于怎么在vue项目中引用vue2-leaflet就不多介绍了,这里贴一个链接,写的很详细了,
    https://blog.csdn.net/huangli0/article/details/80144544

    二、获取vue中的地图元素

    1.找到vue中的地图对象,并保存成this.map

    定义一个函数,通过this.$refs.myMap.mapObject获取地图元素,在函数@ready="doSomethingOnReady()这里地图加载完成,获取vue中的地图元素,这一步非常重要,后面所有的绑定事件都需要操作这个对象来解决。

          <l-map
            v-if="isMapShow"
            id="offline"
            ref="myMap"
            :zoom="zoom"
            :options="leafletMapOptions"
            :min-zoom="minZoom"
            :max-zoom="maxZoom"
            :center="center"
            :zoom-control="zoomControl"
            :max-bounds="maxBounds"
            @ready="doSomethingOnReady()"
            @update:zoom="zoomUpdated"
            @update:center="centerUpdated"
            @update:bounds="boundsUpdated">
     doSomethingOnReady() {
          this.map = this.$refs.myMap.mapObject
        },
    

    2.绑定事件

    1.   控制地图的可以缩放   this.map.dragging.enable()
      
    2.   控制地图的不可以缩放 this.map.dragging.disable()
      
    3.   绑定鼠标移动事件  this.map.on('mousemove', this.onMove)
      
    4.   解绑定鼠标移动事件   this.map.off('mousemove') 或者     this.map.removeEventListener('mousemove', this.clickMap)
      
    5.  其他绑定事件同理
      

    3.地图数据问题

    看瓦片的选择,可以使用高德地图的数据,但是需要纠偏
    假如使用的瓦片是高德的瓦片就不需要纠偏,但是不是的话就需要纠偏
    main.js中引入coordtransform,并绑定到vue实例上

    import coordtransform from 'coordtransform'
    Vue.prototype.coordtransform = coordtransform
    
     const itemxy = this.coordtransform.gcj02towgs84(item.longitude, item.latitude)
    

    几种常见的转换没有分类,试试那个对用哪个,自己动手丰衣足食,哈哈哈

        bd09togcj02: bd09togcj02,
        gcj02tobd09: gcj02tobd09,
        wgs84togcj02: wgs84togcj02,
        gcj02towgs84: gcj02towgs84
    

    常用且重要的属性

    1.maxBounds控制地图的最大显示范围,非常有用,可以避免地图出现下载瓦片以外的空白部分

    maxBounds: [[41.86272153308772, 123.77815246582033], [41.71047016863573, 123.40852260589601]],
    
    

    2.缩放属性,可以在方法中随意设置,调整方便

        zoom: 15,
        minZoom: 14,
        maxZoom: 18,
    

    3.设置地图左下角的显示数据

    attribution: 'xxxxx有限公司',
    

    4.在地图上画东西

    <l-rectangle :bounds="rectangle.bounds" :l-style="rectangle.style"/>
    
    rectangle: {
            bounds: [[41.835755, 123.740053], [41.835755, 123.740053]],
            style: { color: '#ffffff', weight: 3, fillOpacity: 0.2 }
          },
    

    总结

    最后附带几个学习网址,希望可以帮助到你
    1.这个是vue2-leaflet官网示例:
    https://vue2-leaflet.netlify.app/components/LIcon.html#demo
    2.这个是翻译的leaflet官方文档,
    http://www.360doc.com/content/20/0818/01/21412_930867142.shtml
    LeafLet js官网: http://leafletjs.com/examples.html
    LeafLet js官网demo: http://leafletjs.com/examples.html
    LeafLet js官网API: http://leafletjs.com/reference-1.3.0.html

    展开全文
  • leaflet使用百度地图

    千次阅读 2019-05-16 14:15:05
    leaflet使用百度地图,叠加层使用硬件/谷歌坐标。 leaflet默认使用硬件/谷歌坐标,使用百度地图需要进行坐标偏移。就是把硬件/谷歌坐标转换成百度坐标。 网上搜到一些解决方法,但是总是不奏效。最后还是拿网上的改...

    参考:https://www.jianshu.com/p/b48ec99011c2

    leaflet使用百度地图,叠加层使用硬件/谷歌坐标。
    leaflet默认使用硬件/谷歌坐标,使用百度地图需要进行坐标偏移。就是把硬件/谷歌坐标转换成百度坐标。

    网上搜到一些解决方法,但是总是不奏效。最后还是拿网上的改了下

    参考了以下文章:
    https://blog.csdn.net/u012087400/article/details/53744756
    https://blog.csdn.net/u012087400/article/details/52847614

    此方法是直接在地图投影方法出设置偏移。具体如下:
    1、引入支持leaflet的proj4(https://github.com/kartena/Proj4Leaflet)
    2、引入自定义百度地图层 tileLayer.baidu.js
    3、leaflet地图初始化时crs参数设置为L.CRS.Baidu,layers设置为L.tileLayer.baidu

    示例:
    22.532934684, 114.0547117002是谷歌地图坐标

     

    image.png

    源码:

    <html> 
    <head > 
    <script src="ui/js/jquery-1.11.3.min.js" ></script > 
    <script src="ui/leaflet1.3/leaflet-src.js" ></script > 
    <script src="ui/leaflet1.3/Proj4Leaflet/lib/proj4.js" ></script > 
    <script src="ui/leaflet1.3/Proj4Leaflet/src/proj4leaflet.js" ></script > 
    <script src="ui/leaflet1.3/leaflet-baidu/tileLayer.baidu.js" ></script > 
    </head > 
    <body > 
    <div id="mapdiv" ></div > 
    </body > 
    <script type="text/javascript" > 
    <!-- 
    $(document).ready(function(){ 
     var options = { 
       center: [22.532934684, 114.0547117002], 
        zoom: 15, 
        crs: L.CRS.Baidu, 
        layers: [new L.tileLayer.baidu({ layer: 'custom',customid:'midnight'})] 
    };
    var map = L.map("mapdiv", options);
    L.marker([22.532934684, 114.0547117002]).addTo(map).bindTooltip("会展中心").openTooltip();
    }); 
    //-- > 
    </script > 
    </html > 
    

    附件:leaftet百度.rar

    展开全文
  • Leaflet使用介绍

    万次阅读 2016-05-10 13:06:30
    Leaflet   第一章 概述 Leaflet是一个为建设交互性好适用于移动设备地图的领先开源JavaScript库。代码大小仅仅33KB,它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的思想,能够在...

    Leaflet

     

    第一章          概述

    Leaflet是一个为建设交互性好适用于移动设备地图的领先开源JavaScript库。代码大小仅仅33KB,它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的思想,能够在所有主流的桌面和移动平台高效的运作。支持插件扩展,拥有漂亮、易用的API文档和一个简单的、可读的源代码。

    官方网址http://leafletjs.com/index.html,通过官方网址可以下载Leaflet。

     

    第二章          Leaflet版本及文件

    2.1    版本介绍

    版本

    描述

    Leaflet 0.7.7

    稳定运行版本,发布于2013年11月18日,最近更新时间2015年10月26日

    Leaflet 1.0.0-rc1

    作为1.0版本的候选,发布于2016年4月18日

    Leaflet 1.0-dev

    在主分支上的一个进行中的版本

    2.2    文件介绍

    在HTML代码页面中添加如下代码:

    leaflet.js:是JavaScript代码的压缩文件

    leaflet-src.js:是可读的、未压缩的JavaScript代码,有时可以帮助调试

    leaflet.css:是Leaflet的层叠样式文件

    images:包含leaflet.css引用的图片文件夹,必须与leaflet.css文件在同一个目录。

    此外,如果你想下载完整的源代码,包括单元测试,可调试文件,生成脚本等等,你可以从GitHub库上下载。

    2.3    生成Leaflet

    Leaflet生成系统由Node.js平台提供技术支持。首先需要下载并安装Node,其次运行如下命令:

    npm install –g jake

    npm install

    安装之后,运行包含在Leaflet目录中的jake。jake将合并且压缩Leaflet源文件,保存生成文件到目标文件夹。

     

    第三章          Leaflet使用

    3.1    快速入门

    在HTML代码页面中添加如下代码:

    在body中添加一个div,并未div设置id,例如id为“mapid”,并未div设置宽度、高度等属性。

    保证在页面元素都完全加载之后,添加如下代码:

    3.2    Layer

    3.2.1 Tile Layer

    可以选择你需要的瓦片提供商,但推荐使用Mapbox(看起来很漂亮)。

    3.2.2 WMS Layer

    3.2.3 TMS Layer

    Leaflet并没有对于TMS服务的明确支持,但是瓦片组织结构与通用的L.TileLayer的组织模型一样,所以呈现TMS服务几乎就不那么繁琐了。

    3.2.4 访问ArcGIS MapServer

    Arcgis的MapServer的服务路径:

    中文地图:

    http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer

    英文地图:

    https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer

     

    瓦片请求规则:/tile/{z}/{y}/{x}

    具体的代码如下:

    3.3    API文档

    3.3.1 Dom Utility

    3.3.1.1DomUtil

    l  create(a,b,c?)

    创建一个元素,设置该元素的类名,并且附加元素在末尾位置;

    l   

     

    第四章          FAQ

    4.1    隐藏左下角Leaflet

    在leaflet.js文件中,存在如下代码段:

    L.Control.Attribution=L.Control.extend({

        options:{

           position:’bottomright’,

           prefix:’ <a href="http://leafletjs.com"title="A JS library for interactive maps">Leaflet</a>’

    },

    });

    故此,在构造map控件时,设置options的属性attributionControl为false即可。

    4.2    隐藏默认的缩放工具

    在构造map控件时,设置options的属性zoomControl为false即可。

    4.3    自定义缩放工具

    已完成:

    1.      自定义级别

    2.      选择切换级别,更新缩放工具条级别显示状态

    3.      单击更新缩放工具条级别显示状态

     

    待完成:

    1.      拖放级别,更新缩放工具条级别显示状态

    4.4    引用Leaflet插件

     

    第五章          拓展

    5.1    常用坐标

    地名

    经纬坐标

    备注

    北京天安门

    北纬395427秒,东经1162317

    北京标准中心坐标点

    重庆

    北纬29度34分,东经106度33分

    重庆标准中心坐标点

     

    5.2    OpenStreetMap

    简称OSM,是一个网上地图协作计划,目标是创造一个内容自由且能让所有人编辑的世界地图。这个地图和百度百科,维基百科一样是全民地图。

    成立于2004年7月,并于2006年4月设立OpenStreetMap基金会,鼓励自由地理数据的发展和输出。

    5.3    Mapbox

    是一个可以免费创建并定制个性化地图的网站。创立3年没要投资人一分钱,没有销售人员。使用教程参考http://blog.csdn.net/jwdstef/article/details/38760111。类似的网站还有ArcGISOnline,CartoDB,地图汇,Google Fusion Tables。

    5.3.1 创建自己的地图

    首先申请一个账号,创建完成后,可以看到Projects和Data两个选项。在Projects中可以看到自己的Projects列表。点击+Create project进入设计地图界面,可以看到Style、Data和Project三个主要的设计标签页,另外还有个人主页、搜索和Saved选项,下面主要介绍一下Style、Data和Project三个标签页。

    Style

    Color

    通过调色板设置不同要素(街道、建筑、绿化区、水体、陆地)的颜色。也可以通过MapBox预先定义的配色方案来设置自己地图的配色

     

    Baselayer

    设置地图类型,一共三种,普通电子地图、地形图、卫星影像

     

    Language

    设置主机语言,四个可选项,本地化、英语、法语、西班牙语

     

    Data

    Browse

    浏览地图以及要素和图层

     

    Marker

    制作点状要素

     

    Line

    制作线状要素

     

    Polygon

    制作面状要素

     

    Menu

    features和layers列表,管理要素和图层

     

    Project

    Info

    获取要素的JSON和KML格式数据;MapID(需要配合Mapbox JavaScript API使用);分享链接和嵌入网页的链接

     

    Settings

    设置工程的名称和描述

     

    Advanced

    功能包括:保存当前地图位置;开关工程的公共API

     

    5.3.2 共享地图

    l  Map ID:需要配合Mapbox developer tools使用。

    l  Share:直接生成一个网页链接,通过链接直接访问制作的地图。

     

     

    5.4    WMS

    即Web Map Service,是一种通过专业GIS软件发布地图的流行方式,利用具有地理空间位置信息的数据制作地图,能够根据用户的请求返回相应的地图(包括PNG,GIF,JPEG等栅格形式或者SVG和WEB CGM等矢量形式)。有三个重要操作:GetCapabilities,GetMap,GetFeatureinfo。

    GetCapabilities返回服务级元数据;GetMap返回一个地图影像;GetFeatureinfo返回显示在地图上的某些特殊要素的信息。

     

    5.5    TMS

    即Tile Map Service的缩写,是相对于地图切片的标准,《国家地理信息公共服务平台电子地图数据规范》(试行稿-20100730版)第6.4章节规定了地图瓦片数据的组织方式,即采用数据集、层、行目录结构描述,目录的组织逻辑如下:

     

    地图切片标准包括TMS和WMTS,TMS和WMTS差异主要在于协议、瓦片组织方式。

     

    TMS是纯RESTful的,而WMTS可以有KVP、SOAP、RESTful。

     

     

     

    展开全文
  • vue2Leaflet使用 Vue2Leaflet-master 的demo

    千次阅读 2019-04-20 17:49:00
    地址:https://github.com/KoRiGaN/Vue2Leaflet 下载后可以运行里面的例子,在examples文件夹内,该文件夹本身就是一个完整的项目 然后cmd到该路径, cnpm install 报错如下 解决方法:cnpm install ...
  • leaflet 使用 wmts

    千次阅读 2017-03-23 11:05:04
    leaflet 使用 wmts一直做地图方面的页面开发,这次接到一个新需求,使用leaflet对接公司的WMTS服务。 开始干活,查看leaflet文档 http://leafletjs.com/examples/wms/wms.html,原生只支持WMS接入。于是想到了必然会...
  • 下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/118890846
  • leaflet 加载百度自定义地图,支持自定义百度地图样式
  • //使用自定义icon // point:{//layername // // weight: 1, // icon: myIcon//自定义icon // }, //点 //方法一 point :{ //layername weight: 2 , color : 'red' , opacity: 1 , ...
  • leaflet加载百度地图瓦片图片,坐标已根据网上提供的方法进行了较正,并调用百度web服务API获取步行线路规划进行展示,可拖拽起始坐标点进行线路更新
  • Leaflet在渲染线或面要素的时候需要传入一个style,在官方文档里说是需要一个Path Options,其实指向的是L.svg()这个抽象构的造函数,所以不能实例化,那怎么办呢? 如果不给其传参数,则它的效果是默认的蓝色 let ...
  • leaflet使用以及在react中的使用

    千次阅读 2019-07-22 14:07:49
    首先,引入leaflet.js和leaflet.css <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLRE...
  • Vue2Leaflet 一个Leaflet地图的Vue2组件
  • Leaflet集成Echarts示例

    2018-12-08 16:06:22
    该资源包括修改后的Echarts 4.2.0 版本的源代码,Leaflet 1.3.4版本源代码,基于Leaflet扩展的代码以及一个散点图demo
  • Leaflet.canvasdraw 在 2d 画布层上绘图(用于栅格)
  • 基于Leaflet实现路径轨迹回放功能,另外对Leaflet.Marker类进行扩展,支持设置图标旋转角度
  • leaflet与瓦片地图 leaflet是开源的JavaScript库,用于构建Web地图应用。 其需要提供一个瓦片地图服务器用于动态加载当前展示的地图背景页。 瓦片地图是由于其根据缩放等级相当于一级一级细化,上一级的一张图片...
  • leaflet使用draw插件测量距离和面积

    千次阅读 2020-11-18 15:56:05
    官网在线例子 draw插件在线预览 我的测量预览图: ...初始化使用插件 //添加画图的提示信息 L.drawLocal.draw.handlers.polyline = { tooltip: { start: "点击地图开始画线", cont: "继续选择",
  • leaflet使用笔记&报错

    2019-07-22 11:41:37
    leaflet默认打开一个popup会关闭另一个,设置autoClose: false即可默认打开多个;同时还可以设置closeOnClick:false (2)显示多个marker 直接多次添加marker即可。如果看不到多个可能是各个点之间的距离太大...
  • Leaflet使用自定义的图标

    千次阅读 2019-09-06 22:20:19
    1、定义icon类对象。 var myIcon = L.icon({ iconUrl: 'img/location.gif', // jpg png gif都可以 iconSize: [25, 38] }); 2、根据Icon类对象创建Marker,添加到map里。...var marker = L.markerEx(L.latLng(-37....
  • 在plugins目录下添加文件:vue-leaflet.js import Vue from "vue"; import { LMap, LTileLayer, LMarker } from "vue2-leaflet"; import "leaflet/dist/leaflet.css"; // 注册需要用到的组件 Vue.component("l-map...
  • 通过Leaflet加载本地下载的谷歌离线地图瓦片,在离线地图的基础上加载热力图。
  • 解决思路: 1.在瓦片地址前加上内网ip和端口 2.在可同时访问内网和外网的机器上部署nginx ...Leaflet使用Nginx代理实现内网访问百度地图瓦片</title> <link rel="stylesheet" href="js/leaf
  • leaflet1.3.1版本引用了leaflet-tilelayer-wmts.js做了修改可加载天地图WMTS影像(EPSG:4326)Demo
  • <code>//地图英文转中文  var language = new MapboxLanguage({defaultLanguage: "zh"});  leafletMap.addControl(language);</code></pre> 这个方法没有用  </p>
  • 如果您想在任何Leaflet应用程序中显示Esri服务,我们要求您遵守我们的使用条款和出处规定。 目录 入门 演示版 例子 API参考 其他插件 经常问的问题 问题 依存关系 更深入 开发说明 版本控制 贡献 条款 信用 执照 ...
  • @asymmetrik/leaflet-d3 单张D3提供的集合基于可视化插件。 现在支持 D3 v5 目录 安装 通过 npm 安装包及其对等依赖项: npm install d3 d3-hexbin leaflet 如果你想不使用npm直接抓取源文件,或者你想运行示例,...
  • leaflet加载百度、高德、谷歌、天地图等在线地图
  • vue使用leafletvue使用leaflet vue使用leaflet npm安装leaflet依赖 npm install leaflet 新建vue页面,在页面中局部使用leaflet(不在main.js中设置全局使用) <template> <div class="leaflet"> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,898
精华内容 3,159
关键字:

leaflet使用