微信小程序添加外部地圖服務數(shù)據(jù)

微信小程序地圖組件默認不支持添加自己發(fā)布的地圖服務，通過獲取當前地圖范圍內(nèi)geojson格式矢量瓦片數(shù)據(jù)，可實現(xiàn)添加外部地圖服務需求。

先上效果：

緣起

使用微信小程序做地圖相關功能的時候，有個需求是需要接入自己發(fā)布的地圖服務。查看微信小程序地圖組件文檔，發(fā)現(xiàn)它對地圖相關的支持很少，只有一些基礎功能，比如添加點、線、面、氣泡和一些常規(guī)的地圖事件監(jiān)聽，并沒有添加地圖服務相關的支持。

不過有了需求，也要想辦法解決呀。

圖層查詢

既然小程序不能直接添加地圖服務，那就把圖層數(shù)據(jù)查出來，然后通過添加點線面方式添加到地圖，具體要怎么實現(xiàn)呢？

首先想到的是通過圖層查詢接口把所有數(shù)據(jù)查出來。

但是既然數(shù)據(jù)是按圖層發(fā)布的，一般數(shù)據(jù)量都比較大，把所有數(shù)據(jù)查詢出來，一次性添加過多的數(shù)據(jù)到地圖，地圖組件會受不了從而變的卡頓，另外微信小程序單次setData()的數(shù)據(jù)不能超過1024kB，因此這種方案就不可取了。

矢量瓦片

既然一次性請求數(shù)據(jù)量太大，是不是可以分批次請求呢？于是就想到了矢量瓦片。
矢量瓦片對于做GIS的人來說，大家都很熟悉了，這也是目前各種GIS產(chǎn)品對大數(shù)據(jù)量地圖展示所采用的主要方式。
但是，我們?nèi)绾巫尣恢С痔砑油獠繄D層的小程序地圖組件支持矢量瓦片呢？

查看地圖組件相關文檔，會看到其中有個regionchange事件，該事件是在地圖視野改變，也就是拖動、縮放地圖時觸發(fā)，它會返回當前中心點、縮放級別、地圖范圍等信息。

獲取瓦片

接下來就是如何根據(jù)這些參數(shù)獲取到矢量瓦片了。

假設，地圖切圖的原點是(originX,originY)，地圖的瓦片大小是tileSize，地圖屏幕上1像素代表的實際距離是resolution。計算坐標點（x,y）所在的瓦片的行列號的公式是：

col = floor((x0 - x)/( tileSize*resolution))
row = floor((y0 - y)/( tileSize*resolution))

這個公式應該不難理解，簡單點說就是，先算出一個瓦片所包含的實際長度LtileSize，然后再算出此時屏幕上的地理坐標點離瓦片切圖的起始點間的實際距離LrealSize，然后用實際距離除以一個瓦片的實際長度，即可得此時的瓦片行列號：LrealSize/LtileSize。

具體代碼如下：

getTileXY: function (lon, lat, level) {
  let originX = -180; //坐標系原點的x的值，
  let originY = 90; //坐標系原點的y的值
  //根據(jù)你自己對應的切片方案改，這個就是其分辨率resolution
  let resolution = [1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625,
    0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.0003433227539062,
    0.0001716613769531, 0.0000858306884766, 0.0000429153442383, 0.0000214576721191, 0.0000107288360596,
    0.0000053644180298, 0.0000026822090149, 0.0000013411045074, 0.0000006705522537, 0.0000003352761269
  ]

  let tileSize = 256 //這個值表示的是每張切片的大小,一般都是256
  let coef = resolution[level] * tileSize;
  let x = Math.floor((lon - originX) / coef); // 向下取整,丟棄小數(shù)部分
  let y = Math.floor((originY - lat) / coef); // 向下取整,丟棄小數(shù)部分
  let tmsY = Math.pow(2, (level - 1)) - y - 1;
  return {
    x: x,
    y: y,
    z: level - 1,
    tmsY: tmsY
  }
},

這里可以看到我返回的數(shù)據(jù)中有一個y值，還有一個tmsY，這是因為WMTS、TMS兩種方式調(diào)用切片時，傳入的y值是不同的，不過兩者之間是有可以轉(zhuǎn)換的，也就是tmsY = Math.pow(2, (level - 1)) - y - 1，WMTS用的是這里返回的y，TMS用的是這里返回的tmsY。

參考鏈接：

WebGIS前端地圖顯示之根據(jù)地理范圍換算出瓦片行列號的原理(核心)

Slippy_map_tilenames

TMS和WMTS大概對比

接下來我們只需根據(jù)當前地圖可視范圍的最大、最小坐標以及地圖層級，即可獲取包含當前地圖可視范圍的瓦片的編號。

由于微信小程序地圖組件使用的是國測局加密坐標，而我發(fā)布的地圖服務數(shù)據(jù)為wgs84坐標，因此這里在獲取切片編號時需要用坐標轉(zhuǎn)換方法將國測局坐標轉(zhuǎn)成wgs84坐標，坐標糾偏方法可參考leaflet中如何優(yōu)雅的解決百度、高德地圖的偏移問題。

