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

Shihui (#1025) 

* style: lint style

* style: lint style

* docs: 增加官网关于 setCenter 的 demo/文档

* style: lint style

* docs: 增加 3D 填充图关于抬升配置和纹理配置的 demo 和 文档
This commit is contained in:
YiQianYao 2022-03-29 18:44:34 +08:00 committed by GitHub
parent e0a48d8dab
commit 1f833c268a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 287 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/api/polygon_layer/extrude.zh.md
View File

@ -61,4 +61,38 @@ style({
[在线案例](/zh/examples/react/covid#covid_extrude)
- raisingHeight 设置 3D 填充图的抬升高度
🌟 设置抬升高度的前提是 heightfixed 为 true
🌟 在 v2.8.17 版本开始支持
<img width="40%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*D8GeSKNZxWIAAAAAAAAAAAAAARQnAQ">
[在线案例](/zh/examples/polygon/3d#floatMap)
- mapTexture 设置 3D 填充图的顶面纹理
🌟 在设置 mapTexture 的时候允许用户配置侧面的渐变色
🌟 在 v2.8.17 版本开始支持
<img width="40%" style="display: block;margin: 0 auto;" alt="面图层填充图" src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*K18EQZoe4awAAAAAAAAAAAAAARQnAQ">
```javascript
const provincelayer = new PolygonLayer({})
.source(data)
.size(150000)
.shape('extrude')
.color('#0DCCFF')
.style({
heightfixed: true,
pickLight: true,
raisingHeight: 200000,
mapTexture:
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0tmIRJG9cQQAAAAAAAAAAAAAARQnAQ',
sourceColor: '#333',
targetColor: '#fff',
});
```
[在线案例](/zh/examples/polygon/3d#texture3D)
`markdown:docs/common/layer/base.md`

30
docs/api/scene.zh.md
View File

@ -416,15 +416,39 @@ scene.setMapStyle(
);
```
### setCenter() 设置地图中心点
### setCenter(center: [number, number], option?: ICameraOptions) 设置地图中心点
设置地图中心点坐标
参数：`center` {LngLat} 地图中心点
设置地图中心点坐标。L7 提供了 setCenter 方法，允许用户动态的设置地图的中心点位，同时允许通过可选的 options 属性设置偏移。
```javascript
scene.setCenter([lng, lat]);
scene.setCenter([lng, lat], {
padding: {
top: 100,
},
});
```
参数：`center` {LngLat} 地图中心点
padding 参数支持如下的三种传值方式，数值的单位是 px
```javascript
export interface ICameraOptions {
padding:
| number
| [number, number, number, number]
| {
top?: number,
bottom?: number,
right?: number,
left?: number,
};
}
```
[在线案例](/zh/examples/point/bubble#point)
### setZoomAndCenter 设置地图缩放等级和中心点

2
examples/point/bubble/demo/meta.json
View File

@ -6,7 +6,7 @@
"demos": [
{
"filename": "point.js",
"title": "气泡图",
"title": "气泡图（点击拾取）",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*BGJfT5GYaZAAAAAAAAAAAAAAARQnAQ"
},
{

41
examples/point/bubble/demo/point.js
View File

@ -13,6 +13,7 @@ const scene = new Scene({
})
});
scene.on('loaded', () => {
const plane = initPlane();
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json'
)
@ -31,5 +32,45 @@ scene.on('loaded', () => {
strokeWidth: 1
});
scene.addLayer(pointLayer);
pointLayer.on('click', e => {
const { lng, lat } = e.lngLat;
scene.setCenter([ lng, lat ], {
padding: {
right: 120
}
});
plane.style.right = '0px';
plane.innerHTML = `
<p>click info</>
<p>featureId: ${e.featureId}</p>
<p>lng: ${lng}</p>
<p>lat: ${lat}</p>
`;
});
pointLayer.on('unclick', () => {
plane.style.right = '-120px';
scene.setCenter([ 140.067171, 36.26186 ], {
padding: {
right: 0
}
});
});
});
});
function initPlane() {
const el = document.createElement('div');
el.style.background = '#fff';
el.style.position = 'absolute';
el.style.padding = '10px';
el.style.top = '0';
el.style.right = '-120px';
el.style.width = '100px';
el.style.height = '100%';
el.style.zIndex = '10';
el.style.transition = '0.5s';
// el.innerText = '123'
const wrap = document.getElementById('map');
wrap.appendChild(el);
return el;
}

139
examples/polygon/3d/demo/floatMap.js Normal file
View File

@ -0,0 +1,139 @@
import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'dark',
center: [ 120, 29.732983 ],
zoom: 6.2,
pitch: 60
})
});
scene.on('loaded', () => {
let lineDown,
lineUp,
textLayer;
fetch('https://gw.alipayobjects.com/os/bmw-prod/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json')
.then(res => res.json())
.then(data => {
const texts = [];
data.features.map(option => {
const { name, center } = option.properties;
const [ lng, lat ] = center;
texts.push({ name, lng, lat });
return '';
});
textLayer = new PointLayer({ zIndex: 2 })
.source(texts, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('name', 'text')
.size(14)
.color('#0ff')
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
spacing: 2, // 字符间距
padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#0ff', // 描边颜色
strokeWidth: 0.2, // 描边宽度
raisingHeight: 200000 + 150000 + 10000,
textAllowOverlap: true
});
scene.addLayer(textLayer);
lineDown = new LineLayer()
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000
});
lineUp = new LineLayer({ zIndex: 1 })
.source(data)
.shape('line')
.color('#0DCCFF')
.size(1)
.style({
raisingHeight: 200000 + 150000
});
scene.addLayer(lineDown);
scene.addLayer(lineUp);
return '';
});
fetch('https://gw.alipayobjects.com/os/bmw-prod/d434cac3-124e-4922-8eed-ccde01674cd3.json')
.then(res => res.json())
.then(data => {
const lineLayer = new LineLayer()
.source(data)
.shape('wall')
.size(150000)
.style({
heightfixed: true,
opacity: 0.6,
sourceColor: '#0DCCFF',
targetColor: 'rbga(255,255,255, 0)'
});
scene.addLayer(lineLayer);
const provincelayer = new PolygonLayer({})
.source(data)
.size(150000)
.shape('extrude')
.color('#0DCCFF')
.active({
color: 'rgb(100,230,255)'
})
.style({
heightfixed: true,
pickLight: true,
raisingHeight: 200000,
opacity: 0.8
});
scene.addLayer(provincelayer);
provincelayer.on('mousemove', () => {
provincelayer.style({
raisingHeight: 200000 + 100000
});
lineDown.style({
raisingHeight: 200000 + 100000
});
lineUp.style({
raisingHeight: 200000 + 150000 + 100000
});
textLayer.style({
raisingHeight: 200000 + 150000 + 10000 + 100000
});
});
provincelayer.on('unmousemove', () => {
provincelayer.style({
raisingHeight: 200000
});
lineDown.style({
raisingHeight: 200000
});
lineUp.style({
raisingHeight: 200000 + 150000
});
textLayer.style({
raisingHeight: 200000 + 150000 + 10000
});
});
return '';
});
return '';
});

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

@ -13,6 +13,16 @@
"filename": "polygonStyleMap.js",
"title": "3D 几何体样式映射",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*yxRiTJDOrS8AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "floatMap.js",
"title": "漂浮地图板块",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*D8GeSKNZxWIAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "texture3D.js",
"title": "手绘地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*K18EQZoe4awAAAAAAAAAAAAAARQnAQ"
}
]
}

34
examples/polygon/3d/demo/texture3D.js Normal file
View File

@ -0,0 +1,34 @@
import { Scene, PolygonLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'dark',
center: [ 120, 29.732983 ],
zoom: 6.2,
pitch: 60
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/bmw-prod/d434cac3-124e-4922-8eed-ccde01674cd3.json')
.then(res => res.json())
.then(data => {
const provincelayer = new PolygonLayer({})
.source(data)
.size(150000)
.shape('extrude')
.color('#0DCCFF')
.style({
heightfixed: true,
pickLight: true,
raisingHeight: 200000,
mapTexture:
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0tmIRJG9cQQAAAAAAAAAAAAAARQnAQ',
sourceColor: '#333',
targetColor: '#fff'
});
scene.addLayer(provincelayer);
});
});

2
package.json
View File

@ -139,7 +139,7 @@
},
"scripts": {
"start": "yarn run site:clean && yarn run site:develop",
"site:develop": "cross-env BABEL_ENV=site GATSBY_LOGGER=ink gatsby develop --open --host 127.0.0.1 -p 8848",
"site:develop": "cross-env BABEL_ENV=site GATSBY_LOGGER=ink gatsby develop --open -H 0.0.0.0",
"site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths",
"site:clean": "gatsby clean",
"site:deploy": "yarn run site:build && gh-pages -d public",