百度地图添加自定义图层

开源 专栏收录该内容
4 篇文章 0 订阅


百度地图对自定义图层提到的很少,只说到图片的叠加。但是关于如何切片处理都没有提到。论坛中只放出来个图片的切片工具。但是GIS上对分层显示的需求导致这种方式并不适合。那就换个思路去处理,自己切出符合百度瓦片规则的切片。

一、先学习下以下网址,了解下切片原理及定义。

http://www.cnblogs.com/jz1108/archive/2011/07/02/2095376.html

http://blog.csdn.net/mygisforum/article/details/8162751


二、百度的官方sample

    var tileLayer = new BMap.TileLayer();
    tileLayer.getTilesUrl = function (tileCoord, zoom) {
        var x = tileCoord.x;
        var y = tileCoord.y;

       return "http://developer.baidu.com/map/jsdemo/img/border.png";
    }
    map.addTileLayer(tileLayer);


三、自定义图片请求地址

    var PointConvert = new BaiduPointConvert(map);//百度坐标转换类
    var lonlat_0 = PointConvert.tileToLngLat(tileCoord);//百度区块左下角经纬度
    var tileCoord2 = new Object();
    tileCoord2.x = x + 1;
    tileCoord2.y = y + 1;
    var lonlat2_0 = PointConvert.tileToLngLat(tileCoord2);//百度区块右下角经纬度
    var lonlat_1=BD2GCJ(lonlat_0.lng, lonlat_0.lat);//百度转gcj
    var lonlat2_1 = BD2GCJ(lonlat2_0.lng, lonlat2_0.lat);//百度转gcj
    var lonlat = GCJ2WGS(lonlat_1.lng, lonlat_1.lat);//gcj转wgs
    var lonlat2 = GCJ2WGS(lonlat2_1.lng, lonlat2_1.lat);//gcj转wgs
    var worldCoordinate14 = lonLat2Mercator(lonlat);//转平面坐标
    var worldCoordinate24 = lonLat2Mercator(lonlat2);//转平面坐标
    var url= "*/MapServer/export?bbox=" + worldCoordinate14.x+ "%2C" + worldCoordinate14.y + "%2C" 
    + worldCoordinate24.x + "%2C" + worldCoordinate24.y
    +"&bboxSR=102100&layers=&layerDefs=&size=256%2C256&imageSR=102100&format=png&transparent=true
   &dpi=&time=&layerTimeOptions=&dynamicLayers=&gdbVersion=&mapScale=&f=image";
<pre name="code" class="javascript">    return url;//图片 通过arcgis server返回,后期可以把图片下载下来后就抛弃server,然后以瓦片x,y,z命名

 

BaiduPointConvert类

var BaiduPointConvert=function(map){
    this.map=map;


    //图块坐标转为球面坐标
    this.tileToLngLat=function(pixel){
        return this.worldToLngLat(this.pixelToWorld(this.tileToPixel(pixel)));
    }
    //球面坐标转为图块坐标
    this.lngLatToTile=function(lngLat){
        return this.pixelToTile(this.worldToPixel(this.lngLatToWorld(lngLat)));
    }

    //像素坐标转为球面坐标
    this.pixelToLngLat=function(pixel){
        return this.worldToLngLat(this.pixelToWorld(pixel));
    }
    //球面坐标转为像素坐标
    this.lngLatToPixel=function(lngLat){
        return this.worldToPixel(this.lngLatToWorld(lngLat));
    }
    //图块坐标转为像素坐标
    this.tileToPixel=function(pixel){
        return new BMap.Pixel(pixel.x * 256,
            pixel.y * 256);
    }
    //像素坐标转为平面坐标
    this.pixelToWorld=function(pixel){
        var zoom=this.map.getZoom();
        return new BMap.Pixel(pixel.x / Math.pow(2, zoom- 18),
            pixel.y / Math.pow(2, zoom - 18));
    }
    //平面坐标转为球面坐标
    this.worldToLngLat=function(pixel){
        var projection = this.map.getMapType().getProjection();
        return projection.pointToLngLat(pixel)
    }

    //像素坐标转为图块坐标
    this.pixelToTile=function(pixel){
        return new BMap.Pixel(pixel.x / 256,
            pixel.y / 256);
    }
    //平面坐标转为像素坐标
    this.worldToPixel=function(pixel){
        var zoom=this.map.getZoom();
        return new BMap.Pixel(pixel.x * Math.pow(2, zoom - 18),
            pixel.y * Math.pow(2, zoom - 18));
    }
    //球面坐标转为平面坐标
    this.lngLatToWorld=function(lngLat){
        var projection = this.map.getMapType().getProjection();
        return projection.lngLatToPoint(lngLat)
    }


}


 
四、坐标转换参考 

http://api.zdoz.net/

https://github.com/JackZhouCn/JZLocationConverter

http://252190122.blog.163.com/blog/static/43448176201282110363982/

https://on4wp7.codeplex.com/SourceControl/changeset/view/21483#353936


五、问题

这种方式可以将自定义矢量图层配色后切片方式叠加,但是有图片错层的问题,还需要改进图片请求过程。

不能将google这种已经切好的图片叠加在百度地图上。



  • 2
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值