本發(fā)明涉及基于leaflet框架gis渲染和繪制的，特別涉及一種基于leaflet框架的多世界元素渲染方法。

背景技術：

1、在現(xiàn)在的地圖web?gis開發(fā)和框架中，leaflet是使用最廣泛的開源框架之一，但是leaflet本身不支持多地圖復制的功能，需要開發(fā)者自己去實現(xiàn)或者使用現(xiàn)有的開源插件實現(xiàn)，對比多個開源插件和市面上使用了leaflet框架開發(fā)出的產品后，我們發(fā)現(xiàn)都沒有很好的解決多地圖渲染的問題。

2、在使用leaflet進行地圖渲染時，默認只能渲染元素到一個世界地圖上，并且在地圖渲染跨越-180經度至+180經度的polyline時會導致線段在這個位置繪制一根鏈接-180到+180的線，這顯然不是正確的結果。還有只有一個地圖顯示元素時，會導致太平洋上顯示的內容產生割裂感，不能直觀的展示出該有的數(shù)據(jù)。

3、現(xiàn)在的技術要么沒有元素復制渲染的功能，要么就是在移動到一定程度時把元素給移動到正確的地圖上，都沒有完全解決元素同時渲染到多個世界地圖上的功能。

技術實現(xiàn)思路

1、為了解決在leaflet中渲染元素時，如何實現(xiàn)同時渲染到多個世界地圖上的問題，本發(fā)明提出了一種基于leaflet框架的多世界元素渲染方法，實現(xiàn)了元素同時渲染在多個地圖上。

2、具體技術方案如下所述：

3、一種基于leaflet框架的多世界元素渲染方法，

4、s1：創(chuàng)建leaflet地圖，并創(chuàng)建可以監(jiān)聽世界地圖瓦片復制時創(chuàng)建和銷毀的組件，并將組件添加到地圖中；

5、s2：通過創(chuàng)建和銷毀的方法確定當前世界瓦片的偏移量，并保存到變量中，并通知地圖元素進行重繪；通過hook模塊重寫元素on?and和on?remove，將存儲的經緯度變量轉換為屏幕坐標進行重繪。

6、優(yōu)選地，s1中創(chuàng)建可以監(jiān)聽世界地圖瓦片復制時創(chuàng)建和銷毀的組件通過繼承l(wèi)eaflet的gridlayer類以實現(xiàn)一個名為warpgrid的自定義網格圖層類的方法實現(xiàn)，具體的：

7、s11：繼承gridlayer類：通過繼承l(wèi)eaflet的gridlayer類創(chuàng)建一個新的自定義網格圖層類warpgrid；

8、s12：設置options選項：在warpgrid類中，將options選項設置為maxnativezoom為0，nowrap設置為true，keepbuffer設置為0；使得網格圖層只加載一級瓦片，并且在地圖移動時和復制時也只會調用一次createtile進行創(chuàng)建瓦片；

9、s13：重寫initialize方法：在warpgrid類中通過重寫initialize方法滿足特定的初始化需求；

10、s14：重寫createtile方法：定義創(chuàng)建瓦片的邏輯，并通過重寫createtile方法，確保在地圖移動時和復制時只調用一次createtile進行創(chuàng)建瓦片，從而監(jiān)聽到地圖進行復制的時機。

11、優(yōu)選地，s1所述的將組件添加到地圖中的方法為：初始化一個warpgrid實例，并添加到leaflet地圖的實例上。

12、優(yōu)選地，s2中通過創(chuàng)建和銷毀的方法確定當前世界瓦片的偏移量，具體包括:

13、s21：warpgrid實例監(jiān)聽地圖瓦片的創(chuàng)建：利用leaflet提供的事件機制，綁定一個tileload事件或類似的事件，以便在每個瓦片加載完成時觸發(fā)相應的回調函數(shù)；

14、s22：記錄瓦片的偏移量：將瓦片的偏移量記錄到offsetsbytile變量上；所述offsetsbytile的變量存儲瓦片的偏移信息；所述offsetsbytile變量以coords為鍵，以偏移量為值；

15、s23:offsetsbytile通過瓦片坐標來索引和存儲對應的偏移信息。

16、優(yōu)選地，s22中所述coords是leaflet中用來標識瓦片的柵格值，它由三個部分組成：x橫向坐標、y縱向坐標和z層級；x和y坐標用來定位在地圖網格中的具體瓦片位置，而z層級表示地圖的縮放級別。

17、優(yōu)選地，s23中每個所述瓦片坐標都可以唯一地映射到一個特定的偏移量；所述偏移信息表示相應瓦片的實際位置相對于標準世界地圖的偏移量。

