leaflet api

您好

首先Leaflet是用于移动友好交互图的领先的开源JavaScript库,具用法你可以参考leaflet.js官网里面API和教程和视频以及语法说明

leaflet是不能直接调起腾讯地图:原因是因为腾讯地图的瓦片图规则和谷歌之类的不一样,如果要在leaflet中使用腾讯地图或者任何规则不统一的地图做底图,必须专门对L.TileLayer写一个扩展才能实现,重写getTileUrl函数。

瓦片图规则:你可以看“网页链接 “腾讯地图瓦片与Google地图瓦片区别和联系”这是瓦片规则的博客

默认的getTileUrl方法是这样的,比较简单
getTileUrl: function (tilePoint) {return L.Util.template(this._url, L.extend({
    s: this._getSubdomain(tilePoint),
    z: tilePoint.z,
    x: tilePoint.x,
    y: tilePoint.y
    }, this.options));
},
修改成了这样!主要是多执行一个通过选项传入的自定义函数getUrlArgs,计算出不规则的瓦片x,y,z值
L.TileLayer.WebDogTileLayer = L.TileLayer.extend({
     getTileUrl: function (tilePoint) {
        var urlArgs,
            getUrlArgs = this.options.getUrlArgs;

        if (getUrlArgs) {
            var urlArgs = getUrlArgs(tilePoint);
        } else {
            urlArgs = {
                z: tilePoint.z,
                x: tilePoint.x,
                y: tilePoint.y
            };
        }

        return L.Util.template(this._url, L.extend(urlArgs, this.options, {s: this._getSubdomain(tilePoint)}));
    }
});

L.tileLayer.webdogTileLayer = function (url, options) {
    return new L.TileLayer.WebDogTileLayer(url, options);
};

如何调用

var url = ,
    options = {
        subdomain: 012,
        getUrlArgs: function (tilePoint) {
            return {
                z: tilePoint.z,
                x: tilePoint.x,
                y: Math.pow(2, tilePoint.z) - 1 - tilePoint.y
            };
        }        
    };L.tileLayer.webdogTileLayer(url, options).addTo(this);

http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0这个url是腾讯默认的地图url地址模版。其他腾讯地图的底图样式在还是挺丰富了美观,这也是我为什么选用腾讯地图的原因,如果想调用其他样式的底图,则需要使用下面这些url:

地形图:http://p{s}.map.gtimg.com/demTiles/{z}/{x16}/{y16}/{x}_{y}.jpg

卫星图:http://p{s}.map.gtimg.com/sateTiles/{z}/{x16}/{y16}/{x}_{y}.jpg

如果你需要在地形图或卫星图上同时显示街道,你需要同时添加两个底图图层(TileLayer),一个是上面的地形图或卫星图,另外一个是一种png格式的只包含道路和文字透明底图:http://rt{s}.map.gtimg.com/realtimerender/?z={z}&x={x}&y={y}&type=vector&style=1&v=1.1.1,把这两种底图叠加,就形成了带街道的地形或卫星图。

喜欢阅读
  • 都市无敌邪帝

    都市无敌邪帝

    一代邪神做上门女婿,看谁瞧不起。

  • 腹黑大少请排队

    腹黑大少请排队

    一觉醒来,整个世界仿佛都变了。她爱的未婚夫,变成了贪财的小人。她尊重的父亲,不惜用她当做筹码。她温柔的继母,口蜜腹剑捧杀她。她善良的姐姐,狠毒算计。这一切,似乎都和一个男人有关,他改变了她的生活,让她看透了这一切。“沈郁,你太过分了。”“过分嘛?还有更过分的事呢。”“你……你为什么脱衣服?”“当然是做更过分的事。”

  • 如果此生,可以不再爱你

    如果此生,可以不再爱你

    结婚三年,季清川却说,每次碰她都觉得很恶心.......

  • 近身强兵

    近身强兵

    他是华夏的超级兵王,因为兄弟他隐退江湖,也因为兄弟他重回都市。他从不主动找女人,身边却从不缺女人;他从不主动敛财,财富却像洪水一般将他包围;他从不想着变强,却一次又一次的突破自己

  • 八零福妻有点辣

    八零福妻有点辣

    重生之后,如凤涅槃,自以为已经知晓一切,可以呼风唤雨,却偏偏遇到了他,导演,剧本好像不对了啊......

  • 绝狂护卫

    绝狂护卫

    身份神秘的猪脚混迹美女如云的公司,从此艳福不断。上班有清纯实习生帮忙打卡,中午吃饭有美女上司的爱心便当,下班了还有美女总裁转车接送……萝莉,明星,空姐,性感尤物粉墨登场,暧昧不断,爆笑不断……

  • 横空夺爱:亿万冷少宠甜妻

    横空夺爱:亿万冷少宠甜妻

    我爱他,可从他跟着他妈出现在我家的那一刻起我就恨透了他。我攻击他陷害他不遗余力地伤害他。而他也默不作声地夺走了原本属于我的一切,我的生活,我的家庭我的父爱本该由我继承的财产甚至是我?最后,他想要夺走的竟然是我的儿子!次奥,是可忍孰不可忍,老虎不发威你当姐是hellokitty?等着,看姐如何征服你!

  • 狼战神卫

    狼战神卫

    五年前,他被赶出家门,沦落上门女婿!五年后,他王者归来,改变这浑浊的人世间。

  • 猜你喜欢
  • 分享文字来自服务器api
  • 掌上api
  • leaflet什么意思中文
  • api令牌
  • leaflet怎么读
  • leaflet测试
  • api认证
  • api是什么
  • leaflet vue
  • api-ms-win-crt-heap-l1-1-0.dll
  • 热门推荐
  • 夺命开学礼完整版
  • timeview ubuntu
  • 元宵节快乐图片
  • 三星笔记本530u3c
  • deserve歌词
  • 冥婚小说小丽
  • lol流浪技能加点
  • 微软售后服务电话
  • 兰州大学mba历年分数线
  • 辣手神探国语下载
  • xmlns local
  • 龚玥父亲歌曲原唱简谱
  • 渔乐吧注册送50元捕鱼
  • 怀孕宫颈息肉出血特点
  • 日服手游 翻墙
  • 纳斯口红mona真假
  • idea web项目 访问404
  • 素描简单一点的花
  • 汽车故障码三菱 P0223
  • 你的妻子叫你什么
  • All Right Reserved 满意通