Skip to content

Commit

Permalink
chore: 升级flow line arrow 样式 (#2016)
Browse files Browse the repository at this point in the history 
* chore: rebase master

* chore: line symbol

* feat: line stmbol storke 效果

* fix: 圆形 symbol 样式

* chore: 高德地图和mapbox 兼容

* chore: rebase master

* fix: 删除arrow.ts

* docs: 开发demo
  • Loading branch information
@lzxue
lzxue authored Nov 13, 2023
1 parent 9fe907b commit 3f43108
Show file tree
Hide file tree
Showing 25 changed files with 706 additions and 260 deletions.
35 changes: 20 additions & 15 deletions dev-demos/features/line/demos/flowline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap,Map,Mapbox } from '@antv/l7-maps';
import { GaodeMap,Map,BaiduMap } from '@antv/l7-maps';

import React, { useEffect } from 'react';

export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new Map({
map: new BaiduMap({
center: [8.654789284720719, 47.412606122294044],
zoom: 5,
style: 'dark',
Expand Down Expand Up @@ -80,11 +80,12 @@ import {
}
}).sort((a:any,b:any) => {
return a.count - b.count;
})
});


const layer = new LineLayer({
zIndex: 0,
autoFit:true
})
.source(oddata, {
parser: {
Expand All @@ -96,7 +97,7 @@ import {
type: 'quantile',
})
.size('count', [0.5, 1, 2,2,2,6,8, 10])
.shape('flowline')
.shape('flowline')
.color('count',[
'#fef6b5',
'#ffdd9a',
Expand All @@ -107,18 +108,22 @@ import {
'#e15383',
])
.style({
// opacity: {
// field: 'count',
// values: [0.2,0.4,0.6,0.8],
// symbol:{
// target:'halfTriangle',
// source:'none',
// },
opacity:1.0,
gapWidth: 2,
// offsets:{
// field: 'count',
// values:()=>{
// return [10 + Math.random()*20, 10 + Math.random()*20]
// }
// },// 支持数据映射
opacity: {
field: 'count',
value: [0.2,0.4,0.6,0.8],
},
// opacity:1,
gapWidth: 1,
offsets:{
field: 'count',
value:()=>{
return [20, 20]
}
},// 支持数据映射
strokeWidth: 1,
strokeOpacity:1,
stroke: '#000',
Expand Down
198 changes: 111 additions & 87 deletions dev-demos/features/line/demos/lineArrow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,34 @@
// @ts-ignore
import { LineLayer, Scene, PointLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap,Mapbox,Map,BaiduMap } from '@antv/l7-maps';
import React, { useEffect } from 'react';

export default () => {
useEffect(() => {
const symbol = {
source:'none',
target:'halfTriangle',
};
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 120.15, 30.3 ],
zoom: 10,
style: 'light'
zoom: 5,
style: 'dark'
})
});

const pointLayer = new PointLayer()
.source([{ lng: 120.155, lat: 30.31 }], {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
const scene2 = new Scene({
id: 'map2',
map: new BaiduMap({
center: [ 120.15, 30.3 ],
zoom: 9,
style: 'dark'
})
.shape('circle')
.size(6000)
.color('#f00')
.animate(true)
.style({
unit: 'meter'
});
const lineLayer = new LineLayer({})
});


const lineLayer = new LineLayer({autoFit: true})
.source({
type: 'FeatureCollection',
features: [
Expand All @@ -40,111 +38,137 @@ export default () => {
geometry: {
type: 'LineString',
coordinates: [

[
120.1863098144,
30.321915039121
],
[
120.3401184082,
30.43446594614
]
]
}
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[
120.19660949707033,
30.298796461361665
],
[
120.31883239746092,
30.28041626667403
]
]
}
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[
120.12245178222656,
30.29523927312319
],
[
120.01808166503906,
30.261439550638762
30.321915039121
]
]
}
},
// {
// type: 'Feature',
// properties: {},
// geometry: {
// type: 'LineString',
// coordinates: [


// [
// 120.3401184082,
// 30.321915039121
// ],
// [
// 120.1863098144,
// 30.321915039121
// ],
// ]
// }
// }
]
}
)
.size(10)
.shape('flowline')
.color('#00f')
.style({
strokeWidth: 1,
stroke: '#f00',
gapWidth: 10,
opacity: 1,
symbol
}

);

const lineLayer2 = new LineLayer({autoFit: true})
.source({
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [

[
120.15609741210938,
30.285159872426014
120.1863098144,
30.321915039121
],
[
120.14923095703124,
30.20626765511821
120.3401184082,
30.321915039121
]
]
}
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[
120.10940551757812,
30.320136880604423
],
[
120.01327514648438,
30.362803774813028
]
]
}
}
// {
// type: 'Feature',
// properties: {},
// geometry: {
// type: 'LineString',
// coordinates: [


// [
// 120.3401184082,
// 30.321915039121
// ],
// [
// 120.1863098144,
// 30.321915039121
// ],
// ]
// }
// }
]
}
)
.size(2)
.shape('line')
.size(10)
.shape('flowline')
.color('#00f')
.style({
arrow: {
enable: true,
arrowWidth: 4,
arrowHeight: 4,
tailWidth: 0.4
}
})
.color('#f00');
strokeWidth: 1,
stroke: '#f00',
gapWidth: 10,
opacity: 1,
symbol,}

);
scene.on('loaded', () => {
scene.addLayer(pointLayer);
scene.addLayer(lineLayer);
});
scene2.on('loaded', () => {
scene2.addLayer(lineLayer2);
});
}, []);
return (
<div style={{
display:'flex',
height: '500px',
position: 'relative',
}}>
<div
id="map"
style={{
height: '500px',
position: 'relative',
width:'450px',
position: 'relative'
}}
/>
<div
id="map2"
style={{
height: '500px',
width:'450px',
position: 'relative'
}}
/>
</div>
);
};
Loading

0 comments on commit 3f43108

Please sign in to comment.