18、優(yōu)選地，s2中所述重繪方法為地圖元素根據(jù)偏移量確定經緯度是否需要進行偏移并復制元素，如需要將經緯度偏移后存入變量中。

19、優(yōu)選地，s2中通過所述hook模塊重寫leaflet內置元素的方法為，

20、通過讀取warpgrid實例上的offsetsbytile變量對當前的元素的經緯度進行復制操作，得到一個wraplatlngs的數(shù)組，通過重寫updatepath方法將元素的經緯度替換為經緯度數(shù)組，從而將元素繪制到多個世界地圖上。

21、有益效果

22、本發(fā)明提供了一種基于leaflet框架的多世界元素渲染方法，解決了leaflet框架原生不支持復制的技術問題。通過創(chuàng)建leaflet地圖，并創(chuàng)建可以監(jiān)聽世界地圖瓦片復制時創(chuàng)建和銷毀的組件，并將組件添加到地圖中；再通過創(chuàng)建和銷毀的方法確定當前世界瓦片的偏移量，并保存到變量中，并通知地圖元素進行重繪；通過hook模塊重寫元素on?and和onremove，將存儲的經緯度變量轉換為屏幕坐標進行重繪。相比于原生leaflet框架，能夠支持所有元素的復制，包括框架內置元素，自定義元素也可以通過繼承gridlayer類方式很方便的進行復制。相比其他的復制方式，性能更好，拓展性更優(yōu)秀。

技術特征：

1.一種基于leaflet框架的多世界元素渲染方法，其特征在于，

2.根據(jù)權利要求1所述的一種基于leaflet框架的多世界元素渲染方法，其特征在于，s1中創(chuàng)建可以監(jiān)聽世界地圖瓦片復制時創(chuàng)建和銷毀的組件通過繼承l(wèi)eaflet的gridlayer類以實現(xiàn)一個名為warpgrid的自定義網格圖層類的方法實現(xiàn)，具體的：

3.根據(jù)權利要求1所述的一種基于leaflet框架的多世界元素渲染方法，其特征在于，s1所述的將組件添加到地圖中的方法為：初始化一個warpgrid實例，并添加到leaflet地圖的實例上。

4.根據(jù)權利要求1所述的一種基于leaflet框架的多世界元素渲染方法，其特征在于，s2中通過創(chuàng)建和銷毀的方法確定當前世界瓦片的偏移量，具體包括:

5.根據(jù)權利要求4所述的一種基于leaflet框架的多世界元素渲染方法，其特征在于，s22中所述coords是leaflet中用來標識瓦片的柵格值，它由三個部分組成：x橫向坐標、y縱向坐標和z層級；x和y坐標用來定位在地圖網格中的具體瓦片位置，而z層級表示地圖的縮放級別。

6.根據(jù)權利要求4所述的一種基于leaflet框架的多世界元素渲染方法，其特征在于，s23中每個所述瓦片坐標都可以唯一地映射到一個特定的偏移量；所述偏移信息表示相應瓦片的實際位置相對于標準世界地圖的偏移量。

7.根據(jù)權利要求1所述的一種基于leaflet框架的多世界元素渲染方法，其特征在于，s2中所述重繪方法為地圖元素根據(jù)偏移量確定經緯度是否需要進行偏移并復制元素，如需要將經緯度偏移后存入變量中。

8.根據(jù)權利要求1所述的一種基于leaflet框架的多世界元素渲染方法，其特征在于，s2中通過hook模塊重寫leaflet內置元素的方法為，

技術總結
本發(fā)明涉及基于leaflet框架GIS渲染和繪制的技術領域，提供了一種基于leaflet框架的多世界元素渲染方法，解決了leaflet框架原生不支持復制的技術問題。通過創(chuàng)建leaflet地圖，并創(chuàng)建可以監(jiān)聽世界地圖瓦片復制時創(chuàng)建和銷毀的組件，并將組件添加到地圖中；再通過創(chuàng)建和銷毀的方法確定當前世界瓦片的偏移量，并保存到變量中，并通知地圖元素進行重繪；通過hook模塊重寫元素on?And和on?Remove，將存儲的經緯度變量轉換為屏幕坐標進行重繪。相比于原生leaflet框架，能夠支持所有元素的復制，包括框架內置元素，自定義元素也可以通過繼承GridLayer類方式很方便的進行復制。相比其他的復制方式，性能更好，拓展性更優(yōu)秀。

技術研發(fā)人員：熊浩,李鑫,江宇虹
受保護的技術使用者：中遠海運科技股份有限公司
技術研發(fā)日：
技術公布日：2025/4/24