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

demo: add world map demo

This commit is contained in:
象数 2022-10-14 10:41:18 +08:00
parent 3b2817595f
commit 1a42b1ad0b
9 changed files with 251 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
dev-demos/features/tile/basemap/vectormap2.tsx Normal file
View File

@ -0,0 +1,174 @@
// @ts-ignore
import {
Scene,
Source,
PolygonLayer,
TileDebugLayer,
} from '@antv/l7';
// @ts-ignore
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [121.268, 30.3628],
// zoom: 12,
zoom: 4,
}),
});
const url =
'https://minedata.cn/service/data/mvt-layer?datasource=merge2&z={z}&x={x}&y={y}&request=GetTile&appKey=ca78282dfff148e3be5390ce027068f5&solu=12612';
const source = new Source(url, {
parser: {
type: 'mvt',
tileSize: 256,
// extent: [-180, -85.051129, 179, 85.051129],
},
});
/**
* admin
* country_label
* marine_label
* place_label
* state_label
* water
* road
* road_label
* landuse
* landuse_overlay
* waterway
* tunnel
*/
scene.on('loaded', () => {
// 绿地
const water_surface = new PolygonLayer({
sourceLayer: 'water_surface',
})
.source(source)
.shape('fill')
.color('#9fd7fc');
// const landuse = new PolygonLayer({
// sourceLayer: 'Landuse',
// })
// .source(source)
// .shape('fill')
// .color('#f0f2f5')
// .style({
// opacity: 0.25
// });
scene.addLayer(water_surface);
// scene.addLayer(landuse);
// const road = new LineLayer({
// sourceLayer: 'road',
// })
// .source(source)
// .shape('simple')
// .color('#FFA500');
// scene.addLayer(road);
// const landuse_overlay = new PolygonLayer({
// sourceLayer: 'landuse_overlay',
// })
// .source(source)
// .color('#f00');
// scene.addLayer(landuse_overlay);
// const waterway = new LineLayer({
// sourceLayer: 'waterway',
// })
// .source(source)
// .shape('simple')
// .color('#87CEFA');
// scene.addLayer(waterway);
// const tunnel = new LineLayer({
// sourceLayer: 'tunnel',
// })
// .source(source)
// .shape('simple')
// // .color('#A9A9A9');
// .color('#f00');
// scene.addLayer(tunnel);
// const landuse = new PolygonLayer({
// sourceLayer: 'landuse',
// })
// .source(source)
// .color('#90EE90');
// scene.addLayer(landuse);
// const state_label = new PointLayer({
// sourceLayer: 'state_label',
// zIndex: 1,
// })
// .source(source)
// .shape('name', 'text')
// .color('#000')
// .size(10);
// scene.addLayer(state_label);
// const placeLabel = new PointLayer({
// sourceLayer: 'place_label',
// zIndex: 1,
// })
// .source(source)
// .shape('name', 'text')
// .color('#000')
// .size(8);
// scene.addLayer(placeLabel);
// const marineLabel = new PointLayer({
// sourceColor: 'marine_label',
// zIndex: 1,
// })
// .source(source)
// .shape('name', 'text')
// .color('#0ff')
// .size(15);
// scene.addLayer(marineLabel);
// const countryLabel = new PointLayer({
// sourceLayer: 'country_label',
// zIndex: 2,
// })
// .source(source)
// .shape('name', 'text')
// .color('#f00')
// .size(15);
// scene.addLayer(countryLabel);
// const water = new PolygonLayer({
// sourceLayer: 'water',
// })
// .source(source)
// .color('#87CEFA');
// scene.addLayer(water);
const debugerLayer = new TileDebugLayer();
scene.addLayer(debugerLayer);
// scene.on('zoom', () => {
// console.log(scene.getLayers().length)
// })
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

57
dev-demos/features/tile/basemap/worldmap.tsx Normal file
View File

@ -0,0 +1,57 @@
// @ts-ignore
import {
Scene,
Source,
PolygonLayer,
} from '@antv/l7';
// @ts-ignore
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [121.268, 30.3628],
// zoom: 12,
zoom: 4,
}),
});
const url =
'https://mvt.amap.com/district/WLD/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=';
const source = new Source(url, {
parser: {
type: 'mvt',
tileSize: 256,
// extent: [-180, -85.051129, 179, 85.051129],
},
});
scene.on('loaded', () => {
// 绿地
const water_surface = new PolygonLayer({
sourceLayer: 'WLD',
})
.source(source)
.shape('fill')
.color('#9fd7fc');
scene.addLayer(water_surface);
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

4
dev-demos/features/tile/minedatamap.md Normal file
View File

@ -0,0 +1,4 @@
### 底图- Vector Tile Map
地图底图
<code src="./basemap/vectormap2.tsx"></code>

8
dev-demos/features/tile/vector.md
View File

@ -1,13 +1,13 @@
### Vector
#### vector point
<!-- #### vector point
<code src="./vector/point.tsx"></code>
#### vector line
<code src="./vector/line.tsx"></code>
<code src="./vector/line.tsx"></code> -->
#### geojson-vt
<code src="./vector/geojson-vt.tsx"></code>
#### debugLayer
<code src="./vector/debugLayer.tsx"></code>
<!-- #### debugLayer
<code src="./vector/debugLayer.tsx"></code> -->

2
dev-demos/features/tile/vector/geojson-vt.tsx
View File

@ -46,7 +46,7 @@ export default () => {
})
.source(source)
.color('COLOR')
.active(true)
.select(true)
.style({
opacity: 0.6,
});

3
dev-demos/features/tile/worldmap.md Normal file
View File

@ -0,0 +1,3 @@
### 世界地图瓦片
#### 世界地图
<code src="./basemap/worldmap.tsx"></code>

12
packages/layers/src/core/BaseLayer.ts
View File

@ -589,6 +589,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.setSource(data);
return this;
}
// 设置source 配置
this.sourceOption = {
data,
options,
@ -606,7 +607,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
if (!currentSource) {
// 执行 setData 的时候 source 还不存在（还未执行 addLayer）
this.source(new Source(data, options));
this.sourceEvent();
} else {
this.layerSource.setData(data, options);
}
@ -1031,7 +1031,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
}
public setSource(source: Source) {
// 清除旧 sources 事件
// 解除原 sources 事件
if (this.layerSource) {
this.layerSource.off('sourceUpdate', this.sourceEvent);
}
@ -1047,6 +1047,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
// source 可能会复用，会在其它layer被修改
if (this.layerSource.inited) {
this.sourceEvent();
} else {
source.on('inited', () => {
this.sourceEvent();
});
}
// this.layerSource.inited 为 true 后，sourceUpdate 事件不会再触发
this.layerSource.on('sourceUpdate', () => {
@ -1055,10 +1059,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.coordCenter = layerCenter;
this.mapService.setCoordCenter &&
this.mapService.setCoordCenter(layerCenter);
// // @ts-ignore
// this.mapService.map.customCoords.setCenter(layerCenter);
// // @ts-ignore
// this.mapService.setCustomCoordCenter(layerCenter);
}
this.sourceEvent();
});

1
packages/layers/src/tile/tmsTileLayer.ts
View File

@ -18,6 +18,7 @@ export class TMSTileLayer extends BaseTileLayer {
// vector
const vectorTileLayer = tile.data.layers[this.sourceLayer];
const features = vectorTileLayer?.features;
console.log(features);
if (!(Array.isArray(features) && features.length > 0)) {
return;
}

2
packages/source/src/source.ts
View File

@ -176,7 +176,7 @@ export default class Source extends EventEmitter implements ISource {
},
);
this.dataArrayChanged = true;
this.emit('update');
this.emit('sourceUpdate');
}
public getFeatureId(field: string, value: any): number | undefined {