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

Merge branch 'master' of https://github.com/antvis/L7

This commit is contained in:
2912401452 2021-06-01 13:50:54 +08:00
parent a506ca83be 37b6f0dc7a
commit 9c41a89f81
33 changed files with 693 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/api/layer/layer.zh.md
View File

@ -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 对象数组，对象的字段和用户传入的数据相关
```

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",

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

@ -4,48 +4,19 @@ import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 110, 36 ],
center: [ 110, 30 ],
pitch: 0,
style: 'light',
zoom: 3
// style: 'light',
style: 'amap://styles/453e2f8e11603fc8f7548fe18959e9e9',
zoom: 5
})
});
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 +31,16 @@ scene.on('loaded', () => {
}
})
.shape('icon', 'text')
.size(12)
.color('w', [ '#f00', '#f00', '#0f0' ])
.size(20)
.color('w', [ '#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99' ])
.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);
});

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

@ -6,19 +6,62 @@ 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 dataColor = {
bigRainBC: '#285A8C',
middleRainBC: '#326EA0',
smallRainBC: '#4678AA',
sunBC: '#00BFFF',
cloudBC: '#1E90FF'
};
const originData = [
{
lng: 121.7,
lat: 30.6,
iconType: 'hugeRain',
iconColor: '#4678D2',
backgoundColor: dataColor.bigRainBC,
temperature: '20℃',
weather: '大雨'
},
{
lng: 119.2,
lat: 30.0,
iconType: 'smallRain',
iconColor: '#6EA0FF',
backgoundColor: dataColor.smallRainBC,
temperature: '22℃',
weather: '小雨'
},
{
lng: 119.67,
lat: 30.2,
iconType: 'sun',
iconColor: '#FFA500',
backgoundColor: dataColor.sunBC,
temperature: '28℃',
weather: '晴朗'
},
{
lng: 119.63,
lat: 30.6,
iconType: 'sun',
iconColor: '#FFA500',
backgoundColor: dataColor.sunBC,
temperature: '28℃',
weather: '晴朗'
},
{
lng: 120,
lat: 30,
iconType: 'sun',
iconColor: '#FFA500',
backgoundColor: '#00BFFF',
backgoundColor: dataColor.sunBC,
temperature: '28℃',
weather: '晴朗'
},
@ -27,7 +70,7 @@ const originData = [
lat: 30.5,
iconType: 'sun',
iconColor: '#FFA500',
backgoundColor: '#00BFFF',
backgoundColor: dataColor.sunBC,
temperature: '28℃',
weather: '晴朗'
},
@ -36,7 +79,7 @@ const originData = [
lat: 31.4,
iconType: 'cloud',
iconColor: '#F0F8FF',
backgoundColor: '#1E90FF',
backgoundColor: dataColor.cloudBC,
temperature: '22℃',
weather: '多云'
},
@ -45,7 +88,7 @@ const originData = [
lat: 31,
iconType: 'cloud',
iconColor: '#F0F8FF',
backgoundColor: '#1E90FF',
backgoundColor: dataColor.cloudBC,
temperature: '22℃',
weather: '多云'
},
@ -54,7 +97,7 @@ const originData = [
lat: 30.8,
iconType: 'cloud',
iconColor: '#F0F8FF',
backgoundColor: '#1E90FF',
backgoundColor: dataColor.cloudBC,
temperature: '22℃',
weather: '多云'
},
@ -63,7 +106,7 @@ const originData = [
lat: 31.3,
iconType: 'cloud',
iconColor: '#F0F8FF',
backgoundColor: '#1E90FF',
backgoundColor: dataColor.cloudBC,
temperature: '22℃',
weather: '多云'
},
@ -72,7 +115,7 @@ const originData = [
lat: 30.2,
iconType: 'smallRain',
iconColor: '#6EA0FF',
backgoundColor: '#4678AA',
backgoundColor: dataColor.smallRainBC,
temperature: '22℃',
weather: '小雨'
},
@ -81,7 +124,7 @@ const originData = [
lat: 30.5,
iconType: 'smallRain',
iconColor: '#6EA0FF',
backgoundColor: '#4678AA',
backgoundColor: dataColor.smallRainBC,
temperature: '22℃',
weather: '小雨'
},
@ -90,7 +133,7 @@ const originData = [
lat: 30,
iconType: 'middleRain',
iconColor: '#6495ED',
backgoundColor: '#326EA0',
backgoundColor: dataColor.middleRainBC,
temperature: '24℃',
weather: '中雨'
},
@ -99,7 +142,7 @@ const originData = [
lat: 29.7,
iconType: 'smallRain',
iconColor: '#6EA0FF',
backgoundColor: '#4678AA',
backgoundColor: dataColor.smallRainBC,
temperature: '22℃',
weather: '小雨'
},
@ -108,7 +151,7 @@ const originData = [
lat: 29.8,
iconType: 'middleRain',
iconColor: '#6495ED',
backgoundColor: '#326EA0',
backgoundColor: dataColor.middleRainBC,
temperature: '24℃',
weather: '中雨'
},
@ -117,7 +160,7 @@ const originData = [
lat: 30,
iconType: 'hugeRain',
iconColor: '#4678D2',
backgoundColor: '#285A8C',
backgoundColor: dataColor.bigRainBC,
temperature: '20℃',
weather: '大雨'
}
@ -145,7 +188,7 @@ scene.on('loaded', () => {
})
.shape('circle')
.color('backgoundColor')
.size(40);
.size(42);
scene.addLayer(layer);

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

@ -9,25 +9,30 @@
"title": "点数据标注",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*7blvQ4v7Q1UAAAAAAAAAAABkARQnAQ"
},
{
"filename": "polygon_text.js",
"title": "面数据标注",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*rCFqRp3iQosAAAAAAAAAAABkARQnAQ"
},
{
"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*8PfqQ6-lQ0EAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "iconfonts.js",
"title": "天气图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*AouOQ4VYTJMAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*JAhxTaabap4AAAAAAAAAAAAAARQnAQ"
},
{
"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*36umQaf_hVEAAAAAAAAAAAAAARQnAQ"
},
{
"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*P5plS5ZsYZkAAAAAAAAAAAAAARQnAQ"
}
]
}

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

@ -43,9 +43,9 @@ scene.on('loaded', () => {
})
.source(data)
.shape('fill')
.color('count', [ 'rgb(194, 143, 133)', 'rgb(148, 167, 192)' ])
.color('count', [ '#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f' ])
.style({
opacity: 0.8
opacity: 0.6
});
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
})
});
const fontFamily = 'iconfont';
const 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', [ '#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f' ])
.style({
opacity: 0.6
});
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);
});
});

2
lerna.json
View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.3.11",
"version": "2.4.0",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

6
packages/component/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.3.11",
"version": "2.4.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.3.11",
"@antv/l7-utils": "^2.3.11",
"@antv/l7-core": "2.4.0",
"@antv/l7-utils": "2.4.0",
"@babel/runtime": "^7.7.7",
"eventemitter3": "^4.0.0",
"inversify": "^5.0.1",

4
packages/core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-core",
"version": "2.3.11",
"version": "2.4.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,7 +24,7 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-utils": "^2.3.11",
"@antv/l7-utils": "2.4.0",
"@babel/runtime": "^7.7.7",
"@mapbox/tiny-sdf": "^1.1.1",
"ajv": "^6.10.2",

14
packages/l7/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.3.11",
"version": "2.4.0",
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,12 +25,12 @@
"author": "antv",
"license": "MIT",
"dependencies": {
"@antv/l7-component": "^2.3.11",
"@antv/l7-core": "^2.3.11",
"@antv/l7-layers": "^2.3.11",
"@antv/l7-maps": "^2.3.11",
"@antv/l7-scene": "^2.3.11",
"@antv/l7-utils": "^2.3.11",
"@antv/l7-component": "2.4.0",
"@antv/l7-core": "2.4.0",
"@antv/l7-layers": "2.4.0",
"@antv/l7-maps": "2.4.0",
"@antv/l7-scene": "2.4.0",
"@antv/l7-utils": "2.4.0",
"@babel/runtime": "^7.7.7"
},
"gitHead": "20154fe30d512024b03ac5e40f77731bc0580bb0",

10
packages/layers/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.3.11",
"version": "2.4.0",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,10 +24,10 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "^2.3.11",
"@antv/l7-layers": "^2.3.11",
"@antv/l7-source": "^2.3.11",
"@antv/l7-utils": "^2.3.11",
"@antv/l7-core": "2.4.0",
"@antv/l7-layers": "2.4.0",
"@antv/l7-source": "2.4.0",
"@antv/l7-utils": "2.4.0",
"@babel/runtime": "^7.7.7",
"@mapbox/martini": "^0.2.0",
"@turf/meta": "^6.0.2",

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));

4
packages/map/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.3.11",
"version": "2.4.0",
"description": "l7 map",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -37,7 +37,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-utils": "^2.3.11",
"@antv/l7-utils": "2.4.0",
"@babel/runtime": "^7.7.7",
"@mapbox/point-geometry": "^0.1.0",
"@mapbox/unitbezier": "^0.0.0",

8
packages/maps/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-maps",
"version": "2.3.11",
"version": "2.4.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -27,9 +27,9 @@
"license": "ISC",
"dependencies": {
"@amap/amap-jsapi-loader": "^0.0.3",
"@antv/l7-core": "^2.3.11",
"@antv/l7-map": "^2.3.11",
"@antv/l7-utils": "^2.3.11",
"@antv/l7-core": "2.4.0",
"@antv/l7-map": "2.4.0",
"@antv/l7-utils": "2.4.0",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

4
packages/renderer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.3.11",
"version": "2.4.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.3.11",
"@antv/l7-core": "2.4.0",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"lodash": "^4.17.15",

14
packages/scene/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.3.11",
"version": "2.4.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,12 +23,12 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.3.11",
"@antv/l7-core": "^2.3.11",
"@antv/l7-layers": "^2.3.11",
"@antv/l7-maps": "^2.3.11",
"@antv/l7-renderer": "^2.3.11",
"@antv/l7-utils": "^2.3.11",
"@antv/l7-component": "2.4.0",
"@antv/l7-core": "2.4.0",
"@antv/l7-layers": "2.4.0",
"@antv/l7-maps": "2.4.0",
"@antv/l7-renderer": "2.4.0",
"@antv/l7-utils": "2.4.0",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"mapbox-gl": "^1.2.1",

6
packages/source/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-source",
"version": "2.3.11",
"version": "2.4.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,8 +26,8 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "^2.3.11",
"@antv/l7-utils": "^2.3.11",
"@antv/l7-core": "2.4.0",
"@antv/l7-utils": "2.4.0",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

4
packages/three/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-three",
"version": "2.3.11",
"version": "2.4.0",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,7 +44,7 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7": "^2.3.11",
"@antv/l7": "2.4.0",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"rollup": "^2.3.3",

2
packages/utils/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-utils",
"version": "2.3.11",
"version": "2.4.0",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

5
stories/3D_Model/Components/amap_three.tsx
View File

@ -1,5 +1,5 @@
import { Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import { GaodeMap, Mapbox, GaodeMapV1 } from '@antv/l7-maps';
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
import * as React from 'react';
// import { DirectionalLight, Scene as ThreeScene } from 'three';
@ -23,7 +23,8 @@ export default class GlTFThreeJSDemo extends React.Component {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
// map: new GaodeMap({
map: new GaodeMapV1({
center: [111.4453125, 32.84267363195431],
pitch: 45,
rotation: 30,

2
stories/3D_Model/model.stories.tsx
View File

@ -6,5 +6,5 @@ import ThreeRender from './Components/threeRender';
storiesOf('3D 模型', module)
.add('ThreeJS Render', () => <ThreeRender />, {})
.add('高德模型', () => <AMapModel />, {})
.add('高德模型1.x', () => <AMapModel />, {})
.add('Mapbox模型', () => <MapboxModel />, {});

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

@ -0,0 +1,95 @@
// @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,
}}
/>
</>
);
}
}

51
stories/Map/components/amap2demo_text.tsx
View File

@ -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: '&#xe886;',
// },
// {
// j: 140,
// w: 32,
// m: '&#xe98c;',
// },
// {
// 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',

126
stories/Map/components/amap2demo_textSelect.tsx Normal file
View File

@ -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', '&#xe98c;');
// scene.addIconFont("icon2", "&#xe64c;")
// scene.addIconFonts([
// ['icon1', '&#xe64b;'],
// ['icon2', '&#xe64c;'],
// ]);
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,
}}
/>
</>
);
}
}

4
stories/Map/components/mapCenter.tsx
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { ILngLat, PointLayer, PolygonLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap, GaodeMapV1 } from '@antv/l7-maps';
import * as React from 'react';
export default class GaodeMapComponent extends React.Component {
@ -14,7 +14,7 @@ export default class GaodeMapComponent extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV1({
center: [121.107846, 30.267069],
pitch: 0,
style: 'normal',

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

@ -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'
@ -19,8 +20,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 +46,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)
@ -51,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 />)
@ -63,9 +68,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 +92,4 @@ storiesOf('地图方法', module)
.add('高德地图2.0 drawControl实例', () => <Amap2demo_drawControl />)
.add('高德地图2.0 mesh实例', () => <Amap2demo_mesh />)
.add('高德地图2.0 mesh实例2', () => <Amap2demo_mesh2 />)