L7Mini：探路小程式

導讀

L7Mini 作為 L7 的衍生産品，可以認為是 L7 的小程式适配版本（支付寶小程式），繼承了 L7 原有的能力與使用方式，并基于小程式的環境進行适配改造。借助成熟的地理可視化渲染引擎，L7Mini 為小程式環境地理資訊的可視化表達帶來了新的選擇。

圖層管理

目前無論是支付寶還是微信小程式，地圖元件都要将繪制的元素作為屬性進行聲明，并沒有采用地圖領域常見的圖層概念。

L7Mini 使用 L7 成熟的圖層模式管理各類地圖元素，讓我們可以對相同類型、不同類型的地圖元素按圖層進行統一管理。通過對不同圖層之間的組合，讓我們輕松的繪制各種複雜地圖，同時也能借助圖層對複雜地圖上衆多的圖層要素進行統一便捷的管理。

<map
id="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
...
markers="{{markers}}"
polyline="{{polyline}}"
polygon="{{polygon}}"
circles="{{circles}}"
...
>
 </map>
// <map></map> 地圖元件

小程式地圖元件通過屬性添加地圖元素

const miniScene = new Scene({
  id: 'canvas',
  canvas,
  map: new Map({
    center: [105, 30.279383],
    zoom: 2,
    pitch: 0,
  })
});

 const lineLayer = new LineLayer({ zIndex: 2 })
 .source(data)
 .shape('line')
 .size(0.6)
 .color('rgb(93,112,146)')
 .style({
   opacity: 0.8,
 });
miniScene.addLayer(lineLayer);

// miniScene 地圖場景對象
// lineLayer 表示地圖要素的圖層類型

L7Mini 使用圖層的概念添加地圖元素

資料處理

相較于原生地圖元件比較單一固定的資料引入，L7Mini 借助 L7 完善的資料處理流程，能讓地圖要素的資料接入更加的靈活便捷。L7Mini 預設支援規範的 geojson 作為圖形的資料來源，同時，使用者還可以通過定義 parser 和 transform 等方法傳遞各種自定義的資料類型，降低資料的使用成本。

同時，L7Mini 提供的資料處理允許為每個地圖要素傳遞各自需要表示的屬性字段，将實際的資訊和地圖要素進行綁定，友善統一管理。

小程式地圖要素接入資料

 const layer = new PointLayer()
 .source(
   [
     {
       lng1: 121.107846,
       lat1: 30.267069,
       name: 'text1',
       value: 2
     },
     {
       lng1: 121.107,
       lat1: 30.267069,
       name: 'text2',
       value: 3
     }
   ],
   {
     parser: {
       type: 'json',
       x: 'lng1',
       y: 'lat1',
     },
   })
 // 普通數組類型的資料
 
 const data = {
   type: 'FeatureCollection',
   features: [
     {
       type: 'Feature',
       properties: {
         testOpacity: 1,
       },
       geometry: {
         type: 'Polygon',
         coordinates: [
           [
             [113.8623046875, 30.031055426540206],
             [116.3232421875, 30.031055426540206],
             [116.3232421875, 31.090574094954192],
             [113.8623046875, 31.090574094954192],
             [113.8623046875, 30.031055426540206],
           ],
           [
             [117.26806640625, 32.13840869677249],
             [118.36669921875, 32.13840869677249],
             [118.36669921875, 32.47269502206151],
             [117.26806640625, 32.47269502206151],
             [117.26806640625, 32.13840869677249],
           ],
         ],
       },
     },
   ],
 };

const layer = new PolygonLayer({
  autoFit: true,
})
.source(data)
 // geojson 類型的資料

L7Mini 地圖要素接入資料

source 方法詳解

圖形文法

與原生 map 元件通過屬性配置的方式相比，L7Mini 沿用了 L7 的圖形文法描述圖形繪制。

let layer = new PointLayer()
.source(data, {
  parser: {
    type: 'json',
    x: 'lng',
    y: 'lat',
  },
})
.shape('circle')
.color('color')
.size('value', (v) => 5 + 15 * v)
.style({
  stroke: '#f00',
  strokeWidth: 1,
  strokeOpacity: 0.5,
  opacity: 0.5,
})
.active(true);

圖表案例

使用 L7Mini 我們可以輕易的繪制各種美觀實用的地理資訊圖表，下面就是其中一部分示例。

官網文檔

檢視完整案例請使用支付寶掃描二維碼

未來規劃

由于尚未解決小程式元件間的通信延遲問題，目前 L7Mini 尚未接入地圖底圖
L7Mini 将會推出完整的小程式端地理可視化解決方案 F7

相容其他小程式環境

感謝

在 L7Mini 開發的過程中遇到了許多的問題，在此感謝許許多多支付寶小程式團隊同學的大力支援！

包括但不限于：

@戰曲(zhanqu.awb) @百喻(tengchao.wtc) @高貹(zhugaosheng.zgs) @辰熹(chengpeng.gcp)

L7Mini：探路小程式