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 2021-07-08 16:21:43 +08:00
parent fe2d964bdd
commit 14e4b4a6fe
6 changed files with 123 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/api/district/drilldown.zh.md
View File

@ -55,7 +55,35 @@ DrillDownLayer 提供默认提供通过 Layer 的交互事件，实现上钻下
### joinBy
数据关联，属性数据如何内部空间数据关联绑定 目前支持 NAME_CHN,adcode 字段连接
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名
对照表 `Array [string, string]` 第一个值为空间数据字段，第二个为传入数据字段名。
- 主要使用场景
```javascript
popup: {
enable: true,
Html: props => { // props 是我们拿到的数据 customValue 是我们的业务数据
return `<span>${props.customValue}</span>`;
}
}
```
- 空间数据字段是 l7-district 内部自己定义的字段 NAME_CHN, adcode
- joinBy 第二个值是我们传入的数据中的字段
```javascript
const data = [
{
customValue: '34.5', // 自定义的值
adcode: '330102', // 用于与空间数据字段对应
},
{
customValue: '52.6',
adcode: '330103',
},
...
]
```
### label

26
packages/layers/src/utils/dataMappingStyle.ts
View File

@ -85,16 +85,17 @@ function handleStyleDataMapping(configToUpdate: IConfigToUpdate, layer: any) {
*/
function handleStyleFloat(fieldName: string, layer: ILayer, styleFloat: any) {
if (isString(styleFloat)) {
// opacity = 'string'
// 如果传入的 styleFloat 是 string 类型，那么就认为其对应的是传入数据的字段
registerStyleAttribute(fieldName, layer, styleFloat, (value: any) => {
return value;
});
} else if (isNumber(styleFloat)) {
// opacity = 0.4 -> opacity 传入数字
// 传入 number、默认值处理
registerStyleAttribute(fieldName, layer, [styleFloat], undefined);
} else if (isArray(styleFloat) && styleFloat.length === 2) {
} else if (isArray(styleFloat) && styleFloat.length === 2) {
// 传入的 styleFloat 是长度为 2 的数组
if (isString(styleFloat[0]) && isFunction(styleFloat[1])) {
// opacity = ['string', callback]
// 字段回调函数 [string, callback]
registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]);
} else if (
isString(styleFloat[0]) &&
@ -102,12 +103,14 @@ function handleStyleFloat(fieldName: string, layer: ILayer, styleFloat: any) {
isNumber(styleFloat[1][0]) &&
isNumber(styleFloat[1][1])
) {
// opacity = ['string', [start: number, end: nuber]]
// 字段映射 [string, [start: number, end: number]]
registerStyleAttribute(fieldName, layer, styleFloat[0], styleFloat[1]);
} else {
// 兼容
registerStyleAttribute(fieldName, layer, [1.0], undefined);
}
} else {
// 兼容
registerStyleAttribute(fieldName, layer, [1.0], undefined);
}
}
@ -123,7 +126,7 @@ function handleStyleOffsets(
styleOffsets: any,
) {
if (isString(styleOffsets)) {
// 字符串
// 如果传入的 styleOffsets 是 string 类型，那么就认为其对应的是传入数据的字段
registerStyleAttribute(fieldName, layer, styleOffsets, (value: any) => {
return value;
});
@ -133,7 +136,7 @@ function handleStyleOffsets(
isString(styleOffsets[0]) &&
isFunction(styleOffsets[1])
) {
// callback
// 字段回调函数 [string, callback]
registerStyleAttribute(fieldName, layer, styleOffsets[0], styleOffsets[1]);
} else if (
isArray(styleOffsets) &&
@ -141,9 +144,10 @@ function handleStyleOffsets(
isNumber(styleOffsets[0]) &&
isNumber(styleOffsets[1])
) {
// normal
// 字段映射 [string, [start: number, end: number]]
registerStyleAttribute(fieldName, layer, styleOffsets, undefined);
} else {
// 兼容
registerStyleAttribute(fieldName, layer, [0, 0], undefined);
}
}
@ -156,20 +160,26 @@ function handleStyleOffsets(
*/
function handleStyleColor(fieldName: string, layer: ILayer, styleColor: any) {
if (isString(styleColor)) {
// 如果传入的 styleColor 是 string 类型，那么就认为其是颜色值
registerStyleAttribute(fieldName, layer, styleColor, undefined);
} else if (isArray(styleColor) && styleColor.length === 2) {
// 传入的 styleColor 是长度为 2 的数组
if (isString(styleColor[0]) && isFunction(styleColor[1])) {
// 字段回调函数 [string, callback]
registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]);
} else if (
isString(styleColor[0]) &&
isArray(styleColor[1]) &&
styleColor[1].length > 0
) {
// 字段映射 [string, [start: string, end: string]]
registerStyleAttribute(fieldName, layer, styleColor[0], styleColor[1]);
} else {
// 兼容
registerStyleAttribute(fieldName, layer, '#fff', undefined);
}
} else {
// 兼容
registerStyleAttribute(fieldName, layer, '#fff', undefined);
}
}

16
stories/District/Layer/world.tsx
View File

@ -48,22 +48,22 @@ export default class Country extends React.Component {
field: 'NAME_ENG',
padding: [5, 5],
},
popup: {
popup: {
// enable: true,
enable: false,
Html: props => {
Html: (props) => {
return `<span>${props.NAME_CHN}</span>`;
},
},
});
// console.time('layer');
// Layer.on('loaded', () => {
// console.timeEnd('layer');
// });
console.log('======')
console.time('layer');
Layer.on('loaded', () => {
console.timeEnd('layer');
});
console.log('======');
Layer.on('click', (e: any) => {
// alert(e);
console.log(e)
console.log(e);
// alert(1)
});
});

