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

feat: l7 2.4 demo

This commit is contained in:
2912401452 2021-05-31 10:34:15 +08:00
parent 479b803404
commit 68f2123d51
14 changed files with 481 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/gallery/animate/demo/animate_path_texture.js
View File

@ -5,9 +5,9 @@ const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 16,
style: 'dark'
pitch: 20,
zoom: 18,
style: 'light'
})
});
scene.on('loaded', () => {

2
examples/gallery/animate/demo/meta.json
View File

@ -7,7 +7,7 @@
{
"filename": "animate_path_texture.js",
"title": "路径贴图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*TLt7RI9bAWMAAAAAAAAAAAAAARQnAQ"
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*0UrUTakTFQsAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "animate_path.js",

51
examples/point/text/demo/iconfont.js
View File

@ -4,48 +4,18 @@ import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 110, 36 ],
center: [ 115, 30 ],
pitch: 0,
style: 'light',
zoom: 3
zoom: 6
})
});
const fontFamily = 'iconfont';
const fontPath = '//at.alicdn.com/t/font_2534097_99x8u6zpili.woff2?t=1621842922496';
const fontPath = '//at.alicdn.com/t/font_2534097_fcae9o2mxbv.woff2?t=1622200439140';
scene.addFontFace(fontFamily, fontPath);
scene.addIconFont('icon1', '');
scene.addIconFont('icon1', '');
scene.on('loaded', () => {
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)
// .rotate("j",()=>{
// return Math.random()*3*(Math.random()>0.5?1:-1)
// })
.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
});
scene.addLayer(pointLayer);
});
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json'
)
@ -60,17 +30,16 @@ scene.on('loaded', () => {
}
})
.shape('icon', 'text')
.size(12)
.color('w', [ '#f00', '#f00', '#0f0' ])
.size(20)
.color('w', ['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac'])
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [ -10, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
textOffset: [ 40, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
padding: [ 0, 0 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
fontFamily,
iconfont: true
// textAllowOverlap: true,
iconfont: true,
textAllowOverlap: true,
});
scene.addLayer(pointLayer);
});

40
examples/point/text/demo/iconfonts.js
View File

