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：探路小程序