zoukankan      html  css  js  c++  java
  • 百度地图API:利用瓦片生成工具,自定义背景图片

           参考酸奶小妹的博文《【百度地图API】如何制作一张魔兽地图!!——CS地图也可以,哈哈哈》 (http://www.cnblogs.com/milkmap/archive/2011/05/27/2060021.html)。

           及博文 《百度地图:新的瓦片生成工具来了》 链接:http://blog.csdn.net/bq_cui/article/details/9396703,开发的工具下载地址:http://blog.csdn.net/bq_cui/article/details/47372005

    一、制作地图的准备工作

      其实,你只需要准备一些地图的瓦片图,就可以了。

      用切片工具,把一张完整的图片(最好大一些,清楚一些),切成小片,可使用 TileCutter工具。

    二、了解百度地图API的地图图层接口

    构造函数 描述
    TileLayer([opts:TileLayerOptions]) 创建一个地图图层实例。

         接口地址:http://openapi.baidu.com/map/classReference.html#anchor6_TileLayer

    使用这个接口,就可以将切好的地图瓦片铺在原有的百度地图上。 

    复制代码
    var tileLayer = new BMap.TileLayer();
    tileLayer.getTilesUrl = function(tileCoord, zoom) {
    var x = tileCoord.x;
    var y = tileCoord.y;
    var url = 'images/tiles/' + zoom + '/tile' + x + '_' + y + '.png';
    return url;
    }
    复制代码

    三、限制地图的显示级别

      如果,你只切了1-4级的地图,那么你的魔兽地图应该只能显示1-4级。

      所以,要对map的显示做一个限制。看下面源代码第一行。

      还需要规定出自定义地图类型,看源代码第二行。

      第三行,添加的鱼骨控件,只会显示1-4级哟~因为在第一行控制了minZoom和maxZoom。

    var MyMap = new BMap.MapType('MyMap', tileLayer, {minZoom: 1, maxZoom: 4});
    var map = new BMap.Map('container', {mapType: MyMap});
    map.addControl(new BMap.NavigationControl());

    ----------------------------------------------------------------------------------

    我是采用的

    1.利用TileCutter工具将原始图片切为1-5级,原始图片所在级别为2级。

    2.直接修改了离线API的js

    改为:Uc.getTilesUrl=function(a,b,c){var x=a.x,y=a.y,e=1,z=b;return "tiles/"+z+"/"+x+"/tile"+x+"_"+y+".png";};

    3.替换瓦片地图文件夹images/tiles/XXX

  • 相关阅读:
    数据库mysql的基本操作
    多进程多线程与进程池线程池及协程
    面对对象的属性和方法
    Python中的编码及操作文件
    通过pymysql操作mysql数据库
    Spring注入
    Mybatis标签及使用1
    全局配置文件说明
    类方法和对象方法的区别
    Mybatis
  • 原文地址:https://www.cnblogs.com/limeiky/p/5818444.html
Copyright © 2011-2022 走看看