p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs: 补充官网关于简单坐标系/非地理坐标系的文档和案例

This commit is contained in:
2912401452 2022-03-23 16:03:18 +08:00
parent 07b605d61c
commit afe66743c8
6 changed files with 589 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/api/experiment/simpleCoordinates.en.md Normal file
View File

@ -0,0 +1,6 @@
---
title: SimpleCoordinates
order: 1
---
`markdown:docs/api/experiment/simpleCoordinates.zh.md`

178
docs/api/experiment/simpleCoordinates.zh.md Normal file
View File

@ -0,0 +1,178 @@
---
title: 简单坐标系（非地理坐标系）
order: 1
---
`markdown:docs/common/style.md`
我们通常使用经纬度来描述地理位置，但是在某些特殊的场景，我们往往倾向于使用更加简单的平面坐标系(xyz)来描述位置的相对坐标，为此 L7 提供了简单坐标系的模式。
<img width="60%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*HenKR5VsXX0AAAAAAAAAAAAAARQnAQ'>
[在线案例](/zh/examples/point/text#simpleCoordinate)
### Map
为了使用简单坐标系，我们需要是使用 L7 自定义的 Map 地图类型，同时制定 map 的 version 属性
```javascript
import { Scene, ImageLayer, PointLayer, } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Map({
center: [500, 500],
pitch: 0,
zoom: 3,
version: 'SIMPLE',
mapSize: 1000,
maxZoom: 5,
minZoom: 2,
pitchEnabled: false,
rotateEnabled: false,
}),
});
```
#### version
用户在使用自定义坐标系的时候，需要将地图的类型设置成 'SIMPLE'
#### mapSize: number
用户在使用自定义坐标系的时候，可以设置绘图区域的大小。绘图区域默认是 10000 X 10000 的矩形区域，坐标起点是左下角，水平向右为 X 正方向，垂直向上是 Y 正方向。
<img width="50%" style="display: block;margin: 0 auto;" alt="案例" src='https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*qimkTLy0P6IAAAAAAAAAAAAAARQnAQ'>
#### pitchEnabled/rotateEnabled
用户在使用自定义坐标系的时候，推荐将 pitchEnabled/rotateEnabled 设置为 false
#### layer
用户在使用自定义坐标系的时候，可以正常使用普通的图层，唯一的区别就是需要将原本的经纬度坐标转化为平面坐标
```javascript
const imagelayer = new ImageLayer({}).source(
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I0X5R4jAUQ4AAAAAAAAAAAAAARQnAQ',
{
parser: {
type: 'image',
extent: [360, 400, 640, 600],
},
},
);
const textlayer = new PointLayer({ zIndex: 2 })
.source(
[
{
x: 515,
y: 575,
t: '小屋',
},
...
],
{
parser: {
type: 'json',
x: 'x',
y: 'y',
},
},
)
.shape('t', 'text')
.size(12)
.active({
color: '#00f',
mix: 0.9
})
.color('rgb(86, 156, 214)')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
fontWeight: '800',
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
strokeWidth: 2, // 描边宽度
textAllowOverlap: true,
});
const lineData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
testOpacity: 0.8,
},
geometry: {
type: 'Polygon',
coordinates: [
[
[6000, 6000],
[6000, 7000],
[7000, 7000],
[7000, 6000],
],
],
},
},
],
};
const linelayer = new LineLayer()
.source(lineData)
.shape('line')
.size(10)
.color('#0f0')
.active(true);
const polygonData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
testOpacity: 0.4,
},
geometry: {
type: 'MultiPolygon',
coordinates: [
[
[
[6000, 6000],
[6000, 7000],
[7000, 7000],
[7000, 6000],
[6000, 6000],
],
[
[6300, 6300],
[6300, 6700],
[6700, 6700],
[6700, 6300],
[6300, 6300],
],
],
[
[
[5000, 5000],
[5000, 6000],
[6000, 6000],
[6000, 5000],
[5000, 5000],
],
],
],
},
},
],
};
const polygonLayer = new PolygonLayer()
.source(polygonData)
.shape('fill')
.color('#f00')
.style({
opacity: 0.6,
})
.active(true);
```

5
examples/point/text/demo/meta.json
View File

@ -38,6 +38,11 @@
"filename": "updown.js",
"title": "走势图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*LJXlRraIokAAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "simpleCoordinate.js",
"title": "平面区域标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*OXlZRKw7AoUAAAAAAAAAAAAAARQnAQ"
}
]
}

226
examples/point/text/demo/simpleCoordinate.js Normal file
View File

