如何製作手繪地圖？如何將圖片圖層精確地對準在地圖上？

酸奶小妹發表於2017-02-22
地圖

最近大家常常在問，如何製作鼓浪嶼手繪地圖，如何將氣象圖層疊加在高德地圖上啊？

其實地圖上的研發量很小，幾行程式碼就可以搞定。

關鍵是在圖片繪製上，有較高的要求。

下面就用簡單粗暴的方法來實現，如有不妥之處，請大家輕噴。

 

確定圖片繪製範圍

以鼓浪嶼地圖為例，開啟框選取點工具：http://zhaoziang.com/amap/getBounds.htm

獲取到左下角和右上角的座標，這個就是圖片的顯示範圍。

如下圖，3是左下角，1是右上角。

bounds: new AMap.Bounds(
 [118.057708, 24.436293],   //左下角
 [118.077706, 24.454069]    //右上角
 )

 

 

製作圖片

開啟Photoshop，或者您有別的製圖軟體也可以，開始製作手繪地圖吧。

圖片的創作您可以任意發揮，每個人都有自己的特色。這裡對製作圖片就不贅述了。

請注意，繪製的圖片，一定和您框選的範圍一致！！

 

繪製過程中，保證繪製內容和底圖高度重合！

這裡一定要保證圖片重合，後期無法通過糾偏、校準等方式對齊圖片！一定注意！

 

繪製完畢後，儲存圖片。

請注意，生成的圖片，一定和您框選的範圍一致！！

也就是說，如果有白邊，也需要保留。

 

 

將圖片疊加到高德地圖上

程式碼很簡單啊，建立地圖，建立圖片圖層，就好了啊。

    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
        ]
    });

 

快來體驗吧~

http://zhaoziang.com/amap/gulangyu.htm

 

 

 

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

若您還有其他問題，就去提工單吧

http://lbs.amap.com/dev/ticket#/faq

 

相關文章