@ -6,13 +6,49 @@ const scene = new Scene({
map: new GaodeMap({
center: [ 120.5, 30.2 ],
pitch: 0,
style: 'light',
style: 'amap://styles/453e2f8e11603fc8f7548fe18959e9e9',
zoom: 8.5,
zooms: [ 8, 10 ],
viewMode: '2D'
})
});
const originData = [
{
lng: 121.7,
lat: 30.6,
iconType: 'hugeRain',
iconColor: '#4678D2',
backgoundColor: '#285A8C',
temperature: '20℃',
weather: '大雨'
},
{
lng: 119.2,
lat: 30.,
iconType: 'smallRain',
iconColor: '#6EA0FF',
backgoundColor: '#4678AA',
temperature: '22℃',
weather: '小雨'
},
{
lng: 119.67,
lat: 30.2,
iconType: 'sun',
iconColor: '#FFA500',
backgoundColor: '#00BFFF',
temperature: '28℃',
weather: '晴朗'
},
{
lng: 119.63,
lat: 30.6,
iconType: 'sun',
iconColor: '#FFA500',
backgoundColor: '#00BFFF',
temperature: '28℃',
weather: '晴朗'
},
{
lng: 120,
lat: 30,
@ -145,7 +181,7 @@ scene.on('loaded', () => {
})
.shape('circle')
.color('backgoundColor')
.size(40);
.size(42);
scene.addLayer(layer);

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

@ -11,10 +11,15 @@
},
{
"filename": "iconfont.js",
"title": "文字图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*96iHTKybWYcAAAAAAAAAAAAAARQnAQ"
"title": "图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*jnPwQZsY-bEAAAAAAAAAAAAAARQnAQ"
},
{
{
"filename": "polygon_text.js",
"title": "面数据标注",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ"
},
{
"filename": "iconfonts.js",
"title": "天气图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*AouOQ4VYTJMAAAAAAAAAAAAAARQnAQ"
@ -22,12 +27,12 @@
{
"filename": "temperture.js",
"title": "气温图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*VFmxTqQc7v4AAAAAAAAAAAAAARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*spetRL1JnfsAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "polygon_text.js",
"title": "面数据标注",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ"
"filename": "updown.js",
"title": "走势图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*5E4DR4H8qDQAAAAAAAAAAAAAARQnAQ"
}
]
}

2
examples/point/text/demo/temperture.js
View File

@ -45,7 +45,7 @@ scene.on('loaded', () => {
.shape('fill')
.color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ])
.style({
opacity: 0.8
opacity: 0.5
});
scene.addLayer(filllayer);

83
examples/point/text/demo/updown.js Normal file
View File

@ -0,0 +1,83 @@
import { Scene, PointLayer, PolygonLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'dark',
pitch: 40,
center: [ 118.8, 32.056 ],
zoom: 12.5
})
});
let fontFamily = 'iconfont';
let fontPath =
'//at.alicdn.com/t/font_2534097_bl34aphh10n.woff2?t=1622180820063';
scene.addIconFont('up', '');
scene.addIconFont('down', '');
scene.addFontFace(fontFamily, fontPath);
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/41802695-0f7e-4a81-ab16-539c4e39df0d.json',
)
.then((res) => res.json())
.then((data) => {
const filllayer = new PolygonLayer({
name: 'fill',
zIndex: 3,
})
.source(data)
.shape('fill')
.color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)'])
.style({
opacity: 0.5,
});
scene.addLayer(filllayer);
const linelayer = new LineLayer({
zIndex: 5,
name: 'line2',
})
.source(data)
.shape('line')
.size(1)
.color('#fff')
.style({
opacity: 0.3,
});
scene.addLayer(linelayer);
const pointLayer = new PointLayer({
zIndex: 10,
})
.source(data)
.shape('icon', 'text')
.size(15)
.color('count', n => n>0?'#0f0':"#f00")
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [30, 5],
padding: [2, 2],
fontFamily,
iconfont: true,
// textAllowOverlap: true
});
scene.addLayer(pointLayer);
const textLayer = new PointLayer({
zIndex: 10,
})
.source(data)
.shape('count', 'text')
.size(12)
.color('count', n => n>0?'#0f0':"#f00")
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [40, 10],
padding: [1, 1],
});
scene.addLayer(textLayer);
});
});

11
packages/layers/src/line/shaders/line_arc_frag.glsl
View File

@ -35,5 +35,16 @@ void main() {
alpha = smoothstep(0., 1., alpha);
gl_FragColor.a *= alpha;
}
// if(u_line_texture == LineTexture) { // while load texture
// //v_u; // 水平
// float v = length(v_offset)/(v_a); // 横向
// vec2 uv= v_iconMapUV / u_textSize + vec2(v_u, v) / u_textSize * 64.;
// // gl_FragColor = vec4(v_u, v, 0.0, 1.0);
// // gl_FragColor = vec4(1.0, 0.0, 0.0, v_u);
// gl_FragColor = filterColor(gl_FragColor + texture2D(u_texture, uv));
// } else {
// gl_FragColor = filterColor(gl_FragColor);
// }
gl_FragColor = filterColor(gl_FragColor);
}

31
packages/layers/src/line/shaders/line_arc_vert.glsl
View File