@ -0,0 +1,226 @@
import { Scene, ImageLayer, PointLayer, } from '@antv/l7';
import { Map } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Map({
center: [500, 500],
pitch: 0,
zoom: 3,
version: 'SIMPLE',
mapSize: 1000,
maxZoom: 5,
minZoom: 2,
pitchEnabled: false,
rotateEnabled: false,
}),
});
scene.setBgColor('rgb(94, 182, 140)');
const textlayer = new PointLayer({ zIndex: 2 })
.source(
[
{
x: 515,
y: 575,
t: '小屋',
},
{
x: 507,
y: 560,
t: '小屋',
},
{
x: 495,
y: 553,
t: '别墅',
},
{
x: 499,
y: 547,
t: '住宅',
},
{
x: 480,
y: 544,
t: '住宅',
},
{
x: 471,
y: 539,
t: '住宅',
},
{
x: 485,
y: 527,
t: '住宅',
},
{
x: 463,
y: 533,
t: '住宅',
},
{
x: 477,
y: 523,
t: '住宅',
},
{
x: 473,
y: 517,
t: '住宅',
},
{
x: 535,
y: 535,
t: '住宅小区',
},
{
x: 550,
y: 545,
t: '住宅小区',
},
{
x: 578,
y: 559,
t: '别墅',
},
{
x: 583,
y: 554,
t: '别墅',
},
{
x: 590,
y: 538,
t: '别墅',
},
{
x: 599,
y: 537,
t: '住宅',
},
{
x: 567,
y: 526,
t: '住宅',
},
{
x: 564,
y: 519,
t: '住宅',
},
{
x: 553.5,
y: 483,
t: '住宅',
},
{
x: 554,
y: 479,
t: '住宅',
},
{
x: 547,
y: 478.5,
t: '住宅',
},
{
x: 533.5,
y: 475,
t: '住宅',
},
{
x: 516,
y: 463,
t: '住宅',
},
{
x: 538,
y: 453,
t: '住宅',
},
{
x: 510.5,
y: 444,
t: '别墅',
},
{
x: 488,
y: 440.5,
t: '住宅',
},
{
x: 476.5,
y: 438.5,
t: '别墅',
},
{
x: 474.5,
y: 431,
t: '别墅',
},
{
x: 462,
y: 434.5,
t: '别墅',
},
{
x: 431,
y: 436,
t: '住宅',
},
{
x: 428,
y: 430,
t: '住宅',
},
{
x: 402.5,
y: 448.5,
t: '别墅',
},
{
x: 393.5,
y: 456,
t: '别墅',
}
],
{
parser: {
type: 'json',
x: 'x',
y: 'y',
},
},
)
.shape('t', 'text')
.size(12)
.active({
color: '#00f',
mix: 0.9
})
.color('rgb(86, 156, 214)')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
fontWeight: '800',
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
strokeWidth: 2, // 描边宽度
textAllowOverlap: true,
});
const imagelayer = new ImageLayer({}).source(
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*I0X5R4jAUQ4AAAAAAAAAAAAAARQnAQ',
{
parser: {
type: 'image',
extent: [360, 400, 640, 600],
},
},
);
scene.on('loaded', () => {
scene.addLayer(imagelayer);
scene.addLayer(textlayer);
});

8
gatsby-config.js
View File

@ -270,6 +270,14 @@ module.exports = {
},
order: 14,
},
{
slug: 'api/experiment',
title: {
zh: '实验特性',
en: 'experiment',
},
order: 15,
},
],
examples: [
{

187
stories/simpleMap/components/parkdemo.tsx
View File

@ -15,10 +15,10 @@ export default class Demo extends React.Component {
map: new Map({
center: [500, 500],
pitch: 0,
zoom: 2.5,
zoom: 3,
version: 'SIMPLE',
mapSize: 1000,
maxZoom: 4,
maxZoom: 5,
minZoom: 2,
pitchEnabled: false,
rotateEnabled: false,
@ -30,30 +30,170 @@ export default class Demo extends React.Component {
.source(
[
{
x: 470,
y: 520,
t: '库布齐',
x: 515,
y: 575,
t: '小屋',
},
{
x: 490,
y: 580,
t: '阿拉善',
x: 507,
y: 560,
t: '小屋',
},
{
x: 530,
y: 530,
t: '鄂尔多斯',
x: 495,
y: 553,
t: '别墅',
},
{
x: 545,
y: 480,
t: '武威',
x: 499,
y: 547,
t: '住宅',
},
{
x: 490,
y: 470,
t: '黄山洋湖',
x: 480,
y: 544,
t: '住宅',
},
{
x: 471,
y: 539,
t: '住宅',
},
{
x: 485,
y: 527,
t: '住宅',
},
{
x: 463,
y: 533,
t: '住宅',
},
{
x: 477,
y: 523,
t: '住宅',
},
{
x: 473,
y: 517,
t: '住宅',
},
{
x: 535,
y: 535,
t: '住宅小区',
},
{
x: 550,
y: 545,
t: '住宅小区',
},
{
x: 578,
y: 559,
t: '别墅',
},
{
x: 583,
y: 554,
t: '别墅',
},
{
x: 590,
y: 538,
t: '别墅',
},
{
x: 599,
y: 537,
t: '住宅',
},
{
x: 567,
y: 526,
t: '住宅',
},
{
x: 564,
y: 519,
t: '住宅',
},
{
x: 553.5,
y: 483,
t: '住宅',
},
{
x: 554,
y: 479,
t: '住宅',
},
{
x: 547,
y: 478.5,
t: '住宅',
},
{
x: 533.5,
y: 475,
t: '住宅',
},
{
x: 516,
y: 463,
t: '住宅',
},
{
x: 538,
y: 453,
t: '住宅',
},
{
x: 510.5,
y: 444,
t: '别墅',
},
{
x: 488,
y: 440.5,
t: '住宅',
},
{
x: 476.5,
y: 438.5,
t: '别墅',
},
{
x: 474.5,
y: 431,
t: '别墅',
},
{
x: 462,
y: 434.5,
t: '别墅',
},
{
x: 431,
y: 436,
t: '住宅',
},
{
x: 428,
y: 430,
t: '住宅',
},
{
x: 402.5,
y: 448.5,
t: '别墅',
},
{
x: 393.5,
y: 456,
t: '别墅',
}
],
{
parser: {
@ -64,15 +204,20 @@ export default class Demo extends React.Component {
},
)
.shape('t', 'text')
.size(14)
.active(true)
.color('#0e0030')
.size(12)
.active({
color: '#00f',
mix: 0.9
})
// .color('#0e0030')
.color('rgb(86, 156, 214)')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
fontWeight: '800',
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
strokeWidth: 1.5, // 描边宽度
strokeWidth: 2, // 描边宽度
textAllowOverlap: true,
});