青青草国产在线视频-在线观看污污视频-国产精品免费大片-成人靠逼视频-天天躁日日躁狠狠久久-国产三级做爰高清在线-欧美日韩国产精品-中国毛片基地-免费在线a-国产大片中文字幕在线观看-97视频久久-欧美视频精品在线观看-中文字幕一区av-日韩av一区二区三区四区-久久夜夜夜-国产乱码精品一区二区三区中文-亚欧在线视频

前面介紹了《景區(qū)手繪地圖（電子地圖、智慧導(dǎo)覽系統(tǒng)）如何制作》以及《景區(qū)手繪地圖的繪制流程》，接下來(lái)介紹一些手繪地圖制作的關(guān)鍵點(diǎn)。

作者：輕輕的煙霧（微信：z281099678）

手繪地圖最關(guān)鍵的一點(diǎn)，就是把手繪地圖準(zhǔn)確的覆蓋到地圖平臺(tái)。

手繪地圖體驗(yàn)

一、地圖開(kāi)放平臺(tái)接口

這是首要的關(guān)鍵點(diǎn)。

通過(guò)前面的介紹，我們知道，手繪地圖是基于地圖平臺(tái)針對(duì)某一區(qū)域進(jìn)行美化及手繪，從而生產(chǎn)一張精美的手繪圖片文件。但這個(gè)文件并不能拿來(lái)直接使用，而必須要覆蓋到地圖平臺(tái)之上才可發(fā)揮其價(jià)值。

要實(shí)現(xiàn)這個(gè)目的，我先簡(jiǎn)單介紹幾個(gè)概念（這些概念在前面的文章都有比較詳細(xì)的介紹，這里只做簡(jiǎn)單的回顧）：

1.瓦片圖

瓦片圖是256像素的正方形圖片，整個(gè)地圖都是由瓦片圖構(gòu)成的。用瓦片圖原因是，可按需要加載（按屏幕顯示范圍內(nèi)的區(qū)域加載），解決的問(wèn)題是，服務(wù)器及客戶端設(shè)備內(nèi)存問(wèn)題，以及網(wǎng)絡(luò)流量問(wèn)題。

2.地圖開(kāi)放平臺(tái)

高德、百度、騰訊、谷歌等等地圖平臺(tái)，都有開(kāi)放的接口。通過(guò)這些開(kāi)放接口，便可實(shí)現(xiàn)讓手繪圖覆蓋到地圖平臺(tái)上。

高德地圖demo

二、手繪地圖覆蓋到地圖平臺(tái)的方式

每個(gè)地圖開(kāi)放平臺(tái)都提供了多種把手繪地圖覆蓋到平臺(tái)的實(shí)現(xiàn)方式。

此處以高德地圖為例說(shuō)明。高德地圖一共提供了這么多接口，分別都可以實(shí)現(xiàn)自定義圖層覆蓋到地圖平臺(tái)：

AMap.TileLayer.Flexible AMap.ImageLayer AMap.CanvasLayer AMap.VideoLayer AMap.CustomLayer

根據(jù)我的經(jīng)驗(yàn)，在手繪地圖覆蓋這個(gè)場(chǎng)景，比較適用的是：

AMap.TileLayer.Flexible AMap.ImageLayer

這兩個(gè)接口，分別對(duì)應(yīng)上文描述的“瓦片圖實(shí)現(xiàn)地圖”及“一整張圖實(shí)現(xiàn)地圖”。ImageLayer這個(gè)接口，可以實(shí)現(xiàn)把整張手繪地圖覆蓋到地圖平臺(tái)上。事實(shí)上，依我的了解，業(yè)內(nèi)也有采取這個(gè)解決方案的系統(tǒng)。但是就個(gè)人而言，我更推薦接口TileLayer.Flexible，此接口就是采取瓦片圖的方案來(lái)把手繪地圖覆蓋到地圖平臺(tái)。

