From 1a42b1ad0ba627594ee72d168cfb1fc731a01ca2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B1=A1=E6=95=B0?= Date: Fri, 14 Oct 2022 10:41:18 +0800 Subject: [PATCH] demo: add world map demo --- .../features/tile/basemap/vectormap2.tsx | 174 ++++++++++++++++++ dev-demos/features/tile/basemap/worldmap.tsx | 57 ++++++ dev-demos/features/tile/minedatamap.md | 4 + dev-demos/features/tile/vector.md | 8 +- dev-demos/features/tile/vector/geojson-vt.tsx | 2 +- dev-demos/features/tile/worldmap.md | 3 + packages/layers/src/core/BaseLayer.ts | 12 +- packages/layers/src/tile/tmsTileLayer.ts | 1 + packages/source/src/source.ts | 2 +- 9 files changed, 251 insertions(+), 12 deletions(-) create mode 100644 dev-demos/features/tile/basemap/vectormap2.tsx create mode 100644 dev-demos/features/tile/basemap/worldmap.tsx create mode 100644 dev-demos/features/tile/minedatamap.md create mode 100644 dev-demos/features/tile/worldmap.md diff --git a/dev-demos/features/tile/basemap/vectormap2.tsx b/dev-demos/features/tile/basemap/vectormap2.tsx new file mode 100644 index 0000000000..a652612335 --- /dev/null +++ b/dev-demos/features/tile/basemap/vectormap2.tsx @@ -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 ( +
+ ); +}; diff --git a/dev-demos/features/tile/basemap/worldmap.tsx b/dev-demos/features/tile/basemap/worldmap.tsx new file mode 100644 index 0000000000..4c3d39b07a --- /dev/null +++ b/dev-demos/features/tile/basemap/worldmap.tsx @@ -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 ( +
+ ); + }; + \ No newline at end of file diff --git a/dev-demos/features/tile/minedatamap.md b/dev-demos/features/tile/minedatamap.md new file mode 100644 index 0000000000..6f6780cfa2 --- /dev/null +++ b/dev-demos/features/tile/minedatamap.md @@ -0,0 +1,4 @@ +### 底图- Vector Tile Map + +地图底图 + \ No newline at end of file diff --git a/dev-demos/features/tile/vector.md b/dev-demos/features/tile/vector.md index c68b2304c0..8bc410b4dd 100644 --- a/dev-demos/features/tile/vector.md +++ b/dev-demos/features/tile/vector.md @@ -1,13 +1,13 @@ ### Vector -#### vector point + #### geojson-vt -#### debugLayer - \ No newline at end of file + \ No newline at end of file diff --git a/dev-demos/features/tile/vector/geojson-vt.tsx b/dev-demos/features/tile/vector/geojson-vt.tsx index 3352cec557..d8b9545a7d 100644 --- a/dev-demos/features/tile/vector/geojson-vt.tsx +++ b/dev-demos/features/tile/vector/geojson-vt.tsx @@ -46,7 +46,7 @@ export default () => { }) .source(source) .color('COLOR') - .active(true) + .select(true) .style({ opacity: 0.6, }); diff --git a/dev-demos/features/tile/worldmap.md b/dev-demos/features/tile/worldmap.md new file mode 100644 index 0000000000..0be1d5be49 --- /dev/null +++ b/dev-demos/features/tile/worldmap.md @@ -0,0 +1,3 @@ +### 世界地图瓦片 +#### 世界地图 + \ No newline at end of file diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 0763b1929e..3dbfee59b6 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -589,6 +589,7 @@ export default class BaseLayer this.setSource(data); return this; } + // 设置source 配置 this.sourceOption = { data, options, @@ -606,7 +607,6 @@ export default class BaseLayer 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 } public setSource(source: Source) { - // 清除旧 sources 事件 + // 解除原 sources 事件 if (this.layerSource) { this.layerSource.off('sourceUpdate', this.sourceEvent); } @@ -1047,6 +1047,10 @@ export default class BaseLayer // 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 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(); }); diff --git a/packages/layers/src/tile/tmsTileLayer.ts b/packages/layers/src/tile/tmsTileLayer.ts index a0c9506d6a..e1e1e47f31 100644 --- a/packages/layers/src/tile/tmsTileLayer.ts +++ b/packages/layers/src/tile/tmsTileLayer.ts @@ -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; } diff --git a/packages/source/src/source.ts b/packages/source/src/source.ts index 430cdf2bdc..b75839b934 100644 --- a/packages/source/src/source.ts +++ b/packages/source/src/source.ts @@ -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 {