@ -1,6 +1,7 @@
#define LineTypeSolid 0.0
#define LineTypeDash 1.0
#define Animate 0.0
// #define LineTexture 1.0
attribute vec4 a_Color;
attribute vec3 a_Position;
attribute vec4 a_Instance;
@ -17,6 +18,15 @@ uniform float u_line_type: 0.0;
uniform vec4 u_dash_array: [10.0, 5., 0, 0];
uniform float u_lineDir: 1.0;
varying vec4 v_dash_array;
// uniform float u_icon_step: 100;
// uniform float u_line_texture;
// varying float v_u;
// varying vec2 v_offset;
// varying float v_a;
// attribute vec2 a_iconMapUV;
// varying vec2 v_iconMapUV;
#pragma include "projection"
#pragma include "project"
#pragma include "picking"
@ -70,10 +80,12 @@ vec2 getNormal(vec2 line_clipspace, float offset_direction) {
void main() {
v_color = a_Color;
vec2 source = a_Instance.rg;
vec2 target = a_Instance.ba;
float segmentIndex = a_Position.x;
float segmentRatio = getSegmentRatio(segmentIndex);
float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0));
float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir);
if(u_line_type == LineTypeDash) {
@ -93,6 +105,25 @@ void main() {
vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y));
// if(LineTexture == u_line_texture) { // 开启贴图模式
// v_iconMapUV = a_iconMapUV;
// float arctotal_Distance = length(source - target);
// float pixelLen = project_pixel(u_icon_step);
// v_u = fract(segmentRatio * (floor(arctotal_Distance/pixelLen)));
// // v_u = fract(segmentIndex/(segmentNumber) * (2.0));
// // v_u = fract(segmentIndex/(segmentNumber - 1.0) * 1.0 + 0.3);
// // v_u = fract(mod(1.0- v_distance_ratio, 0.2)* (1.0/ 0.5));
// // v_u = fract(clamp(v_u, 0.0, 1.0)*2.0);
// // v_u = fract(((segmentIndex * indexDir) / (segmentNumber - 1.)) * (floor(arctotal_Distance/pixelLen)));
// // float s = 6.0;
// // float l = segmentNumber/s;
// // v_u = mod(segmentIndex, l) / (segmentNumber/s);
// v_a = project_pixel(a_Size);
// v_offset = offset + offset * sign(a_Position.y);
// }
// gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0));
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
gl_Position = u_Mvp * (vec4(curr.xy + offset, 0, 1.0));

96
stories/Map/components/amap2demo_arcLineTex.tsx Normal file
View File

@ -0,0 +1,96 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_arcLineTex extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 40,
center: [107.77791556935472, 35.443286920228644],
zoom: 2.9142882493605033,
viewMode: '3D',
}),
});
this.scene = scene;
scene.on('loaded', () => {
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
let data = [
// {
// lng1: 91.111891,
// lat1: 40.662557,
// lng2: 120.342625,
// lat2: 37.373799,
// },
// {
// lng1: 116.98242187499999,
// lat1: 43.004647127794435,
// lng2: 105.64453124999999,
// lat2: 28.998531814051795,
// },
{
lng1: 75.76171875,
lat1: 36.31512514748051,
lng2: 46.23046874999999,
lat2: 52.802761415419674,
},
];
const layer = new LineLayer({
blend: 'normal',
})
.source(data, {
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
.size(10)
.shape('arc')
// .texture('02')
.color('#8C1EB2')
.style({
forward: false,
// lineTexture: true, // 开启线的贴图功能
// iconStep: 100, // 设置贴图纹理的间距
})
.animate(true)
scene.addLayer(layer);
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

2
stories/Map/components/amap2demo_mesh.tsx
View File

@ -73,7 +73,7 @@ export default class Amap2demo_mesh extends React.Component {
// '#FF0000'
// ])
.style({
opacity: 0.8,
opacity: 0.5,
});
scene.addLayer(filllayer);

113
stories/Map/components/amap2demo_mesh2.tsx Normal file
View File

@ -0,0 +1,113 @@
//@ts-ignore
import { PointLayer, Scene, PolygonLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_mesh2 extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'dark',
pitch: 40,
center: [118.8, 32.056],
zoom: 12.5,
}),
});
this.scene = scene;
let fontFamily = 'iconfont';
let fontPath =
'//at.alicdn.com/t/font_2534097_bl34aphh10n.woff2?t=1622180820063';
scene.addIconFont('up', '&#xe61d;');
scene.addIconFont('down', '&#xe61e;');
scene.addFontFace(fontFamily, fontPath);
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/41802695-0f7e-4a81-ab16-539c4e39df0d.json',
)
.then((res) => res.json())
.then((data) => {
const filllayer = new PolygonLayer({
name: 'fill',
zIndex: 3,
})
.source(data)
.shape('fill')
.color('count', ['rgb(194, 143, 133)', 'rgb(148, 167, 192)'])
.style({
opacity: 0.5,
});
scene.addLayer(filllayer);
const linelayer = new LineLayer({
zIndex: 5,
name: 'line2',
})
.source(data)
.shape('line')
.size(1)
.color('#fff')
.style({
opacity: 0.3,
});
scene.addLayer(linelayer);
const pointLayer = new PointLayer({
zIndex: 10,
})
.source(data)
.shape('icon', 'text')
.size(15)
.color('count', n => n>0?'#0f0':"#f00")
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [30, 5],
padding: [2, 2],
fontFamily,
iconfont: true,
// textAllowOverlap: true
});
scene.addLayer(pointLayer);
const textLayer = new PointLayer({
zIndex: 10,
})
.source(data)
.shape('count', 'text')
.size(12)
.color('count', n => n>0?'#0f0':"#f00")
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [40, 10],
padding: [1, 1],
});
scene.addLayer(textLayer);
});
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

