mirror of https://gitee.com/antv-l7/antv-l7
feat: 增加L7Mini小程序文档
This commit is contained in:
shihui
parent
cee201387a
commit
ea36300b99
|
|
@ -81,4 +81,4 @@ L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源
|
|||
L7 相关技术问题，需求反馈，我们会及时响应
|
||||
|
||||
群号：32292906
|
||||
|
||||
<img width="200px" alt="地理空间可视化L7支持群" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*OmBqS7Jn7pIAAAAAAAAAAAAAARQnAQ'>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: L7Mini chinaPopulation
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/mini/demos/chinaPopulation.zh.md`
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
---
|
||||
title: L7Mini 中国人口分布地图
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 案例
|
||||
|
||||
<img width="200px" alt="中国人口地图" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/
|
||||
A*65N9Sbw7f1AAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
### 中国人口地图
|
||||
|
||||
index.axml 页面结构代码
|
||||
```javascript
|
||||
|
||||
<view class="isLoading" style="height: 100vh" a:if="{{isLoading}}">
|
||||
<view class="loadItem" a:for="{{10}}">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view id="box" class="wrap"
|
||||
onTouchStart="onTouchStart"
|
||||
onTouchMove="onTouchMove"
|
||||
onTouchEnd="onTouchEnd"
|
||||
>
|
||||
<canvas onReady="onCanvasReady" type="webgl" id="canvas" />
|
||||
<view class="populationWrap">
|
||||
<view class="populationIcons">
|
||||
人口/千万:
|
||||
</view>
|
||||
<view class="populationIcons" a:for="{{population}}">
|
||||
<view> {{item.count}} </view>
|
||||
<view class="colorLine" style="background:{{item.color}}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="antvl7" mode="scaleToFill" src="{{antvl7}}" />
|
||||
|
||||
```
|
||||
index.less 样式代码
|
||||
```less
|
||||
.wrap {
|
||||
height: 100vh;
|
||||
#canvas {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
index.ts 脚本代码
|
||||
```javascript
|
||||
import {
|
||||
Map,
|
||||
Scene,
|
||||
PolygonLayer,
|
||||
LineLayer,
|
||||
dispatchTouchStart,
|
||||
dispatchTouchMove,
|
||||
dispatchTouchEnd,
|
||||
PointLayer,
|
||||
} from '@antv/l7-mini';
|
||||
import { getJSON } from '../../request';
|
||||
import { antvl7, chinaJSON, chinaBorderLine, population, provinceCenter } from '../../mockData';
|
||||
import { handleCanvas, LayerCounter } from '../../utils';
|
||||
|
||||
let miniScene;
|
||||
let counter;
|
||||
|
||||
Page({
|
||||
data: {
|
||||
isLoading: true,
|
||||
antvl7,
|
||||
population: [
|
||||
{ count: '> 9', color: '#662506' },
|
||||
{ count: '> 7', color: '#993404' },
|
||||
{ count: '> 6', color: '#cc4c02' },
|
||||
{ count: '> 5', color: '#ec7014' },
|
||||
{ count: '> 3', color: '#fe9929' },
|
||||
{ count: '> 2', color: '#fec44f' },
|
||||
{ count: '<= 2', color: '#fee391' },
|
||||
],
|
||||
},
|
||||
onLoad() {
|
||||
counter = new LayerCounter(4, my, this);
|
||||
my.showLoading();
|
||||
},
|
||||
onTouchStart(e) {
|
||||
dispatchTouchStart(e);
|
||||
},
|
||||
onTouchMove(e) {
|
||||
dispatchTouchMove(e);
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
dispatchTouchEnd(e);
|
||||
},
|
||||
onCanvasReady() {
|
||||
handleCanvas(this, my, (canvas) => {
|
||||
const miniMap = new Map({
|
||||
center: [105, 30.279383],
|
||||
zoom: 2,
|
||||
pitch: 0,
|
||||
});
|
||||
miniScene = new Scene({
|
||||
id: 'canvas',
|
||||
canvas,
|
||||
map: miniMap,
|
||||
hasBaseMap: false,
|
||||
});
|
||||
getJSON(chinaJSON, function (result, data) {
|
||||
if (result) {
|
||||
const polygonLayer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', (name) => {
|
||||
const count = population[name];
|
||||
if (count && count > 90000000) {
|
||||
return '#662506';
|
||||
} else if (count && count > 70000000) {
|
||||
return '#993404';
|
||||
} else if (count && count > 65000000) {
|
||||
return '#cc4c02';
|
||||
} else if (count && count > 50000000) {
|
||||
return '#ec7014';
|
||||
} else if (count && count > 30000000) {
|
||||
return '#fe9929';
|
||||
} else if (count && count > 20000000) {
|
||||
return '#fec44f';
|
||||
} else {
|
||||
return '#fee391';
|
||||
}
|
||||
})
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
miniScene.addLayer(polygonLayer);
|
||||
counter.loadLayer();
|
||||
|
||||
const provinceLine = new PolygonLayer({})
|
||||
.source(data)
|
||||
.size(0.4)
|
||||
.color('#fff')
|
||||
.shape('line')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
miniScene.addLayer(provinceLine);
|
||||
counter.loadLayer();
|
||||
}
|
||||
});
|
||||
|
||||
getJSON(chinaBorderLine, function (result, data) {
|
||||
if (result) {
|
||||
const borderlineLayer = new LineLayer({ zIndex: 2 })
|
||||
.source(data)
|
||||
.shape('line')
|
||||
.size(0.6)
|
||||
.color('rgb(93,112,146)')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
miniScene.addLayer(borderlineLayer);
|
||||
counter.loadLayer();
|
||||
}
|
||||
});
|
||||
|
||||
const provinceName = new PointLayer({ zIndex: 1 })
|
||||
.source(provinceCenter, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('n', 'text')
|
||||
.size(12)
|
||||
.color('#000')
|
||||
.style({
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1,
|
||||
opacity: 0.8,
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
|
||||
miniScene.on('loaded', function () {
|
||||
miniScene.addLayer(provinceName);
|
||||
counter.loadLayer();
|
||||
});
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
// 页面被关闭
|
||||
miniScene.destroy();
|
||||
},
|
||||
});
|
||||
```
|
||||
方法代码
|
||||
```javascript
|
||||
function getJSON(url, callback) {
|
||||
my.request({
|
||||
url,
|
||||
method: 'GET',
|
||||
data: {
|
||||
from: '支付宝',
|
||||
production: 'AlipayJSAPI',
|
||||
},
|
||||
headers: {
|
||||
'content-type': 'application/json', // 默认值
|
||||
},
|
||||
dataType: 'json',
|
||||
fail() {
|
||||
callback(false, null);
|
||||
},
|
||||
complete(res) {
|
||||
callback(true, res.data);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleCanvas(_that, my, callback) {
|
||||
const selector = my.createSelectorQuery();
|
||||
const domSelector = selector.select('#canvas');
|
||||
domSelector
|
||||
.fields(
|
||||
{
|
||||
node: true,
|
||||
context: false,
|
||||
rect: true,
|
||||
computedStyle: ['height', 'width'],
|
||||
},
|
||||
function (res) {
|
||||
res.node.left = res.left;
|
||||
res.node.top = res.top;
|
||||
|
||||
const DPR = my.getSystemInfoSync().pixelRatio;
|
||||
res.node.width *= DPR;
|
||||
res.node.height *= DPR;
|
||||
|
||||
callback(res.node);
|
||||
},
|
||||
)
|
||||
.exec();
|
||||
}
|
||||
|
||||
class LayerCounter {
|
||||
private loadedLayer = 0;
|
||||
|
||||
private totalLayers: number;
|
||||
|
||||
private my: any;
|
||||
|
||||
private context: any;
|
||||
|
||||
constructor(totalLayers: number, my: any, context: any) {
|
||||
this.totalLayers = totalLayers;
|
||||
this.my = my;
|
||||
this.context = context;
|
||||
}
|
||||
|
||||
loadLayer() {
|
||||
this.loadedLayer++;
|
||||
const that = this;
|
||||
if (this.loadedLayer >= this.totalLayers) {
|
||||
this.my.hideLoading({
|
||||
page: that, // 防止执行时已经切换到其它页面，page 指向不准确
|
||||
});
|
||||
this.context.setData({
|
||||
isLoading: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: L7Mini flyline
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/mini/demos/flyline.zh.md`
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
---
|
||||
title: L7Mini 飞线
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 案例
|
||||
<img width="200px" alt="飞线" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*GyYeRp1uOIAAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
### 飞线
|
||||
|
||||
index.axml 页面结构代码
|
||||
```javascript
|
||||
<view class="isLoading" style="height: 100vh" a:if="{{isLoading}}">
|
||||
<view class="loadItem" a:for="{{10}}">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view id="box" class="wrap"
|
||||
onTouchStart="onTouchStart"
|
||||
onTouchMove="onTouchMove"
|
||||
onTouchEnd="onTouchEnd"
|
||||
>
|
||||
<canvas onReady="onCanvasReady" type="webgl" id="canvas" />
|
||||
</view>
|
||||
<image class="antvl7" mode="scaleToFill" src="{{antvl7}}" />
|
||||
|
||||
```
|
||||
index.less 样式代码
|
||||
```less
|
||||
.wrap {
|
||||
height: 100vh;
|
||||
#canvas {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
index.ts 脚本代码
|
||||
```javascript
|
||||
import {
|
||||
Map,
|
||||
Scene,
|
||||
LineLayer,
|
||||
dispatchTouchStart,
|
||||
dispatchTouchMove,
|
||||
dispatchTouchEnd,
|
||||
PointLayer,
|
||||
} from '@antv/l7-mini';
|
||||
import { getJSON } from '../../request';
|
||||
import { antvl7, flydata, pointData, worldJSON } from '../../mockData';
|
||||
import { handleCanvas, LayerCounter } from '../../utils';
|
||||
|
||||
let miniScene;
|
||||
let counter;
|
||||
|
||||
Page({
|
||||
data: {
|
||||
isLoading: true,
|
||||
antvl7,
|
||||
},
|
||||
onLoad() {
|
||||
counter = new LayerCounter(3, my, this);
|
||||
my.showLoading();
|
||||
},
|
||||
onTouchStart(e) {
|
||||
dispatchTouchStart(e);
|
||||
},
|
||||
onTouchMove(e) {
|
||||
dispatchTouchMove(e);
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
dispatchTouchEnd(e);
|
||||
},
|
||||
onCanvasReady() {
|
||||
handleCanvas(this, my, (canvas) => {
|
||||
const miniMap = new Map({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
pitch: 40,
|
||||
});
|
||||
miniScene = new Scene({
|
||||
id: 'canvas',
|
||||
canvas,
|
||||
map: miniMap,
|
||||
hasBaseMap: false,
|
||||
});
|
||||
|
||||
miniScene.setBgColor('#222');
|
||||
|
||||
getJSON(worldJSON, function (result, data) {
|
||||
if (result) {
|
||||
const lineLayer = new LineLayer()
|
||||
.source(data)
|
||||
.shape('line')
|
||||
.size(0.8)
|
||||
.color('#41fc9d')
|
||||
|
||||
.style({
|
||||
opacity: 0.4,
|
||||
});
|
||||
miniScene.addLayer(lineLayer);
|
||||
counter.loadLayer();
|
||||
}
|
||||
});
|
||||
|
||||
const flyLine = new LineLayer({ blend: 'normal', zIndex: 2 })
|
||||
.source(flydata, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
coordinates: 'coord',
|
||||
},
|
||||
})
|
||||
.color('#b97feb')
|
||||
.shape('arc3d')
|
||||
.size(2)
|
||||
.active(true)
|
||||
.animate({
|
||||
interval: 2,
|
||||
trailLength: 2,
|
||||
duration: 1,
|
||||
})
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
sourceColor: '#f00',
|
||||
targetColor: '#0f0',
|
||||
});
|
||||
|
||||
const pointLayer = new PointLayer();
|
||||
pointLayer
|
||||
.source(pointData, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('circle')
|
||||
.color('#ffed11')
|
||||
.animate(true)
|
||||
.size(40)
|
||||
.style({
|
||||
opacity: 1.0,
|
||||
});
|
||||
|
||||
miniScene.on('loaded', () => {
|
||||
miniScene.addLayer(flyLine);
|
||||
counter.loadLayer();
|
||||
miniScene.addLayer(pointLayer);
|
||||
counter.loadLayer();
|
||||
});
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
// 页面被关闭
|
||||
miniScene.destroy();
|
||||
},
|
||||
});
|
||||
|
||||
```
|
||||
方法代码
|
||||
```javascript
|
||||
function getJSON(url, callback) {
|
||||
my.request({
|
||||
url,
|
||||
method: 'GET',
|
||||
data: {
|
||||
from: '支付宝',
|
||||
production: 'AlipayJSAPI',
|
||||
},
|
||||
headers: {
|
||||
'content-type': 'application/json', // 默认值
|
||||
},
|
||||
dataType: 'json',
|
||||
fail() {
|
||||
callback(false, null);
|
||||
},
|
||||
complete(res) {
|
||||
callback(true, res.data);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleCanvas(_that, my, callback) {
|
||||
const selector = my.createSelectorQuery();
|
||||
const domSelector = selector.select('#canvas');
|
||||
domSelector
|
||||
.fields(
|
||||
{
|
||||
node: true,
|
||||
context: false,
|
||||
rect: true,
|
||||
computedStyle: ['height', 'width'],
|
||||
},
|
||||
function (res) {
|
||||
res.node.left = res.left;
|
||||
res.node.top = res.top;
|
||||
|
||||
const DPR = my.getSystemInfoSync().pixelRatio;
|
||||
res.node.width *= DPR;
|
||||
res.node.height *= DPR;
|
||||
|
||||
callback(res.node);
|
||||
},
|
||||
)
|
||||
.exec();
|
||||
}
|
||||
|
||||
class LayerCounter {
|
||||
private loadedLayer = 0;
|
||||
|
||||
private totalLayers: number;
|
||||
|
||||
private my: any;
|
||||
|
||||
private context: any;
|
||||
|
||||
constructor(totalLayers: number, my: any, context: any) {
|
||||
this.totalLayers = totalLayers;
|
||||
this.my = my;
|
||||
this.context = context;
|
||||
}
|
||||
|
||||
loadLayer() {
|
||||
this.loadedLayer++;
|
||||
const that = this;
|
||||
if (this.loadedLayer >= this.totalLayers) {
|
||||
this.my.hideLoading({
|
||||
page: that, // 防止执行时已经切换到其它页面，page 指向不准确
|
||||
});
|
||||
this.context.setData({
|
||||
isLoading: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: L7Mini heat
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/mini/demos/heat.zh.md`
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
---
|
||||
title: L7Mini 经典热力
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 案例
|
||||
<img width="200px" alt="经典热力" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*LgBfTbhEgzEAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
### 经典热力
|
||||
|
||||
index.axml 页面结构代码
|
||||
```javascript
|
||||
|
||||
<view class="isLoading" style="height: 100vh" a:if="{{isLoading}}">
|
||||
<view class="loadItem" a:for="{{10}}">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view id="box" class="wrap"
|
||||
onTouchStart="onTouchStart"
|
||||
onTouchMove="onTouchMove"
|
||||
onTouchEnd="onTouchEnd"
|
||||
>
|
||||
<canvas onReady="onCanvasReady" type="webgl" id="canvas" />
|
||||
<view class="populationWrap">
|
||||
<view class="populationIcons">
|
||||
人口/千万:
|
||||
</view>
|
||||
<view class="populationIcons" a:for="{{population}}">
|
||||
<view> {{item.count}} </view>
|
||||
<view class="colorLine" style="background:{{item.color}}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="antvl7" mode="scaleToFill" src="{{antvl7}}" />
|
||||
|
||||
```
|
||||
index.less 样式代码
|
||||
```less
|
||||
.wrap {
|
||||
height: 100vh;
|
||||
#canvas {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
index.ts 脚本代码
|
||||
```javascript
|
||||
import {
|
||||
Map,
|
||||
Scene,
|
||||
PolygonLayer,
|
||||
LineLayer,
|
||||
dispatchTouchStart,
|
||||
dispatchTouchMove,
|
||||
dispatchTouchEnd,
|
||||
PointLayer,
|
||||
} from '@antv/l7-mini';
|
||||
import { getJSON } from '../../request';
|
||||
import { antvl7, chinaJSON, chinaBorderLine, population, provinceCenter } from '../../mockData';
|
||||
import { handleCanvas, LayerCounter } from '../../utils';
|
||||
|
||||
let miniScene;
|
||||
let counter;
|
||||
|
||||
Page({
|
||||
data: {
|
||||
isLoading: true,
|
||||
antvl7,
|
||||
population: [
|
||||
{ count: '> 9', color: '#662506' },
|
||||
{ count: '> 7', color: '#993404' },
|
||||
{ count: '> 6', color: '#cc4c02' },
|
||||
{ count: '> 5', color: '#ec7014' },
|
||||
{ count: '> 3', color: '#fe9929' },
|
||||
{ count: '> 2', color: '#fec44f' },
|
||||
{ count: '<= 2', color: '#fee391' },
|
||||
],
|
||||
},
|
||||
onLoad() {
|
||||
counter = new LayerCounter(4, my, this);
|
||||
my.showLoading();
|
||||
},
|
||||
onTouchStart(e) {
|
||||
dispatchTouchStart(e);
|
||||
},
|
||||
onTouchMove(e) {
|
||||
dispatchTouchMove(e);
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
dispatchTouchEnd(e);
|
||||
},
|
||||
onCanvasReady() {
|
||||
handleCanvas(this, my, (canvas) => {
|
||||
const miniMap = new Map({
|
||||
center: [105, 30.279383],
|
||||
zoom: 2,
|
||||
pitch: 0,
|
||||
});
|
||||
miniScene = new Scene({
|
||||
id: 'canvas',
|
||||
canvas,
|
||||
map: miniMap,
|
||||
hasBaseMap: false,
|
||||
});
|
||||
getJSON(chinaJSON, function (result, data) {
|
||||
if (result) {
|
||||
const polygonLayer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', (name) => {
|
||||
const count = population[name];
|
||||
if (count && count > 90000000) {
|
||||
return '#662506';
|
||||
} else if (count && count > 70000000) {
|
||||
return '#993404';
|
||||
} else if (count && count > 65000000) {
|
||||
return '#cc4c02';
|
||||
} else if (count && count > 50000000) {
|
||||
return '#ec7014';
|
||||
} else if (count && count > 30000000) {
|
||||
return '#fe9929';
|
||||
} else if (count && count > 20000000) {
|
||||
return '#fec44f';
|
||||
} else {
|
||||
return '#fee391';
|
||||
}
|
||||
})
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
miniScene.addLayer(polygonLayer);
|
||||
counter.loadLayer();
|
||||
|
||||
const provinceLine = new PolygonLayer({})
|
||||
.source(data)
|
||||
.size(0.4)
|
||||
.color('#fff')
|
||||
.shape('line')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
miniScene.addLayer(provinceLine);
|
||||
counter.loadLayer();
|
||||
}
|
||||
});
|
||||
|
||||
getJSON(chinaBorderLine, function (result, data) {
|
||||
if (result) {
|
||||
const borderlineLayer = new LineLayer({ zIndex: 2 })
|
||||
.source(data)
|
||||
.shape('line')
|
||||
.size(0.6)
|
||||
.color('rgb(93,112,146)')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
miniScene.addLayer(borderlineLayer);
|
||||
counter.loadLayer();
|
||||
}
|
||||
});
|
||||
|
||||
const provinceName = new PointLayer({ zIndex: 1 })
|
||||
.source(provinceCenter, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('n', 'text')
|
||||
.size(12)
|
||||
.color('#000')
|
||||
.style({
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1,
|
||||
opacity: 0.8,
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
|
||||
miniScene.on('loaded', function () {
|
||||
miniScene.addLayer(provinceName);
|
||||
counter.loadLayer();
|
||||
});
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
// 页面被关闭
|
||||
miniScene.destroy();
|
||||
},
|
||||
});
|
||||
```
|
||||
方法代码
|
||||
```javascript
|
||||
function getJSON(url, callback) {
|
||||
my.request({
|
||||
url,
|
||||
method: 'GET',
|
||||
data: {
|
||||
from: '支付宝',
|
||||
production: 'AlipayJSAPI',
|
||||
},
|
||||
headers: {
|
||||
'content-type': 'application/json', // 默认值
|
||||
},
|
||||
dataType: 'json',
|
||||
fail() {
|
||||
callback(false, null);
|
||||
},
|
||||
complete(res) {
|
||||
callback(true, res.data);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleCanvas(_that, my, callback) {
|
||||
const selector = my.createSelectorQuery();
|
||||
const domSelector = selector.select('#canvas');
|
||||
domSelector
|
||||
.fields(
|
||||
{
|
||||
node: true,
|
||||
context: false,
|
||||
rect: true,
|
||||
computedStyle: ['height', 'width'],
|
||||
},
|
||||
function (res) {
|
||||
res.node.left = res.left;
|
||||
res.node.top = res.top;
|
||||
|
||||
const DPR = my.getSystemInfoSync().pixelRatio;
|
||||
res.node.width *= DPR;
|
||||
res.node.height *= DPR;
|
||||
|
||||
callback(res.node);
|
||||
},
|
||||
)
|
||||
.exec();
|
||||
}
|
||||
|
||||
class LayerCounter {
|
||||
private loadedLayer = 0;
|
||||
|
||||
private totalLayers: number;
|
||||
|
||||
private my: any;
|
||||
|
||||
private context: any;
|
||||
|
||||
constructor(totalLayers: number, my: any, context: any) {
|
||||
this.totalLayers = totalLayers;
|
||||
this.my = my;
|
||||
this.context = context;
|
||||
}
|
||||
|
||||
loadLayer() {
|
||||
this.loadedLayer++;
|
||||
const that = this;
|
||||
if (this.loadedLayer >= this.totalLayers) {
|
||||
this.my.hideLoading({
|
||||
page: that, // 防止执行时已经切换到其它页面，page 指向不准确
|
||||
});
|
||||
this.context.setData({
|
||||
isLoading: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: L7Mini hexagon
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/mini/demos/hexagon.zh.md`
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
---
|
||||
title: L7Mini 网格热力
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 案例
|
||||
<img width="200px" alt="网格热力" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*7VR6To9TiwsAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
### 网格热力
|
||||
|
||||
index.axml 页面结构代码
|
||||
```javascript
|
||||
<view class="isLoading" style="height: 100vh" a:if="{{isLoading}}">
|
||||
<view class="loadItem" a:for="{{10}}">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view id="box" class="wrap"
|
||||
onTouchStart="onTouchStart"
|
||||
onTouchMove="onTouchMove"
|
||||
onTouchEnd="onTouchEnd"
|
||||
>
|
||||
<canvas onReady="onCanvasReady" type="webgl" id="canvas" />
|
||||
|
||||
<view class="populationWrap">
|
||||
<view class="populationIcons">
|
||||
热力值:
|
||||
</view>
|
||||
<view class="populationIcons" a:for="{{population}}">
|
||||
<view> {{item.count}} </view>
|
||||
<view class="colorLine" style="background:{{item.color}}"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<image class="antvl7" mode="scaleToFill" src="{{antvl7}}" />
|
||||
|
||||
```
|
||||
index.less 样式代码
|
||||
```less
|
||||
.wrap {
|
||||
height: 100vh;
|
||||
#canvas {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.populationWrap {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
font-size: 0.6em;
|
||||
.populationIcons {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
.colorLine {
|
||||
height: 5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
index.ts 脚本代码
|
||||
```javascript
|
||||
import {
|
||||
Map,
|
||||
Scene,
|
||||
HeatmapLayer,
|
||||
dispatchTouchStart,
|
||||
dispatchTouchMove,
|
||||
dispatchTouchEnd,
|
||||
ImageLayer,
|
||||
} from '@antv/l7-mini';
|
||||
import { getJSON } from '../../request';
|
||||
import { antvl7, hexagonData } from '../../mockData';
|
||||
import { handleCanvas, LayerCounter } from '../../utils';
|
||||
|
||||
let miniScene;
|
||||
let counter;
|
||||
|
||||
Page({
|
||||
data: {
|
||||
isLoading: true,
|
||||
antvl7,
|
||||
population: [
|
||||
{ count: '0.1', color: '#CEF8D6' },
|
||||
{ count: '0.2', color: '#A1EDB8' },
|
||||
{ count: '0.3', color: '#7BE39E' },
|
||||
{ count: '0.4', color: '#5FD3A6' },
|
||||
{ count: '0.5', color: '#4AC5AF' },
|
||||
{ count: '0.6', color: '#34B6B7' },
|
||||
{ count: '0.7', color: '#289899' },
|
||||
{ count: '0.8', color: '#1D7F7E' },
|
||||
],
|
||||
},
|
||||
onLoad() {
|
||||
counter = new LayerCounter(1, my, this);
|
||||
my.showLoading();
|
||||
},
|
||||
onTouchStart(e) {
|
||||
dispatchTouchStart(e);
|
||||
},
|
||||
onTouchMove(e) {
|
||||
dispatchTouchMove(e);
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
dispatchTouchEnd(e);
|
||||
},
|
||||
onCanvasReady() {
|
||||
handleCanvas(this, my, (canvas) => {
|
||||
const miniMap = new Map({
|
||||
pitch: 56.499,
|
||||
center: [114.06, 22.53],
|
||||
rotation: 39.19,
|
||||
zoom: 13,
|
||||
});
|
||||
miniScene = new Scene({
|
||||
id: 'canvas',
|
||||
canvas,
|
||||
map: miniMap,
|
||||
hasBaseMap: false,
|
||||
});
|
||||
miniScene.setBgColor('rgb(240, 243, 246)');
|
||||
|
||||
const w = 0.125;
|
||||
const h = w * 0.5;
|
||||
const lng = 114.06;
|
||||
const lat = 22.53;
|
||||
const imageLayer = new ImageLayer();
|
||||
imageLayer.source(
|
||||
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*EbL4QIQ3zKoAAAAAAAAAAAAAARQnAQ',
|
||||
{
|
||||
parser: {
|
||||
type: 'image',
|
||||
extent: [lng - w, lat - h, lng + w, lat + h],
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
getJSON(hexagonData, function (result, data) {
|
||||
if (result) {
|
||||
const layer = new HeatmapLayer({ zIndex: 1 })
|
||||
.source(data, {
|
||||
transforms: [
|
||||
{
|
||||
type: 'hexagon',
|
||||
size: 100,
|
||||
field: 'h12',
|
||||
method: 'sum',
|
||||
},
|
||||
],
|
||||
})
|
||||
.size('sum', [0, 600])
|
||||
.shape('hexagonColumn')
|
||||
.style({
|
||||
coverage: 0.8,
|
||||
angle: 0,
|
||||
opacity: 1.0,
|
||||
})
|
||||
.color(
|
||||
'sum',
|
||||
[
|
||||
'#1D7F7E',
|
||||
'#289899',
|
||||
'#34B6B7',
|
||||
'#4AC5AF',
|
||||
'#5FD3A6',
|
||||
'#7BE39E',
|
||||
'#A1EDB8',
|
||||
'#CEF8D6',
|
||||
].reverse(),
|
||||
);
|
||||
miniScene.addLayer(layer);
|
||||
counter.loadLayer();
|
||||
}
|
||||
});
|
||||
|
||||
miniScene.on('loaded', function () {
|
||||
miniScene.addLayer(imageLayer);
|
||||
counter.loadLayer();
|
||||
});
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
// 页面被关闭
|
||||
miniScene.destroy();
|
||||
},
|
||||
});
|
||||
|
||||
```
|
||||
方法代码
|
||||
```javascript
|
||||
function getJSON(url, callback) {
|
||||
my.request({
|
||||
url,
|
||||
method: 'GET',
|
||||
data: {
|
||||
from: '支付宝',
|
||||
production: 'AlipayJSAPI',
|
||||
},
|
||||
headers: {
|
||||
'content-type': 'application/json', // 默认值
|
||||
},
|
||||
dataType: 'json',
|
||||
fail() {
|
||||
callback(false, null);
|
||||
},
|
||||
complete(res) {
|
||||
callback(true, res.data);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleCanvas(_that, my, callback) {
|
||||
const selector = my.createSelectorQuery();
|
||||
const domSelector = selector.select('#canvas');
|
||||
domSelector
|
||||
.fields(
|
||||
{
|
||||
node: true,
|
||||
context: false,
|
||||
rect: true,
|
||||
computedStyle: ['height', 'width'],
|
||||
},
|
||||
function (res) {
|
||||
res.node.left = res.left;
|
||||
res.node.top = res.top;
|
||||
|
||||
const DPR = my.getSystemInfoSync().pixelRatio;
|
||||
res.node.width *= DPR;
|
||||
res.node.height *= DPR;
|
||||
|
||||
callback(res.node);
|
||||
},
|
||||
)
|
||||
.exec();
|
||||
}
|
||||
|
||||
class LayerCounter {
|
||||
private loadedLayer = 0;
|
||||
|
||||
private totalLayers: number;
|
||||
|
||||
private my: any;
|
||||
|
||||
private context: any;
|
||||
|
||||
constructor(totalLayers: number, my: any, context: any) {
|
||||
this.totalLayers = totalLayers;
|
||||
this.my = my;
|
||||
this.context = context;
|
||||
}
|
||||
|
||||
loadLayer() {
|
||||
this.loadedLayer++;
|
||||
const that = this;
|
||||
if (this.loadedLayer >= this.totalLayers) {
|
||||
this.my.hideLoading({
|
||||
page: that, // 防止执行时已经切换到其它页面，page 指向不准确
|
||||
});
|
||||
this.context.setData({
|
||||
isLoading: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: L7Mini highLine
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/api/mini/demos/highLine.zh.md`
|
||||
|
|
@ -0,0 +1,277 @@
|
|||
---
|
||||
title: L7Mini 等高线
|
||||
order: 4
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 案例
|
||||
|
||||
<img width="200px" alt="等高线" src='https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*19PATJwDBWYAAAAAAAAAAAAAARQnAQ'>
|
||||
|
||||
### 中国人口地图
|
||||
|
||||
index.axml 页面结构代码
|
||||
```javascript
|
||||
|
||||
<view class="isLoading" style="height: 100vh" a:if="{{isLoading}}">
|
||||
<view class="loadItem" a:for="{{10}}">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view id="box" class="wrap"
|
||||
onTouchStart="onTouchStart"
|
||||
onTouchMove="onTouchMove"
|
||||
onTouchEnd="onTouchEnd"
|
||||
>
|
||||
<canvas onReady="onCanvasReady" type="webgl" id="canvas" />
|
||||
<view class="populationWrap">
|
||||
<view class="populationIcons">
|
||||
人口/千万:
|
||||
</view>
|
||||
<view class="populationIcons" a:for="{{population}}">
|
||||
<view> {{item.count}} </view>
|
||||
<view class="colorLine" style="background:{{item.color}}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image class="antvl7" mode="scaleToFill" src="{{antvl7}}" />
|
||||
|
||||
```
|
||||
index.less 样式代码
|
||||
```less
|
||||
.wrap {
|
||||
height: 100vh;
|
||||
#canvas {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
index.ts 脚本代码
|
||||
```javascript
|
||||
import {
|
||||
Map,
|
||||
Scene,
|
||||
PolygonLayer,
|
||||
LineLayer,
|
||||
dispatchTouchStart,
|
||||
dispatchTouchMove,
|
||||
dispatchTouchEnd,
|
||||
PointLayer,
|
||||
} from '@antv/l7-mini';
|
||||
import { getJSON } from '../../request';
|
||||
import { antvl7, chinaJSON, chinaBorderLine, population, provinceCenter } from '../../mockData';
|
||||
import { handleCanvas, LayerCounter } from '../../utils';
|
||||
|
||||
let miniScene;
|
||||
let counter;
|
||||
|
||||
Page({
|
||||
data: {
|
||||
isLoading: true,
|
||||
antvl7,
|
||||
population: [
|
||||
{ count: '> 9', color: '#662506' },
|
||||
{ count: '> 7', color: '#993404' },
|
||||
{ count: '> 6', color: '#cc4c02' },
|
||||
{ count: '> 5', color: '#ec7014' },
|
||||
{ count: '> 3', color: '#fe9929' },
|
||||
{ count: '> 2', color: '#fec44f' },
|
||||
{ count: '<= 2', color: '#fee391' },
|
||||
],
|
||||
},
|
||||
onLoad() {
|
||||
counter = new LayerCounter(4, my, this);
|
||||
my.showLoading();
|
||||
},
|
||||
onTouchStart(e) {
|
||||
dispatchTouchStart(e);
|
||||
},
|
||||
onTouchMove(e) {
|
||||
dispatchTouchMove(e);
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
dispatchTouchEnd(e);
|
||||
},
|
||||
onCanvasReady() {
|
||||
handleCanvas(this, my, (canvas) => {
|
||||
const miniMap = new Map({
|
||||
center: [105, 30.279383],
|
||||
zoom: 2,
|
||||
pitch: 0,
|
||||
});
|
||||
miniScene = new Scene({
|
||||
id: 'canvas',
|
||||
canvas,
|
||||
map: miniMap,
|
||||
hasBaseMap: false,
|
||||
});
|
||||
getJSON(chinaJSON, function (result, data) {
|
||||
if (result) {
|
||||
const polygonLayer = new PolygonLayer({})
|
||||
.source(data)
|
||||
.size('name', [0, 10000, 50000, 30000, 100000])
|
||||
.color('name', (name) => {
|
||||
const count = population[name];
|
||||
if (count && count > 90000000) {
|
||||
return '#662506';
|
||||
} else if (count && count > 70000000) {
|
||||
return '#993404';
|
||||
} else if (count && count > 65000000) {
|
||||
return '#cc4c02';
|
||||
} else if (count && count > 50000000) {
|
||||
return '#ec7014';
|
||||
} else if (count && count > 30000000) {
|
||||
return '#fe9929';
|
||||
} else if (count && count > 20000000) {
|
||||
return '#fec44f';
|
||||
} else {
|
||||
return '#fee391';
|
||||
}
|
||||
})
|
||||
.shape('fill')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
miniScene.addLayer(polygonLayer);
|
||||
counter.loadLayer();
|
||||
|
||||
const provinceLine = new PolygonLayer({})
|
||||
.source(data)
|
||||
.size(0.4)
|
||||
.color('#fff')
|
||||
.shape('line')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
miniScene.addLayer(provinceLine);
|
||||
counter.loadLayer();
|
||||
}
|
||||
});
|
||||
|
||||
getJSON(chinaBorderLine, function (result, data) {
|
||||
if (result) {
|
||||
const borderlineLayer = new LineLayer({ zIndex: 2 })
|
||||
.source(data)
|
||||
.shape('line')
|
||||
.size(0.6)
|
||||
.color('rgb(93,112,146)')
|
||||
.style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
miniScene.addLayer(borderlineLayer);
|
||||
counter.loadLayer();
|
||||
}
|
||||
});
|
||||
|
||||
const provinceName = new PointLayer({ zIndex: 1 })
|
||||
.source(provinceCenter, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat',
|
||||
},
|
||||
})
|
||||
.shape('n', 'text')
|
||||
.size(12)
|
||||
.color('#000')
|
||||
.style({
|
||||
stroke: '#fff',
|
||||
strokeWidth: 1,
|
||||
opacity: 0.8,
|
||||
textAllowOverlap: true,
|
||||
});
|
||||
|
||||
miniScene.on('loaded', function () {
|
||||
miniScene.addLayer(provinceName);
|
||||
counter.loadLayer();
|
||||
});
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
// 页面被关闭
|
||||
miniScene.destroy();
|
||||
},
|
||||
});
|
||||
```
|
||||
方法代码
|
||||
```javascript
|
||||
function getJSON(url, callback) {
|
||||
my.request({
|
||||
url,
|
||||
method: 'GET',
|
||||
data: {
|
||||
from: '支付宝',
|
||||
production: 'AlipayJSAPI',
|
||||
},
|
||||
headers: {
|
||||
'content-type': 'application/json', // 默认值
|
||||
},
|
||||
dataType: 'json',
|
||||
fail() {
|
||||
callback(false, null);
|
||||
},
|
||||
complete(res) {
|
||||
callback(true, res.data);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleCanvas(_that, my, callback) {
|
||||
const selector = my.createSelectorQuery();
|
||||
const domSelector = selector.select('#canvas');
|
||||
domSelector
|
||||
.fields(
|
||||
{
|
||||
node: true,
|
||||
context: false,
|
||||
rect: true,
|
||||
computedStyle: ['height', 'width'],
|
||||
},
|
||||
function (res) {
|
||||
res.node.left = res.left;
|
||||
res.node.top = res.top;
|
||||
|
||||
const DPR = my.getSystemInfoSync().pixelRatio;
|
||||
res.node.width *= DPR;
|
||||
res.node.height *= DPR;
|
||||
|
||||
callback(res.node);
|
||||
},
|
||||
)
|
||||
.exec();
|
||||
}
|
||||
|
||||
class LayerCounter {
|
||||
private loadedLayer = 0;
|
||||
|
||||
private totalLayers: number;
|
||||
|
||||
private my: any;
|
||||
|
||||
private context: any;
|
||||
|
||||
constructor(totalLayers: number, my: any, context: any) {
|
||||
this.totalLayers = totalLayers;
|
||||
this.my = my;
|
||||
this.context = context;
|
||||
}
|
||||
|
||||
loadLayer() {
|
||||
this.loadedLayer++;
|
||||
const that = this;
|
||||
if (this.loadedLayer >= this.totalLayers) {
|
||||
this.my.hideLoading({
|
||||
page: that, // 防止执行时已经切换到其它页面，page 指向不准确
|
||||
});
|
||||
this.context.setData({
|
||||
isLoading: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: L7Mini
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/api/mini/mini.zh.md`
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
---
|
||||
title: L7Mini 小程序模块教程
|
||||
order: 3
|
||||
---
|
||||
|
||||
`markdown:docs/common/style.md`
|
||||
|
||||
## 简介
|
||||
通过引入 L7Mini 模块，能让用户在小程序环境中使用 L7 地图可视化的能力，增强原生地图组件的可视化能力。
|
||||
|
||||
✨ 目前 L7Mini 兼容支付宝小程序，尚不支持微信小程序。
|
||||
✨ 目前 L7Mini 只支持无底图模式，即只展示可视化层。
|
||||
✨ L7Mini 模块的使用，除了画布获取和和事件注册因为小程序环境的原因需要用户额外处理，其余部分和普通 L7 的使用保持一致。
|
||||
|
||||
下面将介绍如何在支付宝小程序中使用 L7Mini 模块。
|
||||
|
||||
## 安装
|
||||
|
||||
目前 L7 在小程序开发中使用的能力全部来自 L7Mini 模块，用户只需要执行一次安装即可。
|
||||
|
||||
```javascript
|
||||
npm install @antv/l7-mini --save
|
||||
```
|
||||
|
||||
## 地图引用
|
||||
|
||||
在小程序环境中，用户无法引用高德地图和 Mapbox 地图， 只能引用小程序版本的地图类型。
|
||||
在 .ts/.js 页面脚本文件中引用
|
||||
|
||||
```javascript
|
||||
import {
|
||||
Map, // 其他地图类型不兼容小程序环境
|
||||
Scene,
|
||||
PointLayer,
|
||||
dispatchTouchStart,
|
||||
dispatchTouchMove,
|
||||
dispatchTouchEnd,
|
||||
} from '@antv/l7-mini';
|
||||
```
|
||||
地图小程序环境的使用和普通 H5 环境的使用保持一致。
|
||||
|
||||
```javascript
|
||||
const miniMap = new Map({
|
||||
center: [0, 0],
|
||||
zoom: -0.5,
|
||||
pitch: 0,
|
||||
});
|
||||
```
|
||||
|
||||
## 节点注册
|
||||
由于小程序限制，我们无法动态创建新的节点，因此我们需要事先在 .axml 文件中创建 canvas 画布节点
|
||||
|
||||
```javascript
|
||||
<canvas onReady="onCanvasReady" type="webgl" id="canvas" />
|
||||
```
|
||||
|
||||
注册完的节点会在脚本文件中获取使用。
|
||||
|
||||
✨ 我们需要完成 onCanvasReady 事件的注册，以便明确获取节点的时机。
|
||||
|
||||
## 事件注册
|
||||
|
||||
由于小程序环境的限制，我们无法动态注册事件，所以需要用户自己完成事件代理，下面将会说明如何完成时间的代理。
|
||||
|
||||
✨ 如果不进行事件的注册和转发，用户将无法对地图进行操作。
|
||||
|
||||
1. 在 .axml 文件中绑定基础事件
|
||||
|
||||
✨ 事件需要绑定在 canvas 节点上或是 canvas 的父节点上
|
||||
```javascript
|
||||
<view id="box" class="wrap"
|
||||
onTouchStart="onTouchStart" // 绑定基础事件
|
||||
onTouchMove="onTouchMove"
|
||||
onTouchEnd="onTouchEnd"
|
||||
>
|
||||
<canvas onReady="onCanvasReady" type="webgl" id="canvas" />
|
||||
<view class="populationWrap">
|
||||
<view class="populationIcons">
|
||||
人口/千万:
|
||||
</view>
|
||||
<view class="populationIcons" a:for="{{population}}">
|
||||
<view> {{item.count}} </view>
|
||||
<view class="colorLine" style="background:{{item.color}}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
2. .ts/.js 文件中完成事件的代理转发
|
||||
|
||||
引入代理方法
|
||||
```javascript
|
||||
import {
|
||||
Map,
|
||||
Scene,
|
||||
PointLayer,
|
||||
dispatchTouchStart, // L7Mini 封装的代理方法
|
||||
dispatchTouchMove,
|
||||
dispatchTouchEnd,
|
||||
} from '@antv/l7-mini';
|
||||
```
|
||||
|
||||
在 page 对象中注册方法
|
||||
```javascript
|
||||
page({
|
||||
...
|
||||
onTouchStart(e) {
|
||||
dispatchTouchStart(e);
|
||||
},
|
||||
onTouchMove(e) {
|
||||
dispatchTouchMove(e);
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
dispatchTouchEnd(e);
|
||||
},
|
||||
...
|
||||
})
|
||||
|
||||
```
|
||||
我们只需要完成基础方法的注册（touchstart/touchmove/touchend），L7Mini 会完成复合方法、手势的判断。
|
||||
|
||||
## 画布的获取与使用
|
||||
在小程序中，我们需要使用小程序提供的方法来获取页面节点。
|
||||
|
||||
我们通过在 .axml 在 canvas 画布组件上注册的 onCanvasReady 方法来判断获取画布的时机。
|
||||
|
||||
```javascript
|
||||
page({
|
||||
...
|
||||
onCanvasReady() {
|
||||
handleCanvas(my, canvas => {
|
||||
...
|
||||
// 正常开发 L7 代码
|
||||
...
|
||||
})
|
||||
}
|
||||
...
|
||||
})
|
||||
```
|
||||
|
||||
下面提供了获取画布节点通用方法，同时对画布进行一些处理方便后续使用。
|
||||
|
||||
```javascript
|
||||
function handleCanvas(my, callback) {
|
||||
const selector = my.createSelectorQuery();
|
||||
const domSelector = selector.select('#canvas');
|
||||
domSelector
|
||||
.fields(
|
||||
{
|
||||
node: true,
|
||||
context: false,
|
||||
rect: true,
|
||||
computedStyle: ['height', 'width'],
|
||||
},
|
||||
function (res) {
|
||||
// 内部计算使用 （必须设置）
|
||||
res.node.left = res.left;
|
||||
res.node.top = res.top;
|
||||
|
||||
// 设置画布的 DPR （必须设置）
|
||||
const DPR = my.getSystemInfoSync().pixelRatio;
|
||||
res.node.width *= DPR;
|
||||
res.node.height *= DPR;
|
||||
|
||||
// 返回 canvas 画布节点
|
||||
callback(res.node);
|
||||
},
|
||||
)
|
||||
.exec();
|
||||
}
|
||||
```
|
||||
|
||||
我们在获取到画布对象后需要传递给 scene 使用。
|
||||
|
||||
```javascript
|
||||
const miniScene = new Scene({
|
||||
id: 'canvas',
|
||||
canvas, // canvas 是我们从小程序页面上获取到的实际节点
|
||||
map: miniMap
|
||||
});
|
||||
```
|
||||
|
||||
## 销毁
|
||||
为了保证小程序的良好体验，在页面关闭时记得及时将 L7 内容进行销毁。
|
||||
|
||||
```javascript
|
||||
page({
|
||||
...
|
||||
onHide() {
|
||||
miniScene.destroy();
|
||||
},
|
||||
onUnload() {
|
||||
miniScene.destroy();
|
||||
},
|
||||
...
|
||||
})
|
||||
```
|
||||
|
||||
## 限制
|
||||
目前 L7Mini 尚不支持 marker/popup 等需要动态创建页面节点的能力，用户若是需要可以自己单独创建。
|
||||
|
|
@ -199,7 +199,23 @@ module.exports = {
|
|||
en: 'Earth Mode'
|
||||
},
|
||||
order: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'api/mini',
|
||||
title: {
|
||||
zh: '小程序',
|
||||
en: 'mini'
|
||||
},
|
||||
order: 3
|
||||
},
|
||||
{
|
||||
slug: 'api/mini/demos',
|
||||
title: {
|
||||
zh: '案例集合',
|
||||
en: 'demos'
|
||||
},
|
||||
order: 5
|
||||
},
|
||||
],
|
||||
examples: [
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue