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

feat: 官网案例、文档整理，样式数据映射边界条件统一效果

This commit is contained in:
2912401452 2021-07-02 11:07:09 +08:00
parent 24e3661eab
commit 164458ea69
35 changed files with 785 additions and 3661 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/api/component/popup.zh.md
View File

@ -18,10 +18,11 @@ const popup = new L7.Popup(option);
### option
- closeButton
- closeOnClick
- maxWidth
- anchor
- closeButton 是否显示关闭按钮，布尔值，默认为 true。
- closeButtonOffsets 显示关闭按钮时生效，[number, number]，默认为 [0, 0]，以右上角为起始点。
- closeOnClick 是否在点击地图的时候关闭弹框，布尔值，默认为 true
- maxWidth 弹框最宽值，默认为 240px
- anchor 弹框锚点，默认值为 bottom，可选值有 center、top、top-left、left、bottom-left、bottom、bottom-right、right、top-right
#### 添加到地图
@ -87,6 +88,14 @@ popup.setHTML(html);
popup.setText('hello world');
```
#### setMaxWidth
设置 popup 最大宽度
```javascript
popup.setMaxWidth('300px');
```
#### open
显示 popup

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

@ -307,6 +307,62 @@ layer.style({
});
```
## 通用样式数据纹理映射
从 L7 2.5 开始，各图层样式将逐步支持样式数据映射
| layer 类型 | 支持的样式字段 | 备注 |
| ----------------- | ---------------------------------------------------- | --------------------------------- |
| point/fill | opacity、strokeOpacity、strokeWidth、stroke、offsets | shape circle、triangle... |
| point/image | opacity、offsets | offsets 经纬度偏移 |
| point/normal | opacity、offsets | |
| point/text | opacity、strokeWidth、stroke、textOffset | textOffset 相对文字画布位置的偏移 |
| point/extrude | opacity | |
| polygon/fill | opacity | |
| polygon/extrude | opacity | |
| line/line | opacity | |
| line/arc | opacity | |
| line/arc3d | opacity | |
| line/great_circle | opacity | |
[DEMO 简单事例](../../../examples/point/scatter#scatterStyleMap)
## 线图层纹理方法
目前在线图层上单独加上了纹理方法的支持
### 为图层绑定纹理
```javascript
// 首先在全局加载图片资源
scene.addImage(
'plane',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg',
);
const layer = new LineLayer({
blend: 'normal',
})
.source(data, {
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
.size(25)
.shape('arc')
.texture('plane') // 为图层绑定纹理
.color('#8C1EB2')
.style({
lineTexture: true, // 开启线的贴图功能
iconStep: 30, // 设置贴图纹理的间距
textureBlend: 'replace', // 设置纹理混合方式，默认值为 normal，可选值有 normal/replace 两种
});
```
## 图层更新方法
如果已经添加了图层，需要修改图层显示样式可以再次调用图形映射方法，然后调用 `scene.render()`更新渲染即可

25
docs/api/layer/line_layer/arc.zh.md
View File

@ -82,6 +82,31 @@ const layer = new LineLayer({})
});
```
### 设置渐变色
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高
```javascript
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
.size(1)
.shape('arc')
.color('#8C1EB2')
.style({
sourceColor: '#f00', // 起点颜色
targetColor: '#0f0' // 终点颜色
});
```
### demo 示例
[弧线 demo](../../../../examples/gallery/basic#arcCircle)

26
docs/api/layer/line_layer/linelayer.zh.md
View File

@ -68,4 +68,30 @@ order: 2
lineLayer.size(1); // 线的宽度为 1
lineLayer.size([1, 2]); // 宽度为1，高度2
```
### 设置渐变色
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高
```javascript
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
.size(1)
.shape('arc')
.color('#8C1EB2')
.style({
sourceColor: '#f00', // 起点颜色
targetColor: '#0f0' // 终点颜色
});
```
`markdown:docs/common/layer/base.md`

25
docs/api/layer/line_layer/path.zh.md
View File

@ -26,6 +26,31 @@ layer.size([2, 10]); // 绘制宽度为2，高度为10的路径
layer.size('height', []);
```
### 设置渐变色
线图层通过在 style 中设置起始颜色和终点颜色来设置颜色渐变，渐变色的优先级比 color 方法设置的颜色更高
```javascript
const layer = new LineLayer({})
.source(data, {
parser: {
type: 'csv',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
},
})
.size(1)
.shape('arc')
.color('#8C1EB2')
.style({
sourceColor: '#f00', // 起点颜色
targetColor: '#0f0' // 终点颜色
});
```
### animate
#### 开启关闭动画

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

@ -33,7 +33,7 @@ scene.on('loaded', () => {
})
.style({
lineTexture: true, // 开启线的贴图功能
iconStep: 100 // 设置贴图纹理的间距
iconStep: 20 // 设置贴图纹理的间距
});
scene.addLayer(layer);
});

2
examples/gallery/animate/demo/build.js
View File

@ -26,7 +26,7 @@ scene.on('loaded', () => {
);
layer
.source(data)
.size('floor', [ 100, 3000 ])
.size('floor', [ 100, 500 ])
.color('rgba(242,246,250,0.5)')
.animate({
enable: true

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

@ -24,6 +24,16 @@
"title": "流向图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*u5BsQbn30pkAAAAAAAAAAABkARQnAQ"
},
{
"filename": "plane_animate.js",
"title": "航向图",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*2anhRaQX3DsAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "plane_animate2.js",
"title": "航向图（平面）",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*OGcHSYSbDz4AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "build.js",
"title": "点亮城市",

128
examples/gallery/animate/demo/plane_animate.js Normal file
View File

@ -0,0 +1,128 @@
/* eslint-disable no-eval */
import { Scene, LineLayer, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 40,
style: {
version: 8,
sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
glyphs:
'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': '#2b2b3a'
}
}
]
},
center: [ 3.438, 40.16797 ],
zoom: 0.51329
})
});
scene.on('loaded', () => {
scene.addImage(
'plane',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
);
Promise.all([
fetch(
'https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json'
).then(d => d.json()),
fetch(
'https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json'
).then(d => d.text()),
fetch(
'https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json'
).then(d => d.text())
]).then(function onLoad([ world, dot, flyline ]) {
const dotData = eval(dot);
// @ts-ignore
const flydata = eval(flyline).map(item => {
// @ts-ignore
const latlng1 = item.from.split(',').map(e => {
return e * 1;
});
// @ts-ignore
const latlng2 = item.to.split(',').map(e => {
return e * 1;
});
return { coord: [ latlng1, latlng2 ] };
});
const worldLine = new LineLayer()
.source(world)
.color('#41fc9d')
.size(0.5)
.style({
opacity: 0.4
});
const dotPoint = new PointLayer()
.source(dotData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('#ffed11')
.animate(true)
.size(40)
.style({
opacity: 1.0
});
const flyLine = new LineLayer({ blend: 'normal' })
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#ff6b34')
.texture('plane')
.shape('arc3d')
// .shape('arc')
.size(20)
// .active(true)
.animate({
duration: 10,
interval: 0.2,
trailLength: 0.05
})
.style({
textureBlend: 'replace',
lineTexture: true, // 开启线的贴图功能
iconStep: 10, // 设置贴图纹理的间距
opacity: 1
});
const flyLine2 = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#ff6b34')
.shape('arc3d')
// .shape('arc')
.size(1)
// .active(true)
.style({
lineType: 'dash',
dashArray: [ 5, 5 ],
opacity: 0.5
});
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine2);
scene.addLayer(flyLine);
});
});

128
examples/gallery/animate/demo/plane_animate2.js Normal file
View File

@ -0,0 +1,128 @@
/* eslint-disable no-eval */
import { Scene, LineLayer, PointLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 40,
style: {
version: 8,
sprite: 'https://lzxue.github.io/font-glyphs/sprite/sprite',
glyphs:
'https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf',
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': '#2b2b3a'
}
}
]
},
center: [ 40, 40.16797 ],
zoom: 2.5
})
});
scene.on('loaded', () => {
scene.addImage(
'plane',
'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
);
Promise.all([
fetch(
'https://gw.alipayobjects.com/os/basement_prod/dbd008f1-9189-461c-88aa-569357ffc07d.json'
).then(d => d.json()),
fetch(
'https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json'
).then(d => d.text()),
fetch(
'https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json'
).then(d => d.text())
]).then(function onLoad([ world, dot, flyline ]) {
const dotData = eval(dot);
// @ts-ignore
const flydata = eval(flyline).map(item => {
// @ts-ignore
const latlng1 = item.from.split(',').map(e => {
return e * 1;
});
// @ts-ignore
const latlng2 = item.to.split(',').map(e => {
return e * 1;
});
return { coord: [ latlng1, latlng2 ] };
});
const worldLine = new LineLayer()
.source(world)
.color('#41fc9d')
.size(0.5)
.style({
opacity: 0.4
});
const dotPoint = new PointLayer()
.source(dotData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('#ffed11')
.animate(true)
.size(40)
.style({
opacity: 1.0
});
const flyLine = new LineLayer({ blend: 'normal' })
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#ff6b34')
.texture('plane')
.shape('arc')
// .shape('arc')
.size(20)
// .active(true)
.animate({
duration: 10,
interval: 0.2,
trailLength: 0.05
})
.style({
textureBlend: 'replace',
lineTexture: true, // 开启线的贴图功能
iconStep: 10, // 设置贴图纹理的间距
opacity: 1
});
const flyLine2 = new LineLayer()
.source(flydata, {
parser: {
type: 'json',
coordinates: 'coord'
}
})
.color('#ff6b34')
.shape('arc')
// .shape('arc')
.size(1)
// .active(true)
.style({
lineType: 'dash',
dashArray: [ 5, 5 ],
opacity: 0.5
});
scene.addLayer(worldLine);
scene.addLayer(dotPoint);
scene.addLayer(flyLine2);
scene.addLayer(flyLine);
});
});

5
examples/line/path/demo/meta.json
View File

@ -24,11 +24,6 @@
"title": "路径dark",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*DDjQRLEnwpoAAAAAAAAAAABkARQnAQ"
},
{
"filename": "road_red.js",
"title": "路径2d",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*1cF2RYwkcq8AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "road_dark_dash.js",
"title": "路径虚线",

33
examples/line/path/demo/road_red.js
View File

@ -1,33 +0,0 @@
import {
Scene,
LineLayer
} from '@antv/l7';
import {
GaodeMap
} from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 116.3956, 39.9392 ],
pitch: 0,
zoom: 10,
rotation: 0,
style: 'amap://styles/light',
viewMode: '2D'
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
)
.then(res => res.json())
.then(data => {
const layer = new LineLayer({})
.source(data)
.size(1.5)
.shape('line')
.color('标准名称', [ '#5B8FF9', '#5CCEA1', '#5D7092' ]);
scene.addLayer(layer);
});
});

2
examples/point/image/demo/road.js
View File

@ -35,7 +35,7 @@ scene.on('loaded', () => {
})
.style({
lineTexture: true, // 开启线的贴图功能
iconStep: 200 // 设置贴图纹理的间距
iconStep: 50 // 设置贴图纹理的间距
});
scene.addLayer(layer);

5
examples/point/scatter/demo/meta.json
View File

@ -14,6 +14,11 @@
"title": "动态散点",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*iourTIHnDk0AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "scatterStyleMap.js",
"title": "样式映射散点",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*F_QoSr-W0BwAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "animatePoint.js",
"title": "水波散点",

44
examples/point/scatter/demo/scatterStyleMap.js Normal file
View File

@ -0,0 +1,44 @@
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 112, 30.267069 ],
pitch: 0,
style: 'dark',
zoom: 6
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/bmw-prod/450b2d95-006c-4bad-8269-15729269e142.json')
.then(res => res.json())
.then(data => {
const layer = new PointLayer()
.source(data, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('color')
.size('value', v => 5 + 15 * v)
.style({
stroke: 'strokeColor',
strokeWidth: 'strokeWidth',
strokeOpacity: [
'strokeOpacity',
d => {
return d * 2;
}
],
opacity: 'opacity'
})
.active(true);
scene.addLayer(layer);
});
});

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

@ -6,10 +6,9 @@ const scene = new Scene({
map: new GaodeMap({
center: [ 120.5, 30.2 ],
pitch: 0,
style: 'amap://styles/453e2f8e11603fc8f7548fe18959e9e9',
style: 'dark',
zoom: 8.5,
zooms: [ 8, 10 ],
viewMode: '2D'
zooms: [ 8, 10 ]
})
});
const dataColor = {

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

@ -24,6 +24,11 @@
"title": "天气图标标注",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*JAhxTaabap4AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "styleMap.js",
"title": "文本偏移映射",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*LPoeTJ5tPxMAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "temperture.js",
"title": "气温图标标注",

164
examples/point/text/demo/styleMap.js Normal file
View File

@ -0,0 +1,164 @@
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 120.5, 30.2 ],
pitch: 0,
style: 'dark',
zoom: 8.5,
zooms: [ 8, 10 ]
})
});
const originData = [
{
lng: 120,
lat: 30,
iconType: 'sun',
iconColor: '#FFA500',
weather: '晴朗',
textOffset: [ 10, 0 ]
},
{
lng: 120.2,
lat: 30.5,
iconType: 'sun',
iconColor: '#FFA500',
weather: '晴朗 - 高温预警',
textOffset: [ -25, 0 ]
},
{
lng: 121.5,
lat: 31.4,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云',
textOffset: [ 10, 0 ]
},
{
lng: 120,
lat: 31,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 温度适宜',
textOffset: [ -25, 0 ]
},
{
lng: 120.6,
lat: 30.8,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云',
textOffset: [ 10, 0 ]
},
{
lng: 120.5,
lat: 31.3,
iconType: 'cloud',
iconColor: '#F0F8FF',
weather: '多云 - 今日适宜出门',
textOffset: [ -40, 0 ]
},
{
lng: 121.3,
lat: 30.2,
iconType: 'smallRain',
iconColor: '#6EA0FF',
weather: '中雨转小雨',
textOffset: [ -10, 0 ]
},
{
lng: 121,
lat: 30.5,
iconType: 'smallRain',
iconColor: '#6EA0FF',
weather: '小雨',
textOffset: [ 10, 0 ]
},
{
lng: 120.6,
lat: 30,
iconType: 'middleRain',
iconColor: '#6495ED',
weather: '中雨',
textOffset: [ 10, 0 ]
},
{
lng: 120.2,
lat: 29.7,
iconType: 'smallRain',
iconColor: '#6EA0FF',
weather: '小雨',
textOffset: [ 10, 0 ]
},
{
lng: 121.7,
lat: 29.8,
iconType: 'middleRain',
iconColor: '#6495ED',
weather: '大雨转中雨',
textOffset: [ -15, 0 ]
},
{
lng: 121.5,
lat: 30,
iconType: 'hugeRain',
iconColor: '#4678D2',
weather: '大雨',
textOffset: [ 10, 0 ]
}
];
const fontFamily = 'iconfont';
const fontPath =
'//at.alicdn.com/t/font_2534097_ao9soua2obv.woff2?t=1622021146076';
scene.addIconFonts([
[ 'smallRain', '' ],
[ 'middleRain', '' ],
[ 'hugeRain', '' ],
[ 'sun', '' ],
[ 'cloud', '' ]
]);
scene.addFontFace(fontFamily, fontPath);
scene.on('loaded', () => {
const pointIconFontLayer = new PointLayer({})
.source(originData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('iconType', 'text')
.size(30)
.color('iconColor')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: 'textOffset', // 文本相对锚点的偏移量 [水平, 垂直]
fontFamily,
iconfont: true,
textAllowOverlap: true
});
scene.addLayer(pointIconFontLayer);
const textLayer = new PointLayer({})
.source(originData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('weather', 'text')
.size(16)
.color('#fff')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
fontFamily: 'Times New Roman',
textAllowOverlap: true
});
scene.addLayer(textLayer);
});

5
examples/polygon/3d/demo/meta.json
View File

@ -8,6 +8,11 @@
"filename": "polygon.js",
"title": "3D 建筑面",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*RCaZSLthUn0AAAAAAAAAAABkARQnAQ"
},
{
"filename": "polygonStyleMap.js",
"title": "3D 几何体样式映射",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*7dEyQKcvVSwAAAAAAAAAAAAAARQnAQ"
}
]
}

49
examples/polygon/3d/demo/polygonStyleMap.js Normal file
View File

@ -0,0 +1,49 @@
import { Scene, PolygonLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'dark',
pitch: 50,
center: [ 118.8, 32.056 ],
zoom: 11
})
});
const colors = [
'#87CEFA',
'#00BFFF',
'#7FFFAA',
'#00FF7F',
'#32CD32',
'#F0E68C',
'#FFD700',
'#FF7F50',
'#FF6347',
'#FF0000'
];
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json'
)
.then(res => res.json())
.then(data => {
const filllayer = new PolygonLayer({
name: 'fill',
zIndex: 3
})
.source(data)
.shape('extrude')
.color('unit_price', colors)
.size('unit_price', unit_price => unit_price * 50)
.style({
opacity: [ 'unit_price', [ 0, 1 ]]
})
.active(true);
scene.addLayer(filllayer);
});
});

4
examples/polygon/fill/demo/meta.json
View File

@ -12,12 +12,12 @@
{
"filename": "city.js",
"title": "中国地图市级",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*GfGdRqWvJfAAAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*vC1JRL7jnnMAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "usa.js",
"title": "地图交互",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*HfZ7SKrS9fcAAAAAAAAAAABkARQnAQ"
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*TKTyTbo5LaAAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "fill.js",

4
examples/tutorial/map/demo/amapInstance.js
View File

@ -52,8 +52,8 @@ window.onLoad = function() {
});
};
// const url = 'https://webapi.amap.com/maps?v=1.4.15&key=15cd8a57710d40c9b7c0e3cc120f1200&callback=onLoad';
const url = 'https://webapi.amap.com/maps?v=2.0&key=ff533602d57df6f8ab3b0fea226ae52f&callback=onLoad';
const url = 'https://webapi.amap.com/maps?v=1.4.15&key=15cd8a57710d40c9b7c0e3cc120f1200&callback=onLoad';
// const url = 'https://webapi.amap.com/maps?v=2.0&key=ff533602d57df6f8ab3b0fea226ae52f&callback=onLoad';
const jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;

58
examples/tutorial/map/demo/amapInstance2d.js
View File

@ -1,58 +0,0 @@
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
window.onLoad = function() {
const map = new AMap.Map('map', {
pitch: 0,
mapStyle: 'amap://styles/darkblue',
center: [ 121.435159, 31.256971 ],
zoom: 14.89,
minZoom: 10
});
const scene = new Scene({
id: 'map',
map: new GaodeMap({
mapInstance: map
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json'
)
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer()
.source(data, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
})
.shape('name', [
'circle',
'triangle',
'square',
'pentagon',
'hexagon',
'octogon',
'hexagram',
'rhombus',
'vesica'
])
.size('unit_price', [ 10, 25 ])
.color('name', [ '#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452' ])
.style({
opacity: 0.3,
strokeWidth: 2
});
scene.addLayer(pointLayer);
});
});
};
const url = 'https://webapi.amap.com/maps?v=2.0&key=ff533602d57df6f8ab3b0fea226ae52f&callback=onLoad';
const jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

5
examples/tutorial/map/demo/meta.json
View File

@ -18,11 +18,6 @@
"filename": "amapInstance.js",
"title": "通过高德地图实例化",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*C5d2RJ08hOkAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "amapInstance2d.js",
"title": "通过高德地图实例化(2d)",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*C5d2RJ08hOkAAAAAAAAAAAAAARQnAQ"
}
]
}

11
packages/component/src/popup.ts
View File

@ -121,12 +121,14 @@ export default class Popup extends EventEmitter implements IPopup {
if (this.container) {
this.removeDom(this.container);
// @ts-ignore
delete this.container;
}
if (this.mapsService) {
// TODO: mapbox AMap 事件同步
this.mapsService.off('camerachange', this.update);
this.mapsService.off('click', this.onClickClose);
// @ts-ignore
delete this.mapsService;
}
clearTimeout(this.timeoutInstance);
@ -148,6 +150,15 @@ export default class Popup extends EventEmitter implements IPopup {
'l7-popup-close-button',
this.content,
);
if (this.popupOption.closeButtonOffsets) {
// 关闭按钮的偏移
this.closeButton.style.right =
this.popupOption.closeButtonOffsets[0] + 'px';
this.closeButton.style.top =
this.popupOption.closeButtonOffsets[1] + 'px';
}
// this.closeButton.type = 'button';
this.closeButton.setAttribute('aria-label', 'Close popup');
this.closeButton.innerHTML = '×';

1
packages/core/src/services/component/IPopupService.ts
View File

@ -4,6 +4,7 @@ import { ILngLat, IMapService } from '../map/IMapService';
export interface IPopupOption {
closeButton: boolean;
closeButtonOffsets?: [number, number];
closeOnClick: boolean;
maxWidth: string;
anchor: anchorType[any];

17
packages/layers/src/core/BaseModel.ts
View File

@ -333,6 +333,23 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
}
return false;
}
/**
* 获取 stroke 颜色并做兼容处理
* @param stroke
* @returns
*/
public getStrokeColor(stroke: styleColor) {
if (this.isStaticColor(stroke)) {
const strokeColor = rgb2arr(stroke as string);
strokeColor[0] = strokeColor[0] ? strokeColor[0] : 0;
strokeColor[1] = strokeColor[1] ? strokeColor[1] : 0;
strokeColor[2] = strokeColor[2] ? strokeColor[2] : 0;
strokeColor[3] = strokeColor[3] ? strokeColor[3] : 0;
return strokeColor;
} else {
return [0, 0, 0, 0];
}
}
/**
* 判断 offsets 是否是常量

5
packages/layers/src/point/models/fill.ts
View File

@ -91,10 +91,7 @@ export default class FillModel extends BaseModel {
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_stroke_opacity: isNumber(strokeOpacity) ? strokeOpacity : 1.0,
u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 0.0,
u_stroke_color:
isString(stroke) && this.isStaticColor(stroke)
? rgb2arr(stroke)
: [0, 0, 0, 0],
u_stroke_color: this.getStrokeColor(stroke),
u_offsets: this.isOffsetStatic(offsets)
? (offsets as [number, number])
: [0, 0],

5
packages/layers/src/point/models/text.ts
View File

@ -182,10 +182,7 @@ export default class TextModel extends BaseModel {
u_opacity: isNumber(opacity) ? opacity : 1.0,
u_stroke_width: isNumber(strokeWidth) ? strokeWidth : 0.0,
u_stroke_color:
isString(stroke) && this.isStaticColor(stroke)
? rgb2arr(stroke)
: [0, 0, 0, 0],
u_stroke_color: this.getStrokeColor(stroke),
u_sdf_map: this.texture,
u_halo_blur: halo,

15
packages/layers/src/point/shaders/fill_vert.glsl
View File

@ -84,10 +84,17 @@ void main() {
styleMappingMat[1][3] = pos2value(valueAPos, columnWidth, rowHeight); // A
textureOffset += 1.0;
} else {
styleMappingMat[1][0] = u_stroke_color.r;
styleMappingMat[1][1] = u_stroke_color.g;
styleMappingMat[1][2] = u_stroke_color.b;
styleMappingMat[1][3] = u_stroke_color.a;
if(u_stroke_color == vec4(0.0)) {
styleMappingMat[1][0] = v_color.r;
styleMappingMat[1][1] = v_color.g;
styleMappingMat[1][2] = v_color.b;
styleMappingMat[1][3] = v_color.a;
} else {
styleMappingMat[1][0] = u_stroke_color.r;
styleMappingMat[1][1] = u_stroke_color.g;
styleMappingMat[1][2] = u_stroke_color.b;
styleMappingMat[1][3] = u_stroke_color.a;
}
}
vec2 textrueOffsets = vec2(0.0, 0.0);

15
packages/layers/src/point/shaders/text_vert.glsl
View File

@ -78,10 +78,17 @@ void main() {
styleMappingMat[1][3] = pos2value(valueAPos, columnWidth, rowHeight); // A
textureOffset += 1.0;
} else {
styleMappingMat[1][0] = u_stroke_color.r;
styleMappingMat[1][1] = u_stroke_color.g;
styleMappingMat[1][2] = u_stroke_color.b;
styleMappingMat[1][3] = u_stroke_color.a;
if(u_stroke_color == vec4(0.0)) {
styleMappingMat[1][0] = v_color.r;
styleMappingMat[1][1] = v_color.g;
styleMappingMat[1][2] = v_color.b;
styleMappingMat[1][3] = v_color.a;
} else {
styleMappingMat[1][0] = u_stroke_color.r;
styleMappingMat[1][1] = u_stroke_color.g;
styleMappingMat[1][2] = u_stroke_color.b;
styleMappingMat[1][3] = u_stroke_color.a;
}
}
// cal style mapping - 数据纹理映射部分的计算

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

@ -121,7 +121,7 @@ export default class Amap2demo extends React.Component {
// }],
// stroke: ['strokeColor', ["#f00", "#ff0"]],
// strokeWidth: 4,
strokeWidth: 4,
// strokeWidth: "strokeWidth",
// strokeWidth: ["strokeWidth", [1, 2]],
// strokeWidth: ["strokeWidth", (d: any) => {

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

@ -14,7 +14,7 @@ export default class Amap2demo_arcLine3DTex extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
map: new GaodeMap({
pitch: 40,
center: [107.77791556935472, 35.443286920228644],
zoom: 2.9142882493605033,

3563
stories/Map/components/amap2demo_styleMap.tsx
View File

File diff suppressed because it is too large Load Diff

3
stories/MapAdaptor/components/MapboxInstance.tsx
View File

@ -16,7 +16,8 @@ export default class MapboxInstance extends React.Component {
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
);
mapboxgl.accessToken =
'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
'pk.eyJ1IjoibHp4dWUiLCJhIjoiY2tvaWZuM2s4MWZuYjJ1dHI5ZGduYTlrdiJ9.DQCfMRbZzx0VSwecQ69McA';
// pk.eyJ1IjoibHp4dWUiLCJhIjoiY2tvaWZuM2s4MWZuYjJ1dHI5ZGduYTlrdiJ9.DQCfMRbZzx0VSwecQ69McA
const map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location