精华内容
下载资源
问答
  • leaflet 使用 wmts

    千次阅读 2017-03-23 11:05:04
    leaflet 使用 wmts一直做地图方面的页面开发,这次接到一个新需求,使用leaflet对接公司的WMTS服务。 开始干活,查看leaflet文档 http://leafletjs.com/examples/wms/wms.html,原生只支持WMS接入。于是想到了必然会...

    leaflet 使用 wmts

    一直做地图方面的页面开发,这次接到一个新需求,使用leaflet对接公司的WMTS服务。
    开始干活,查看leaflet文档
    

    http://leafletjs.com/examples/wms/wms.html,原生只支持WMS接入。于是想到了必然会有大牛添加leaflet编写支持WMTS的插件,在Plugins去找,果然:
    leaflet.TileLayer.WMTS

    根据插件demo,按需求写入参数
    

    参数设置
    layer
    必传,服务器约定的wmts图层名;
    TileMatrixSet
    比例尺集,必须与后台对应;
    format服务器提供的瓦片图格式;

    对应好参数之后开始接入,结果发现图片获取不到,接口**400**,查询后台文档之后发现是链接生成规则不对,必然涉及到
    

    tilelayer-wmts-src.js源文件
    发现tilelayer-wmts-src.js的url生成规则是拼接参数的方式:

    错误原因

    而公司需要以链接的方式传参,按照适合公司服务器的url做出修改:
    修改后
    调试页面,接口返回参数错误,原因是服务器坐标系与leaflet使用的坐标系不匹配。修改leaflet坐标系为EPSG:4326(默认为EPSG:3857)
    坐标系

    var map = L.map('allmap',{
      minZoom: 4,
      maxZoom: 13,
      crs: L.CRS.EPSG4326
    }).setView([48.505, 3.09], 13);
    有一点需要注意的是,tilelayer-wmts-src.js默认支持也是ERPS:3857,所以插件中默认的matrixIds参数的topLeftCorner也只支持EPSG:3857。需要自己提供对应的参数:
    

    matrixIds

    其实就是使用的坐标系规定的地图边界左上角点的坐标。
    最后使用如下
    
    var url = 'wmts服务器地址';
    
    var matrixIds = [];
    for (var i=0; i<14; ++i) {
      matrixIds[i] = {
        identifier:1+i,
        topLeftCorner : new L.LatLng(90,-180)
      };
    }
    
    
    var ign = new L.TileLayer.WMTS( url ,
                                    {
                                      name: "",
                                      layer: "规定的图层名",
                                      style: "使用样式",
                                      tilematrixset: "比例尺集",
                                      format: "image/png",
                                      matrixIds: matrixIds
                                    }
                                  );
    var map = L.map('allmap',{
      minZoom: 4,
      maxZoom: 13,
      crs: L.CRS.EPSG4326
    }).setView([48.505, 3.09], 13);
    
    L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
    
    map.addLayer(ign);

    成功接入WMTS服务:
    成功后

    展开全文
  • 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>
    

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

    展开全文
  • 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使用中经验总结标签:leaflet1.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参数里添加

    批注 2020-07-14 154759.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);

    }

    }

    }

    }

    [图片上传失败...(image-fac0aa-1594712751210)]

    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

    var rawCoords1 = arcs[i].geometry.coordinates;

    for(var j=0;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官网下载的官方案例会引入很多文件,一般的图表,像饼图、条形图、折线图等等,只需要引入一个文件,即:

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

    展开全文
  • Leaflet使用介绍

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

    2019-10-29 15:49:07
    crs(坐标参考系统):使用的坐标系,当你不确定坐标系是什么时请不要更改。 Interaction Options(交互操作) dragging(拖动):决定地图是否可被鼠标或触摸拖动。 touchZoom(触摸缩放):决定地图是否可被两...
  • 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...
  • leaflet使用笔记&报错

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

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

    2016-09-02 10:59:48
    1、同时使用地图的setView方法和panBy方法时,如果setView没对地图造成缩放,那么panBy功能可以正常实现,如果造成了缩放,则需要等缩放结束后再进行panBy,否则panBy会失效。
  • 官网在线例子 draw插件在线预览 我的测量预览图: ...初始化使用插件 //添加画图的提示信息 L.drawLocal.draw.handlers.polyline = { tooltip: { start: "点击地图开始画线", cont: "继续选择",
  • 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....
  • 使用leaflet官方的js和css 点数据准备   正式开始: 发布gp工具的流程不说了直接上GP截图 在发布GP服务的时候需要注意几点 为了保证GP的插值是在我们所选的范围内执行,需要设置它的插值范围,右击IDW选择...
  • 在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使用vector tiles样式设置

    千次阅读 2017-03-28 13:40:44
    //使用自定义icon // point:{//layername // // weight: 1, // icon: myIcon//自定义icon // }, //点 //方法一 point :{ //layername weight: 2 , color : 'red' , opacity: 1 , ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 929
精华内容 371
关键字:

leaflet使用