47
stories/Map/components/amap2demo_lineHeight.tsx
View File

@ -29,14 +29,13 @@ export default class Amap2demo_lineHeight extends React.Component {
)
.then((res) => res.json())
.then((data) => {
// let data = {
// "type": "FeatureCollection",
// "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
// "features": [
// { "type": "Feature", "properties": { "ID": 29, "ELEV": 1520.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.608042343554914, 23.123174402406956 ], [ 102.608042343554914, 23.12303965511434 ], [ 102.608042119163088, 23.123036986851119 ], [ 102.608031339379679, 23.122770160529104 ], [ 102.608031339379679, 23.122500665943868 ], [ 102.608042119163088, 23.122470722101063 ], [ 102.6082217822199, 23.122231171358631 ], [ 102.608311613748313, 23.122171283673023 ], [ 102.608580436277236, 23.122231171358631 ], [ 102.608581108333553, 23.122231416131189 ], [ 102.608737131514474, 23.122500665943868 ], [ 102.608737131514474, 23.122770160529104 ], [ 102.608850602918793, 23.12290490782172 ], [ 102.608958400752883, 23.12303965511434 ], [ 102.608958400752883, 23.123174402406956 ] ] } },
// { "type": "Feature", "properties": { "ID": 30, "ELEV": 1530.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.607834863512082, 23.123174402406956 ], [ 102.607834863512082, 23.12303965511434 ], [ 102.607923541545574, 23.122770160529104 ], [ 102.607923541545574, 23.122500665943868 ], [ 102.608012175320283, 23.122231171358631 ], [ 102.608042119163088, 23.122182172343134 ], [ 102.608311613748313, 23.122021564459004 ], [ 102.608581108333553, 23.122089399325638 ], [ 102.608703539025072, 23.122231171358631 ], [ 102.608850602918793, 23.122462166717405 ], [ 102.608877552377308, 23.122500665943868 ], [ 102.608877552377308, 23.122770160529104 ], [ 102.609093148045503, 23.12303965511434 ], [ 102.609093148045503, 23.123174402406956 ] ] } },
// ]
// let data = {
// "type": "FeatureCollection",
// "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
// "features": [
// { "type": "Feature", "properties": { "ID": 29, "ELEV": 1520.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.608042343554914, 23.123174402406956 ], [ 102.608042343554914, 23.12303965511434 ], [ 102.608042119163088, 23.123036986851119 ], [ 102.608031339379679, 23.122770160529104 ], [ 102.608031339379679, 23.122500665943868 ], [ 102.608042119163088, 23.122470722101063 ], [ 102.6082217822199, 23.122231171358631 ], [ 102.608311613748313, 23.122171283673023 ], [ 102.608580436277236, 23.122231171358631 ], [ 102.608581108333553, 23.122231416131189 ], [ 102.608737131514474, 23.122500665943868 ], [ 102.608737131514474, 23.122770160529104 ], [ 102.608850602918793, 23.12290490782172 ], [ 102.608958400752883, 23.12303965511434 ], [ 102.608958400752883, 23.123174402406956 ] ] } },
// { "type": "Feature", "properties": { "ID": 30, "ELEV": 1530.0 }, "geometry": { "type": "LineString", "coordinates": [ [ 102.607834863512082, 23.123174402406956 ], [ 102.607834863512082, 23.12303965511434 ], [ 102.607923541545574, 23.122770160529104 ], [ 102.607923541545574, 23.122500665943868 ], [ 102.608012175320283, 23.122231171358631 ], [ 102.608042119163088, 23.122182172343134 ], [ 102.608311613748313, 23.122021564459004 ], [ 102.608581108333553, 23.122089399325638 ], [ 102.608703539025072, 23.122231171358631 ], [ 102.608850602918793, 23.122462166717405 ], [ 102.608877552377308, 23.122500665943868 ], [ 102.608877552377308, 23.122770160529104 ], [ 102.609093148045503, 23.12303965511434 ], [ 102.609093148045503, 23.123174402406956 ] ] } },
// ]
// }
const layer = new LineLayer({})
.source(data)
@ -47,22 +46,22 @@ export default class Amap2demo_lineHeight extends React.Component {
.scale('ELEV', {
type: 'quantize',
})
.color('#f00')
// .color(
// 'ELEV',
// [
// '#E4682F',
// '#FF8752',
// '#FFA783',
// '#FFBEA8',
// '#FFDCD6',
// '#EEF3FF',
// '#C8D7F5',
// '#A5C1FC',
// '#7FA7F9',
// '#5F8AE5',
// ].reverse(),
// );
.color('#f00');
// .color(
// 'ELEV',
// [
// '#E4682F',
// '#FF8752',
// '#FFA783',
// '#FFBEA8',
// '#FFDCD6',
// '#EEF3FF',
// '#C8D7F5',
// '#A5C1FC',
// '#7FA7F9',
// '#5F8AE5',
// ].reverse(),
// );
scene.addLayer(layer);
});
});

