mirror of https://gitee.com/antv-l7/antv-l7
feat: 补充官网文档：boxSelect
This commit is contained in:
2912401452
parent
9dd3993519
commit
e17977b8e0
|
|
@ -590,3 +590,17 @@ layer.on('inited', (option) => {});
|
|||
|
||||
- target 当前 layer
|
||||
- type 事件类型
|
||||
|
||||
## 图层框选
|
||||
|
||||
### boxSelect
|
||||
|
||||
参数 option
|
||||
- box [x1: number, y1: number, x2: number, y2: number] 相较于
|
||||
- cb (...args: any[]) => void 传入的回调方法，返回框选内部的 feature
|
||||
|
||||
```javascript
|
||||
layer.boxSelect(box, cb);
|
||||
// (x1, y1), (x2, y2) 框选的方框左上角和右下角相对于地图左上角的像素坐标
|
||||
// cb 是传入的回调函数，回调函数返回的参数是选中的 feature 对象数组，对象的字段和用户传入的数据相关
|
||||
```
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ scene.on('loaded', () => {
|
|||
})
|
||||
.shape('icon', 'text')
|
||||
.size(20)
|
||||
.color('w', ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99'])
|
||||
.color('w', [ '#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99' ])
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@ const scene = new Scene({
|
|||
})
|
||||
});
|
||||
const dataColor = {
|
||||
bigRainBC: "#285A8C",
|
||||
middleRainBC: "#326EA0",
|
||||
smallRainBC: "#4678AA",
|
||||
sunBC: "#00BFFF",
|
||||
cloudBC: "#1E90FF"
|
||||
}
|
||||
bigRainBC: '#285A8C',
|
||||
middleRainBC: '#326EA0',
|
||||
smallRainBC: '#4678AA',
|
||||
sunBC: '#00BFFF',
|
||||
cloudBC: '#1E90FF'
|
||||
};
|
||||
const originData = [
|
||||
{
|
||||
lng: 121.7,
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ scene.on('loaded', () => {
|
|||
})
|
||||
.source(data)
|
||||
.shape('fill')
|
||||
.color('count', ['#f2f0f7','#dadaeb','#bcbddc','#9e9ac8','#756bb1','#54278f'])
|
||||
.color('count', [ '#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f' ])
|
||||
.style({
|
||||
opacity: 0.6
|
||||
});
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ scene.on('loaded', () => {
|
|||
})
|
||||
.source(data)
|
||||
.shape('fill')
|
||||
.color('count', ['#f2f0f7','#dadaeb','#bcbddc','#9e9ac8','#756bb1','#54278f'])
|
||||
.color('count', [ '#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f' ])
|
||||
.style({
|
||||
opacity: 0.6
|
||||
});
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@ export default class Control extends EventEmitter {
|
|||
};
|
||||
}
|
||||
public setPosition(position: PositionName = 'bottomright') {
|
||||
|
||||
// 考虑组件的自动布局，需要销毁重建
|
||||
const controlService = this.controlService;
|
||||
if (controlService) {
|
||||
|
|
|
|||
|
|
@ -86,58 +86,9 @@ export default class Amap2demo_text extends React.Component {
|
|||
// textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
|
||||
});
|
||||
|
||||
// https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json
|
||||
// const pointIconFontLayer = new PointLayer({})
|
||||
// .source(
|
||||
// [
|
||||
// {
|
||||
// j: 140,
|
||||
// w: 30,
|
||||
// m: '',
|
||||
// },
|
||||
// {
|
||||
// j: 140,
|
||||
// w: 32,
|
||||
// m: '',
|
||||
// },
|
||||
// {
|
||||
// j: 140,
|
||||
// w: 34,
|
||||
// m: 'icon1',
|
||||
// },
|
||||
// {
|
||||
// j: 140,
|
||||
// w: 36,
|
||||
// m: 'icon2',
|
||||
// },
|
||||
// ],
|
||||
// {
|
||||
// parser: {
|
||||
// type: 'json',
|
||||
// x: 'j',
|
||||
// y: 'w',
|
||||
// },
|
||||
// },
|
||||
// )
|
||||
// .shape('m', 'text')
|
||||
// .size(12)
|
||||
// .color('w', ['#f00', '#f00', '#0f0'])
|
||||
// .style({
|
||||
// textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
// textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
// spacing: 2, // 字符间距
|
||||
// padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
// stroke: '#ffffff', // 描边颜色
|
||||
// strokeWidth: 0.3, // 描边宽度
|
||||
// strokeOpacity: 1.0,
|
||||
// fontFamily,
|
||||
// // fontFamily: "Times New Roman",
|
||||
// iconfont: true,
|
||||
// textAllowOverlap: true,
|
||||
// });
|
||||
// scene.addLayer(pointIconFontLayer);
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
// @ts-ignore
|
||||
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
import * as React from 'react';
|
||||
export default class Amap2demo_textSelect extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
let fontFamily = 'iconfont';
|
||||
let fontPath =
|
||||
'//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496';
|
||||
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
center: [120, 30.258134],
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
zoom: 3,
|
||||
// viewMode: "3D",
|
||||
// mask
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
scene.addIconFont('icon1', '');
|
||||
// scene.addIconFont("icon2", "")
|
||||
|
||||
// scene.addIconFonts([
|
||||
// ['icon1', ''],
|
||||
// ['icon2', ''],
|
||||
// ]);
|
||||
|
||||
scene.addFontFace(fontFamily, fontPath);
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
console.log(data.list[0])
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
},
|
||||
})
|
||||
.shape('icon', 'text')
|
||||
.size(12)
|
||||
.color('w', ['#f00', '#f00', '#0f0'])
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
fontFamily,
|
||||
// fontFamily: "Times New Roman",
|
||||
iconfont: true,
|
||||
// textAllowOverlap: true,
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
pointLayer.boxSelect([0, 0, 155, 278], (f) => {
|
||||
console.log('======')
|
||||
console.log(f)
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const pointLayer = new PointLayer({})
|
||||
.source(data.list, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'j',
|
||||
y: 'w',
|
||||
},
|
||||
})
|
||||
.shape('m', 'text')
|
||||
.size(12)
|
||||
.color('w', ['#0e0030', '#0e0030', '#0e0030'])
|
||||
.style({
|
||||
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
||||
textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
|
||||
spacing: 2, // 字符间距
|
||||
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
|
||||
stroke: '#ffffff', // 描边颜色
|
||||
strokeWidth: 0.3, // 描边宽度
|
||||
strokeOpacity: 1.0,
|
||||
// textAllowOverlap: true
|
||||
});
|
||||
scene.addLayer(pointLayer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import Amap2demo from './components/amap2demo'
|
|||
import Amap2demo_extrude from './components/amap2demo_extrude'
|
||||
import Amapdemo_extrude from './components/amapdemo_extrude'
|
||||
import Amap2demo_text from './components/amap2demo_text'
|
||||
import Amap2demo_textSelect from './components/amap2demo_textSelect'
|
||||
import Amap2demo_iconfont from './components/amap2demo_iconfont';
|
||||
import Amap2demo_image from './components/amap2demo_image'
|
||||
|
||||
|
|
@ -54,6 +55,7 @@ storiesOf('地图方法', module)
|
|||
.add('高德地图 point/extrude', () => <Amapdemo_extrude />)
|
||||
.add('高德地图2.0 point/extrude', () => <Amap2demo_extrude />)
|
||||
.add('高德地图2.0 point/text', () => <Amap2demo_text />)
|
||||
.add('高德地图2.0 point/textSelect', () => <Amap2demo_textSelect />)
|
||||
.add('高德地图2.0 point/iconfont', () => <Amap2demo_iconfont />)
|
||||
.add('高德地图2.0 point/image', () => <Amap2demo_image />)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue