From 587627042b4ec885718f2bd9581e55be6fefae5a Mon Sep 17 00:00:00 2001 From: lviser Date: Fri, 21 Jan 2022 11:47:02 +0800 Subject: [PATCH] docs(distict): demo of district (#945) --- .../administrative/demo/china-city.ts | 136 ++++++++++-------- .../administrative/demo/hangzhou-city.ts | 136 ++++++++++-------- .../administrative/demo/world-map.ts | 16 ++- .../administrative/demo/xihu-district.ts | 16 ++- .../demo/zhejiang-province-district.ts | 136 ++++++++++-------- .../administrative/demo/zhejiang-province.ts | 134 +++++++++-------- .../choropleth/drill/demo/drill-callback.ts | 28 ++-- .../choropleth/drill/demo/drill-intercept.ts | 28 ++-- examples/choropleth/drill/demo/order-drill.ts | 28 ++-- .../choropleth/drill/demo/unorder-drill.ts | 28 ++-- packages/scene/src/index.ts | 12 +- 11 files changed, 405 insertions(+), 293 deletions(-) diff --git a/examples/choropleth/administrative/demo/china-city.ts b/examples/choropleth/administrative/demo/china-city.ts index e01ebc66d0..5e85477dcf 100644 --- a/examples/choropleth/administrative/demo/china-city.ts +++ b/examples/choropleth/administrative/demo/china-city.ts @@ -1,70 +1,80 @@ +import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; -fetch( - `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, -) - .then((response) => response.json()) - .then((list) => { - const data = list - .filter(({ level }) => level === 'city') - .map((item) => Object.assign({}, item, { value: Math.random() * 5000 })); +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'blank', + center: [120.19382669582967, 30.258134], + zoom: 3, + pitch: 0, + }), +}); - new Choropleth('map', { - map: { - type: 'mapbox', - style: 'blank', - center: [120.19382669582967, 30.258134], - zoom: 3, - pitch: 0, - }, - source: { - data: data, - joinBy: { - sourceField: 'adcode', - geoField: 'adcode', +scene.on('loaded', () => { + fetch( + `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, + ) + .then((response) => response.json()) + .then((list) => { + const data = list + .filter(({ level }) => level === 'city') + .map((item) => + Object.assign({}, item, { value: Math.random() * 5000 }), + ); + + const choropleth = new Choropleth({ + source: { + data: data, + joinBy: { + sourceField: 'adcode', + geoField: 'adcode', + }, + }, + viewLevel: { + level: 'country', + adcode: 100000, + granularity: 'city', + }, + autoFit: true, + color: { + field: 'value', + value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], + scale: { type: 'quantize' }, }, - }, - viewLevel: { - level: 'country', - adcode: 100000, - granularity: 'city', - }, - autoFit: true, - color: { - field: 'value', - value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], - scale: { type: 'quantize' }, - }, - style: { - opacity: 1, - stroke: '#ccc', - lineWidth: 0.6, - lineOpacity: 1, - }, - label: { - visible: true, - field: 'name', style: { - fill: '#000', - opacity: 0.8, - fontSize: 10, - stroke: '#fff', - strokeWidth: 1.5, - textAllowOverlap: false, - padding: [5, 5], + opacity: 1, + stroke: '#ccc', + lineWidth: 0.6, + lineOpacity: 1, }, - }, - state: { - active: { stroke: 'black', lineWidth: 1 }, - }, - tooltip: { - items: ['name', 'adcode', 'value'], - }, - zoom: { - position: 'bottomright', - }, - legend: { - position: 'bottomleft', - }, + label: { + visible: true, + field: 'name', + style: { + fill: '#000', + opacity: 0.8, + fontSize: 10, + stroke: '#fff', + strokeWidth: 1.5, + textAllowOverlap: false, + padding: [5, 5], + }, + }, + state: { + active: { stroke: 'black', lineWidth: 1 }, + }, + tooltip: { + items: ['name', 'adcode', 'value'], + }, + zoom: { + position: 'bottomright', + }, + legend: { + position: 'bottomleft', + }, + }); + + choropleth.addToScene(scene); }); - }); +}); diff --git a/examples/choropleth/administrative/demo/hangzhou-city.ts b/examples/choropleth/administrative/demo/hangzhou-city.ts index 6b61d8732d..5fc4ab38e1 100644 --- a/examples/choropleth/administrative/demo/hangzhou-city.ts +++ b/examples/choropleth/administrative/demo/hangzhou-city.ts @@ -1,69 +1,81 @@ +import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; -fetch( - `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, -) - .then((response) => response.json()) - .then((list) => { - const data = list - .filter(({ level, parent }) => level === 'district' && parent === 330100) - .map((item) => Object.assign({}, item, { value: Math.random() * 5000 })); +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'blank', + center: [120.19382669582967, 30.258134], + zoom: 3, + pitch: 0, + }), +}); - new Choropleth('map', { - map: { - type: 'mapbox', - style: 'blank', - center: [120.19382669582967, 30.258134], - zoom: 3, - pitch: 0, - }, - source: { - data: data, - joinBy: { - sourceField: 'adcode', - geoField: 'adcode', +scene.on('loaded', () => { + fetch( + `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, + ) + .then((response) => response.json()) + .then((list) => { + const data = list + .filter( + ({ level, parent }) => level === 'district' && parent === 330100, + ) + .map((item) => + Object.assign({}, item, { value: Math.random() * 5000 }), + ); + + const choropleth = new Choropleth({ + source: { + data: data, + joinBy: { + sourceField: 'adcode', + geoField: 'adcode', + }, + }, + viewLevel: { + level: 'city', + adcode: 330100, + }, + autoFit: true, + color: { + field: 'value', + value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], + scale: { type: 'quantize' }, }, - }, - viewLevel: { - level: 'city', - adcode: 330100, - }, - autoFit: true, - color: { - field: 'value', - value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], - scale: { type: 'quantize' }, - }, - style: { - opacity: 1, - stroke: '#ccc', - lineWidth: 0.6, - lineOpacity: 1, - }, - label: { - visible: true, - field: 'name', style: { - fill: '#000', - opacity: 0.8, - fontSize: 10, - stroke: '#fff', - strokeWidth: 1.5, - textAllowOverlap: false, - padding: [5, 5], + opacity: 1, + stroke: '#ccc', + lineWidth: 0.6, + lineOpacity: 1, }, - }, - state: { - active: { stroke: 'black', lineWidth: 1 }, - }, - tooltip: { - items: ['name', 'adcode', 'value'], - }, - zoom: { - position: 'bottomright', - }, - legend: { - position: 'bottomleft', - }, + label: { + visible: true, + field: 'name', + style: { + fill: '#000', + opacity: 0.8, + fontSize: 10, + stroke: '#fff', + strokeWidth: 1.5, + textAllowOverlap: false, + padding: [5, 5], + }, + }, + state: { + active: { stroke: 'black', lineWidth: 1 }, + }, + tooltip: { + items: ['name', 'adcode', 'value'], + }, + zoom: { + position: 'bottomright', + }, + legend: { + position: 'bottomleft', + }, + }); + + choropleth.addToScene(scene); }); - }); +}); diff --git a/examples/choropleth/administrative/demo/world-map.ts b/examples/choropleth/administrative/demo/world-map.ts index 5a8e49b574..48ea3125d2 100644 --- a/examples/choropleth/administrative/demo/world-map.ts +++ b/examples/choropleth/administrative/demo/world-map.ts @@ -1,13 +1,17 @@ +import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; -new Choropleth('map', { - map: { - type: 'mapbox', +const scene = new Scene({ + id: 'map', + map: new Mapbox({ style: 'blank', center: [120.19382669582967, 30.258134], zoom: 3, pitch: 0, - }, + }), +}); + +const choropleth = new Choropleth({ source: { data: [], joinBy: { @@ -61,3 +65,7 @@ new Choropleth('map', { position: 'bottomleft', }, }); + +scene.on('loaded', () => { + choropleth.addToScene(scene); +}); diff --git a/examples/choropleth/administrative/demo/xihu-district.ts b/examples/choropleth/administrative/demo/xihu-district.ts index 450dadb646..09d3e13289 100644 --- a/examples/choropleth/administrative/demo/xihu-district.ts +++ b/examples/choropleth/administrative/demo/xihu-district.ts @@ -1,13 +1,17 @@ +import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; -new Choropleth('map', { - map: { - type: 'mapbox', +const scene = new Scene({ + id: 'map', + map: new Mapbox({ style: 'blank', center: [120.19382669582967, 30.258134], zoom: 3, pitch: 0, - }, + }), +}); + +const choropleth = new Choropleth({ source: { data: [{ adcode: 330106, value: 200 }], joinBy: { @@ -57,3 +61,7 @@ new Choropleth('map', { position: 'bottomleft', }, }); + +scene.on('loaded', () => { + choropleth.addToScene(scene); +}); diff --git a/examples/choropleth/administrative/demo/zhejiang-province-district.ts b/examples/choropleth/administrative/demo/zhejiang-province-district.ts index f8530a8ed4..ac4170ecc9 100644 --- a/examples/choropleth/administrative/demo/zhejiang-province-district.ts +++ b/examples/choropleth/administrative/demo/zhejiang-province-district.ts @@ -1,70 +1,80 @@ +import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; -fetch( - `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, -) - .then((response) => response.json()) - .then((list) => { - const data = list - .filter(({ level }) => level === 'district') - .map((item) => Object.assign({}, item, { value: Math.random() * 5000 })); +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'blank', + center: [120.19382669582967, 30.258134], + zoom: 3, + pitch: 0, + }), +}); - new Choropleth('map', { - map: { - type: 'mapbox', - style: 'blank', - center: [120.19382669582967, 30.258134], - zoom: 3, - pitch: 0, - }, - source: { - data: data, - joinBy: { - sourceField: 'adcode', - geoField: 'adcode', +scene.on('loaded', () => { + fetch( + `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, + ) + .then((response) => response.json()) + .then((list) => { + const data = list + .filter(({ level }) => level === 'district') + .map((item) => + Object.assign({}, item, { value: Math.random() * 5000 }), + ); + + const choropleth = new Choropleth({ + source: { + data: data, + joinBy: { + sourceField: 'adcode', + geoField: 'adcode', + }, + }, + viewLevel: { + level: 'province', + adcode: 330000, + granularity: 'district', + }, + autoFit: true, + color: { + field: 'value', + value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], + scale: { type: 'quantize' }, }, - }, - viewLevel: { - level: 'province', - adcode: 330000, - granularity: 'district', - }, - autoFit: true, - color: { - field: 'value', - value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], - scale: { type: 'quantize' }, - }, - style: { - opacity: 1, - stroke: '#ccc', - lineWidth: 0.6, - lineOpacity: 1, - }, - label: { - visible: true, - field: 'name', style: { - fill: '#000', - opacity: 0.8, - fontSize: 10, - stroke: '#fff', - strokeWidth: 1.5, - textAllowOverlap: false, - padding: [5, 5], + opacity: 1, + stroke: '#ccc', + lineWidth: 0.6, + lineOpacity: 1, }, - }, - state: { - active: { stroke: 'black', lineWidth: 1 }, - }, - tooltip: { - items: ['name', 'adcode', 'value'], - }, - zoom: { - position: 'bottomright', - }, - legend: { - position: 'bottomleft', - }, + label: { + visible: true, + field: 'name', + style: { + fill: '#000', + opacity: 0.8, + fontSize: 10, + stroke: '#fff', + strokeWidth: 1.5, + textAllowOverlap: false, + padding: [5, 5], + }, + }, + state: { + active: { stroke: 'black', lineWidth: 1 }, + }, + tooltip: { + items: ['name', 'adcode', 'value'], + }, + zoom: { + position: 'bottomright', + }, + legend: { + position: 'bottomleft', + }, + }); + + choropleth.addToScene(scene); }); - }); +}); diff --git a/examples/choropleth/administrative/demo/zhejiang-province.ts b/examples/choropleth/administrative/demo/zhejiang-province.ts index 174972521f..f8902e814d 100644 --- a/examples/choropleth/administrative/demo/zhejiang-province.ts +++ b/examples/choropleth/administrative/demo/zhejiang-province.ts @@ -1,69 +1,79 @@ +import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; -fetch( - `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, -) - .then((response) => response.json()) - .then((list) => { - const data = list - .filter(({ level, parent }) => level === 'city' && parent === 330000) - .map((item) => Object.assign({}, item, { value: Math.random() * 5000 })); +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'blank', + center: [120.19382669582967, 30.258134], + zoom: 3, + pitch: 0, + }), +}); - new Choropleth('map', { - map: { - type: 'mapbox', - style: 'blank', - center: [120.19382669582967, 30.258134], - zoom: 3, - pitch: 0, - }, - source: { - data: data, - joinBy: { - sourceField: 'adcode', - geoField: 'adcode', +scene.on('loaded', () => { + fetch( + `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, + ) + .then((response) => response.json()) + .then((list) => { + const data = list + .filter(({ level, parent }) => level === 'city' && parent === 330000) + .map((item) => + Object.assign({}, item, { value: Math.random() * 5000 }), + ); + + const choropleth = new Choropleth({ + source: { + data: data, + joinBy: { + sourceField: 'adcode', + geoField: 'adcode', + }, + }, + viewLevel: { + level: 'province', + adcode: 330000, + }, + autoFit: true, + color: { + field: 'value', + value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], + scale: { type: 'quantize' }, }, - }, - viewLevel: { - level: 'province', - adcode: 330000, - }, - autoFit: true, - color: { - field: 'value', - value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'], - scale: { type: 'quantize' }, - }, - style: { - opacity: 1, - stroke: '#ccc', - lineWidth: 0.6, - lineOpacity: 1, - }, - label: { - visible: true, - field: 'name', style: { - fill: '#000', - opacity: 0.8, - fontSize: 10, - stroke: '#fff', - strokeWidth: 1.5, - textAllowOverlap: false, - padding: [5, 5], + opacity: 1, + stroke: '#ccc', + lineWidth: 0.6, + lineOpacity: 1, }, - }, - state: { - active: { stroke: 'black', lineWidth: 1 }, - }, - tooltip: { - items: ['name', 'adcode', 'value'], - }, - zoom: { - position: 'bottomright', - }, - legend: { - position: 'bottomleft', - }, + label: { + visible: true, + field: 'name', + style: { + fill: '#000', + opacity: 0.8, + fontSize: 10, + stroke: '#fff', + strokeWidth: 1.5, + textAllowOverlap: false, + padding: [5, 5], + }, + }, + state: { + active: { stroke: 'black', lineWidth: 1 }, + }, + tooltip: { + items: ['name', 'adcode', 'value'], + }, + zoom: { + position: 'bottomright', + }, + legend: { + position: 'bottomleft', + }, + }); + + choropleth.addToScene(scene); }); - }); +}); diff --git a/examples/choropleth/drill/demo/drill-callback.ts b/examples/choropleth/drill/demo/drill-callback.ts index 04c7150b1c..c8f82df9d2 100644 --- a/examples/choropleth/drill/demo/drill-callback.ts +++ b/examples/choropleth/drill/demo/drill-callback.ts @@ -1,5 +1,16 @@ +import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'blank', + center: [120.19382669582967, 30.258134], + zoom: 3, + pitch: 0, + }), +}); + fetch( `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, ) @@ -17,14 +28,7 @@ fetch( .filter(({ level }) => level === 'district') .map((item) => Object.assign({}, item, { value: Math.random() * 1000 })); - new Choropleth('map', { - map: { - type: 'mapbox', - style: 'blank', - center: [120.19382669582967, 30.258134], - zoom: 3, - pitch: 0, - }, + const choropleth = new Choropleth({ source: { data: data, joinBy: { @@ -109,4 +113,12 @@ fetch( position: 'bottomleft', }, }); + + if (scene.loaded) { + choropleth.addToScene(scene); + } else { + scene.on('loaded', () => { + choropleth.addToScene(scene); + }); + } }); diff --git a/examples/choropleth/drill/demo/drill-intercept.ts b/examples/choropleth/drill/demo/drill-intercept.ts index ef326a0a52..e8f420757b 100644 --- a/examples/choropleth/drill/demo/drill-intercept.ts +++ b/examples/choropleth/drill/demo/drill-intercept.ts @@ -1,5 +1,16 @@ +import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'blank', + center: [120.19382669582967, 30.258134], + zoom: 3, + pitch: 0, + }), +}); + fetch( `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, ) @@ -17,14 +28,7 @@ fetch( .filter(({ level }) => level === 'district') .map((item) => Object.assign({}, item, { value: Math.random() * 1000 })); - new Choropleth('map', { - map: { - type: 'mapbox', - style: 'blank', - center: [120.19382669582967, 30.258134], - zoom: 3, - pitch: 0, - }, + const choropleth = new Choropleth({ source: { data: data, joinBy: { @@ -99,4 +103,12 @@ fetch( position: 'bottomleft', }, }); + + if (scene.loaded) { + choropleth.addToScene(scene); + } else { + scene.on('loaded', () => { + choropleth.addToScene(scene); + }); + } }); diff --git a/examples/choropleth/drill/demo/order-drill.ts b/examples/choropleth/drill/demo/order-drill.ts index a61a8e4d74..0f17ce15d5 100644 --- a/examples/choropleth/drill/demo/order-drill.ts +++ b/examples/choropleth/drill/demo/order-drill.ts @@ -1,5 +1,16 @@ +import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'blank', + center: [120.19382669582967, 30.258134], + zoom: 3, + pitch: 0, + }), +}); + fetch( `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, ) @@ -17,14 +28,7 @@ fetch( .filter(({ level }) => level === 'district') .map((item) => Object.assign({}, item, { value: Math.random() * 1000 })); - new Choropleth('map', { - map: { - type: 'mapbox', - style: 'blank', - center: [120.19382669582967, 30.258134], - zoom: 3, - pitch: 0, - }, + const choropleth = new Choropleth({ source: { data: data, joinBy: { @@ -94,4 +98,12 @@ fetch( position: 'bottomleft', }, }); + + if (scene.loaded) { + choropleth.addToScene(scene); + } else { + scene.on('loaded', () => { + choropleth.addToScene(scene); + }); + } }); diff --git a/examples/choropleth/drill/demo/unorder-drill.ts b/examples/choropleth/drill/demo/unorder-drill.ts index 4dfebded54..828abbc975 100644 --- a/examples/choropleth/drill/demo/unorder-drill.ts +++ b/examples/choropleth/drill/demo/unorder-drill.ts @@ -1,5 +1,16 @@ +import { Scene, Mapbox } from '@antv/l7'; import { Choropleth } from '@antv/l7plot'; +const scene = new Scene({ + id: 'map', + map: new Mapbox({ + style: 'blank', + center: [120.19382669582967, 30.258134], + zoom: 3, + pitch: 0, + }), +}); + fetch( `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`, ) @@ -13,14 +24,7 @@ fetch( .filter(({ level }) => level === 'district') .map((item) => Object.assign({}, item, { value: Math.random() * 1000 })); - new Choropleth('map', { - map: { - type: 'mapbox', - style: 'blank', - center: [120.19382669582967, 30.258134], - zoom: 3, - pitch: 0, - }, + const choropleth = new Choropleth({ source: { data: data, joinBy: { @@ -87,4 +91,12 @@ fetch( position: 'bottomleft', }, }); + + if (scene.loaded) { + choropleth.addToScene(scene); + } else { + scene.on('loaded', () => { + choropleth.addToScene(scene); + }); + } }); diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 9f25335368..772bfcb64b 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -51,9 +51,6 @@ import IPostProcessingPassPluggable from './IPostProcessingPassPluggable'; */ class Scene implements IPostProcessingPassPluggable, IMapController, ILayerManager { - public get map() { - return this.mapService.map; - } private sceneService: ISceneService; private mapService: IMapService; private controlService: IControlService; @@ -111,6 +108,15 @@ class Scene this.initControl(); } } + + public get map() { + return this.mapService.map; + } + + public get loaded() { + return this.sceneService.loaded; + } + public getServiceContainer(): Container { return this.container; }