75
stories/Map/components/amap2demo_road2.tsx Normal file
View File

@ -0,0 +1,75 @@
// @ts-ignore
import { LineLayer, Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import * as React from 'react';
export default class Amap2demo_road2 extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [120.165, 30.25],
pitch: 50,
zoom: 16.8,
viewMode: '3D',
}),
});
this.scene = scene;
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
)
.then((res) => res.json())
.then((data) => {
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
const layer = new LineLayer({})
.source(data)
.size(5)
.shape('line')
.texture('02')
// .color('#ccc')
.color('rgb(20, 180, 90)')
// .animate({
// interval: 1, // 间隔
// duration: 1, // 持续时间，延时
// trailLength: 2, // 流线长度
// })
.style({
// opacity: 0.5,
lineTexture: true, // 开启线的贴图功能
iconStep: 80, // 设置贴图纹理的间距
});
scene.addLayer(layer);
});
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

6
stories/Map/map.stories.tsx
View File

@ -19,8 +19,10 @@ import Amap2demo_arcLine_greatCircle from "./components/amap2demo_arcLine_greatC
import Amap2demo_lineHeight from "./components/amap2demo_lineHeight"
import Amap2demo_lineDash from "./components/amap2demo_lineDash"
import Amap2demo_arcLineDir from "./components/amap2demo_arcLineDir"
import Amap2demo_arcLineTex from './components/amap2demo_arcLineTex';
import Amap2demo_lineStreet from './components/amap2demo_lineStreet';
import Amap2demo_road from './components/amap2demo_road';
import Amap2demo_road2 from './components/amap2demo_road2';
import Amap2demo_heatmap from "./components/amap2demo_heatmap"
import Amap2demo_heatmap3D from "./components/amap2demo_heatmap3D"
@ -43,6 +45,7 @@ import Amap2demo_instance from "./components/amap2demo_instance"
import Amap2demo_drawControl from "./components/amap2demo_drawControl"
import Amap2demo_mesh from "./components/amap2demo_mesh"
import Amap2demo_mesh2 from "./components/amap2demo_mesh2"
// @ts-ignore
storiesOf('地图方法', module)
@ -63,9 +66,11 @@ storiesOf('地图方法', module)
.add('高德地图2.0 lineHeight', () => <Amap2demo_lineHeight />)
.add('高德地图2.0 lineDash', () => <Amap2demo_lineDash />)
.add('高德地图2.0 line_arcDir', () => <Amap2demo_arcLineDir />)
.add('高德地图2.0 line_arcTex', () => <Amap2demo_arcLineTex />)
.add('高德地图2.0 line_winds', () => <Amap2demo_winds />)
.add('高德地图2.0 line_Street', () => <Amap2demo_lineStreet />)
.add('高德地图2.0 road', () => <Amap2demo_road />)
.add('高德地图2.0 road2', () => <Amap2demo_road2 />)
.add('高德地图2.0 heatmap', () => <Amap2demo_heatmap />)
.add('高德地图2.0 heatmap3D', () => <Amap2demo_heatmap3D />)
@ -85,3 +90,4 @@ storiesOf('地图方法', module)
.add('高德地图2.0 drawControl实例', () => <Amap2demo_drawControl />)
.add('高德地图2.0 mesh实例', () => <Amap2demo_mesh />)
.add('高德地图2.0 mesh实例2', () => <Amap2demo_mesh2 />)