1
stories/Map/components/amap2demo_lineLinear.tsx
View File

@ -1,4 +1,3 @@
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';

81
stories/Map/components/amap2demo_markerPopup.tsx
View File

@ -3,45 +3,54 @@ import { MarkerLayer, Scene } from '@antv/l7';
import { AMapScene, Marker, Popup } from '@antv/l7-react';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
import {useState} from 'react'
import { useState } from 'react';
const Amap2demo_markerPopup = () => {
const [showPopup , setShowPopup] = useState(false)
const [showPopup, setShowPopup] = useState(false);
return (
<AMapScene
map={{
center: [114, 32],
pitch: 0,
style: 'dark',
zoom: 6,
}}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
<Marker key={1} lnglat={[112, 30]}
onMarkerLoaded={(marker) => {
console.log(marker.getElement().children[0].children[0])
marker.getElement().children[0].children[0].addEventListener('mouseenter', (e) => {
setShowPopup(true)
})
marker.getElement().children[0].children[0].addEventListener('mouseout', (e) => {
setShowPopup(false)
});
map={{
center: [114, 32],
pitch: 0,
style: 'dark',
zoom: 6,
}}
/>
{showPopup && <Popup
lnglat={[120, 30]}
option={{
closeOnClick: false,
}}>
<span>这是个信息框</span>
</Popup> }
</AMapScene>
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
<Marker
key={1}
lnglat={[112, 30]}
onMarkerLoaded={(marker) => {
console.log(marker.getElement().children[0].children[0]);
marker
.getElement()
.children[0].children[0].addEventListener('mouseenter', (e) => {
setShowPopup(true);
});
marker
.getElement()
.children[0].children[0].addEventListener('mouseout', (e) => {
setShowPopup(false);
});
}}
/>
{showPopup && (
<Popup
lnglat={[120, 30]}
option={{
closeOnClick: false,
}}
>
<span>这是个信息框</span>
</Popup>
)}
</AMapScene>
);
}
export default Amap2demo_markerPopup
};
export default Amap2demo_markerPopup;