ImageLayer接口代碼如下所示（高德官方代碼），由其圖片參數(shù)可見(jiàn)，是一張整圖：

 
var imageLayer = new AMap.ImageLayer({ url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg', bounds: new AMap.Bounds( [116.327911, 39.939229], [116.342659, 39.946275] ), zooms: [15, 18] });

TileLayer.Flexible接口代碼如下所示：

 
var tileLayer = new AMap.TileLayer.Flexible({ cacheSize: 30, zIndex: 200, createTile: function (x, y, zoom, success, fail) { var imagePath = tileHost + '/uploades/map/" + zoom + "/tile" + x + "_" + y + 'amap.png'; var img = document.createElement('img'); img.onload = function () { success(img); }; img.crossOrigin = "anonymous"; img.onerror = function () { fail(); }; img.src = imagePath; success(img); } });

此接口有createTile方法，開(kāi)放了3個(gè)參數(shù)，就是至關(guān)重要的地圖層級(jí)zoom，以及瓦片圖的坐標(biāo)x/y。通過(guò)這3個(gè)參數(shù)，我們就可以把整張手繪地圖切為瓦片圖來(lái)覆蓋到地圖平臺(tái)之上，達(dá)到用戶使用時(shí)也按需加載的效果。

三個(gè)參數(shù)決定瓦片圖

三、更復(fù)雜和完善的手繪地圖覆蓋的效果

高德地圖的TileLayer.Flexible接口還有一個(gè)參數(shù)，便是success這個(gè)函數(shù)。在createTile方法里，我們其實(shí)還可以自定義更加復(fù)雜的內(nèi)容，然后傳入success這個(gè)函數(shù)，高德地圖會(huì)自動(dòng)把傳入的對(duì)象渲染到瓦片里。

根據(jù)這個(gè)原理，我們可以實(shí)現(xiàn)更加復(fù)雜的需求，如：因?yàn)閲?guó)內(nèi)無(wú)法正常訪問(wèn)谷歌地圖，而高德、百度等地圖在國(guó)外訪問(wèn)網(wǎng)絡(luò)延遲嚴(yán)重且地圖數(shù)據(jù)欠缺，所以對(duì)于國(guó)外的區(qū)域或景區(qū)這種場(chǎng)景，我們就可以通過(guò)此接口實(shí)現(xiàn)全球可訪問(wèn)的手繪地圖。

具體的實(shí)現(xiàn)方式如下：

 
var tileLayer = new AMap.TileLayer.Flexible({ cacheSize: 30, zIndex: 200, createTile: function (x, y, zoom, success, fail) { var div = document.createElement('div'); var img2 = document.createElement('img'); img2.setAttribute("crossOrigin", 'Anonymous'); img2.onload = function () { div.appendChild(img2); }; img2.style = "position:absolute;width:256px;height:256px;z-index:-2;"; img2.onerror = function () { fail() }; img2.src = tileHost + '/uploades/map/' + zoom + "/tile" + x + "_" + y + 'amapgoogle.png'; var img = document.createElement('img'); img.onload = function () { div.appendChild(img); }; img.style = "position:absolute;width:256px;height:256px;z-index:-1;"; img.crossOrigin = "anonymous"; img.onerror = function () { fail() }; img.src = tileHost + '/uploades/map/' + zoom + "/tile" + x + "_" + y + 'amap.png'; success(div); } });

這樣就實(shí)現(xiàn)了加載兩個(gè)瓦片圖，重疊到瓦片區(qū)里。其中除了我們自己的手繪地圖的瓦片之外，另外的瓦片圖是谷歌地圖的底圖瓦片。

谷歌地圖在國(guó)內(nèi)無(wú)法訪問(wèn)，我們可以采用把它緩存到服務(wù)器的方案，這樣就可以達(dá)到國(guó)內(nèi)能通過(guò)高德地圖來(lái)實(shí)現(xiàn)訪問(wèn)谷歌地圖的底圖。而國(guó)外區(qū)域的用戶，則直接調(diào)用谷歌地圖。這樣實(shí)現(xiàn)國(guó)內(nèi)國(guó)外均能訪問(wèn)。

順便說(shuō)一下，谷歌地圖的瓦片圖加載方案，也是大同小異的。

這里另外有一個(gè)需要注意注意的點(diǎn)就是，怎么判斷當(dāng)前用戶是在國(guó)內(nèi)還是國(guó)外?？梢酝ㄟ^(guò)經(jīng)緯度判斷，可以通過(guò)IP判斷。我建議通過(guò)經(jīng)緯度，更加直觀明了且準(zhǔn)確。但是中國(guó)的版圖區(qū)域，是一個(gè)很復(fù)雜的多邊形，因此，需要一些較為復(fù)雜的計(jì)算。這個(gè)點(diǎn)現(xiàn)在就不展開(kāi)，后面有機(jī)會(huì)再細(xì)說(shuō)。

復(fù)雜的多圖瓦片

四、手繪地圖覆蓋到平臺(tái)的關(guān)鍵技術(shù)點(diǎn)

通過(guò)上文可知，手繪地圖要覆蓋到平臺(tái)，最關(guān)鍵的點(diǎn)就在于瓦片圖的層級(jí)、x/y坐標(biāo)。

而這一點(diǎn)，其本質(zhì)又是手繪地圖所在區(qū)域的經(jīng)緯度所決定的。

因此，在《景區(qū)手繪地圖（電子地圖、智慧導(dǎo)覽系統(tǒng)）如何制作》以及《景區(qū)手繪地圖的繪制流程》都有所提及或強(qiáng)調(diào)，手繪地圖底圖的獲取，可以基于系統(tǒng)直接下載。然后設(shè)計(jì)師在設(shè)計(jì)手繪地圖的時(shí)候，需要特別注意，不能隨意修改手繪地圖的像素尺寸。因?yàn)樾薷闹?，就?huì)導(dǎo)致區(qū)域發(fā)生變化，然后經(jīng)緯度就會(huì)出現(xiàn)誤差。

在下載地圖底圖的時(shí)候，系統(tǒng)已知地圖的經(jīng)緯度，因此系統(tǒng)在對(duì)完成的手繪地圖進(jìn)行切片的時(shí)候，就會(huì)從默認(rèn)記憶的經(jīng)緯度開(kāi)始計(jì)算，通過(guò)地球的經(jīng)緯度、墨卡托坐標(biāo)、像素偏移三者的轉(zhuǎn)換關(guān)系，計(jì)算出當(dāng)前手繪圖層的第一張瓦片的偏移位置。找到此關(guān)鍵之后，后面切圖就非常簡(jiǎn)單，只需要以256像素為依據(jù)，進(jìn)行累加切圖即可。

這里需要注意的是，實(shí)際上256像素的瓦片，在手機(jī)上的顯示效果并不佳，看上去不是很清晰。這里涉及手機(jī)屏幕和PC屏幕硬件及顯示像素的差異原理。解決此問(wèn)題不難，這里便不展開(kāi)說(shuō)明了。

瓦片圖準(zhǔn)確覆蓋

五、更好的圖層加載體驗(yàn)

因?yàn)槭掷L地圖打開(kāi)之后，要加載的瓦片圖很多，即便是只加載可視區(qū)域內(nèi)的瓦片圖，數(shù)量也是不少。因此，為了用戶在使用手繪地圖時(shí)有更好的放大、縮小查看的體驗(yàn)，我們可以使用預(yù)加載瓦片圖方案。

