Android高德地圖貼合圖片完成手繪地圖展示

Rx_Re發表於2018-12-17
Android地圖

上週剛接到一個需求，產品覺得高德的預設地圖樣式不好看，想要一個手繪地圖貼合上去，看著美觀很多，然而我內心確是牴觸的，無法 ，產品講了，只能先回答試試看看。接下拉就是一搏谷歌搜尋。

1.使用web版本的高德地圖，然後和native互動完成

web端有現成的方案，直接貼合自定義圖片

var imageLayer = new AMap.ImageLayer({
        url: 'gulangyu.png',
        bounds: new AMap.Bounds(
         [118.057708, 24.436293],   //左下角
         [118.077706, 24.454069]    //右上角
         ),
        zooms: [15, 18]
    });
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [118.067042,24.444673],
        zoom: 15,
        layers: [
            new AMap.TileLayer(),
            imageLayer
        ]
    });
複製程式碼

上面就可以直接貼合手繪地圖，需要四角定位，然後直接把圖片的圖層貼合上去。

考慮到效能問題以及後續的web和native的互動，在低端手機顯示比較卡頓，先廢棄此方案。

[web端的具體貼合可以參考]www.cnblogs.com/milkmap/p/6…

2.使用Marker點貼合圖片

此方案我想想就覺得扯淡，Marker本身就是做標識用的，要貼合在地圖上面，缺點一堆的，點數過多，圖片記憶體佔用大，無法縮放等，後面我直接拒絕

3.使用瓦片圖TileOverlay

通過檢視高德的文件

image
顯示在基本地圖上面的一個圖層，貌似可以完成貼合手繪地圖

然後這個需要後臺配合提供線上的瓦片圖服務 具體程式碼如下

 private void initTile() {
    //後臺的瓦片圖路徑
    final String tileUrl = "http://******/mapImg/tiles/";
    TileOverlayOptions tileOverlayOptions =
        new TileOverlayOptions().tileProvider(new UrlTileProvider(256, 256) {

          @Override
          public URL getTileUrl(int x, int y, int zoom) {
            try {
              // x橫座標 ，y縱座標，zoom縮放比
              String url = tileUrl + zoom+ "/"+x + "_" + y + ".png";
              LogUtils.i(url);
              return new URL(url);
            } catch (Exception e) {
              e.printStackTrace();
            }
            return null;
          }
        });
    tileOverlayOptions.diskCacheEnabled(true)
        //新增快取路徑
        .diskCacheDir("/storage/emulated/0/amap/OMCcache")
        //瓦片圖數量
        .diskCacheSize(100000)
        .memoryCacheEnabled(true)
        .memCacheSize(100000)
        //顯示的優先順序
        .zIndex(-9999);
    //新增到地圖
    TileOverlay mtileOverlay = aMap.addTileOverlay(tileOverlayOptions);
  }
複製程式碼

只需要返回後臺的圖片url路徑即可完成瓦片圖載入,其中x,y都是根據zoom的縮放比計算的，而且獲取圖片，要注意對應的引數，還有一個比較重要的是zIndex的設定，如果還有路徑規劃類似的Overlay需要設定zIndex的大小，以達到顯示與手繪地圖圖層之上

相關文章