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

docs(distict): demo of district (#945)

This commit is contained in:
lviser 2022-01-21 11:47:02 +08:00 committed by GitHub
parent 80d5642215
commit 587627042b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 405 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
examples/choropleth/administrative/demo/china-city.ts
View File

@ -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);
});
});
});

136
examples/choropleth/administrative/demo/hangzhou-city.ts
View File

@ -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);
});
});
});

16
examples/choropleth/administrative/demo/world-map.ts
View File

@ -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);
});

16
examples/choropleth/administrative/demo/xihu-district.ts
View File

@ -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);
});

136
examples/choropleth/administrative/demo/zhejiang-province-district.ts
View File

@ -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);
});
});
});

134
examples/choropleth/administrative/demo/zhejiang-province.ts
View File

@ -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);
});
});
});

28
examples/choropleth/drill/demo/drill-callback.ts
View File

@ -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);
});
}
});

28
examples/choropleth/drill/demo/drill-intercept.ts
View File

@ -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);
});
}
});

28
examples/choropleth/drill/demo/order-drill.ts
View File

@ -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);
});
}
});

28
examples/choropleth/drill/demo/unorder-drill.ts
View File

@ -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);
});
}
});

12
packages/scene/src/index.ts
View File

@ -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<unknown>;
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;
}