具體的方案就是，系統(tǒng)在完成用戶當(dāng)前所在層級(jí)的瓦片圖加載之后，便可以對(duì)相鄰的大一級(jí)和小一級(jí)的瓦片圖進(jìn)行加載。因?yàn)橹喇?dāng)前層級(jí)的經(jīng)緯度，因此也能計(jì)算出相鄰的兩個(gè)級(jí)別的經(jīng)緯度，進(jìn)而對(duì)相應(yīng)的瓦片圖進(jìn)行加載。加載之后，當(dāng)用戶放大或縮小手繪地圖層級(jí)時(shí)，便可快速顯示瓦片圖而不需要再臨時(shí)加載，獲得“網(wǎng)絡(luò)更快”的體驗(yàn)。

實(shí)現(xiàn)預(yù)加載的核心代碼：

 
for (x = xMin; x <= xMax; x ++) { for (y = yMin; y <= yMax; y ++) { if (preloadPics[x + '_' + y]) { continue; } preloadPics[x + '_' + y] = true; var picUrl = tileHost + '/uploades/map/'+ zoom +'/tile'+ x +'_'+ y +'amap.png'; (new Image()).src = picUrl; } }

預(yù)加載的兩個(gè)相鄰層級(jí)的瓦片圖

六、結(jié)尾

手繪地圖覆蓋到底圖的方式，其實(shí)還有更多，但根據(jù)我有限的經(jīng)驗(yàn)，覺(jué)得其他方式都沒(méi)有TileLayer.Flexible接口靈活和實(shí)用，因此不再過(guò)多贅述。

另外說(shuō)一點(diǎn)，這個(gè)接口的復(fù)雜效果，個(gè)人經(jīng)驗(yàn)是高德地圖支持最完善。因此一直以來(lái)我都首推高德地圖作為手繪地圖平臺(tái)。

在本文最后，衷心感謝各大地圖開(kāi)放平臺(tái)。他們提供了大量可免費(fèi)使用的資源，使得無(wú)數(shù)企業(yè)作為服務(wù)商可以為更多各行各業(yè)的需求方提供各種各樣的解決方案，創(chuàng)造了難以估量的經(jīng)濟(jì)價(jià)值，體現(xiàn)了大企業(yè)的責(zé)任和擔(dān)當(dāng)。

最后，列一些開(kāi)放地圖平臺(tái)文檔：

高德地圖：概述-地圖 JS API | 高德地圖API

百度地圖：地圖 JS API | 百度地圖API SDK

騰訊地圖：JavaScript API | 騰訊位置服務(wù)

谷歌地圖：https://developers.google.com/maps/documentation/javascript