getXYZList: function (region, level) {
  // 坐標轉(zhuǎn)換
  var newsouthwest = appcoord.gcj02_To_gps84(region.southwest.longitude, region.southwest.latitude); 
  var northeastwest = appcoord.gcj02_To_gps84(region.northeast.longitude, region.northeast.latitude);
  // 獲取瓦片編號
  var xyzInfo1 = this.getTileXY(newsouthwest.lng, northeastwest.lat, level)
  var xyzInfo2 = this.getTileXY(northeastwest.lng, newsouthwest.lat, level)
  var z = level - 1
  for (var x = xyzInfo1.x; x <= xyzInfo2.x; x++) {
    for (var y = xyzInfo1.y; y <= xyzInfo2.y; y++) {
      this.getGeoJson(x, y, z)
    }
  }
},

然后通過wx.request傳入請求地址以及x、y、z參數(shù)，即可獲取到對應矢量切片的geojson格式數(shù)據(jù)

getGeoJson: function (x, y, z) {
  const v = this
  wx.request({
    url: "http://127.0.0.1:7000/geoserver/gwc/service/wmts/rest/test:test/EPSG:4326/EPSG:4326:" +
      z + "/" + y + "/" + x + "?format=application/json;type=geojson",
    method: 'get',
    success(res) {
      var tileId = 'tile-' + x + '-' + y + '-' + z
      tileData[tileId] = {
        tileId: tileId,
        features: []
      }
      if(res.statusCode === 200){
        tileData[tileId].features = res.data.features
      }
      v.addFeatures(tileId)
    }
  })
},

注意，這里我是用geoserver發(fā)布的矢量瓦片，在調(diào)用過程中發(fā)現(xiàn)個問題，其中一個點圖層瓦片返回的數(shù)據(jù)中，各個瓦片總有很多重復數(shù)據(jù)，經(jīng)檢查測試發(fā)現(xiàn)，這是由于發(fā)布該圖層（點圖層）時使用的樣式為一張大小為40x88的圖片點樣，這就導致切圖時整體向外緩沖了不少的像素值，所以，如果geoserver發(fā)布的圖層是用于矢量切片調(diào)用，最好將點圖層樣式設置為一個像素大小的像素點，這樣可以有效減少瓦片數(shù)據(jù)冗余

添加數(shù)據(jù)

最后再通過微信小程序地圖組件中添加點線面的方法把獲取切片數(shù)據(jù)添加到地圖即可

addFeatures: function (tileId) {
  var polylines = this.data.polylines
  var markers = this.data.markers
  tileData[tileId].features.forEach(feature => {
    if (feature.geometry.type === 'LineString') {
      polylines.push(this.getPolyline(feature.geometry.coordinates, tileId))
    } else if (feature.geometry.type === 'Point') {
      markers.push(this.getMarker(feature.geometry.coordinates, tileId))
    }
  });
  this.setData({
    polylines: polylines,
    markers: markers
  })
},

存在問題

至此，微信小程序添加矢量瓦片數(shù)據(jù)已經(jīng)完成，基本能滿足瀏覽外部矢量圖層的需求，但是，這里還是有一些不足的地方

需要發(fā)布geojson格式矢量瓦片圖層
地圖拖動時圖層會閃一下，這是小程序重新往地圖上繪制點線面圖層引起的
在小比例尺瓦片返回數(shù)據(jù)量較大時可能會有卡頓現(xiàn)象（可以通過限定最小比例尺優(yōu)化）
圖層配圖效果受小程序地圖點線面樣式限制

雖然該解決方案存在一些問題，但是鑒于微信小程序地圖組件的限制，并且確時又有添加圖層的需求，此方案還是可取的。

總結

微信小程序地圖組件不支持添加外部圖層服務
通過發(fā)布geojson格式矢量瓦片服務，然后按當前可視范圍獲取geojson格式瓦片數(shù)據(jù)
通過小程序地圖組件的regionchange事件監(jiān)聽地圖拖動、縮放，可以獲取到當前中心點、縮放級別、地圖范圍
根據(jù)縮放級別、地圖范圍可以獲取到當前可視范圍的瓦片編號
請求瓦片數(shù)據(jù)，通過微信小程序地圖組件中添加點線面的方法把切片數(shù)據(jù)添加到地圖

代碼地址

代碼地址：http://gisarmory.xyz/blog/index.html?source=WechatVectorTile

原文地址：http://gisarmory.xyz/blog/index.html?blog=WechatVectorTile

歡迎關注《GIS兵器庫》

本文章采用知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議進行許可。歡迎轉(zhuǎn)載、使用、重新發(fā)布，但務必保留文章署名《GIS兵器庫》（包含鏈接： http://gisarmory.xyz/blog/），不得用于商業(yè)目的，基于本文修改后的作品務必以相同的許可發(fā)布。

posted @ 2021-10-27 10:03 GIS兵器庫閱讀(1720) 評論(1) 收藏舉報

刷新頁面返回頂部

GIS兵器庫