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

chore(district): update china data

This commit is contained in:
thinkinggis 2020-06-28 17:18:10 +08:00
parent e8f983e4f8
commit eddb31b1e3
11 changed files with 240 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/api/district/baselayer.zh.md
View File

@ -41,14 +41,18 @@ order: 2
数据映射
- field 填充映射字段
- values 映射值，同 color 方法第二个参数数组，回调函数
- filter 图层过滤方法，支持常量和数据映射 同 layer.filter 方法
数据映射 - field 填充映射字段 - values 回调函数 `false` 返回值将会被过滤掉
- style 同 polygonLayer 的 style 方法
- activeColor 鼠标滑过高亮颜色
- activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮
- bubble 气泡图
- enable `boolean` 是否显示气泡 default false
- color 气泡颜色 支持常量、数据映射
- size 气泡大小 支持常量、数据映射
- shape 气泡形状 支持常量、数据映射
- style 气泡图样式 同 PointLayer
- filter 图层过滤方法，支持常量和数据映射 同 layer.filter 方法
数据映射 - field 填充映射字段 - values 回调函数 `false` 返回值将会被过滤掉
- stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
- strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
- autoFit 是否自动缩放到图层范围 `boolean`

12
examples/district/basic/API.zh.md
View File

@ -19,7 +19,6 @@ import { WorldLayer } from '@antv/l7-district';
<script src="https://unpkg.com/@antv/l7-district"></script>
</head>
```
⚠️⚠️⚠️ District 相关配置和接口还在完善中，你可以适用体验，某些配置和接口可能会进行调整
## 简介
@ -57,13 +56,22 @@ District 支持下面几种图
数据映射
- field 填充映射字段
- values 映射值，同color方法第二个参数数组，回调函数
- filter 图层过滤方法，支持常量和数据映射 同layer.filter方法
数据映射
- field 填充映射字段
- values 回调函数 `false` 返回值将会被过滤掉
- style 同 polygonLayer的style方法
- activeColor 鼠标滑过高亮颜色
- activeColor 鼠标滑过高亮颜色, `string | boolean` 如果设置为 `false`取消高亮
- bubble 气泡图
- enable `boolean` 是否显示气泡 default false
- color 气泡颜色 支持常量、数据映射
- size 气泡大小 支持常量、数据映射
- shape 气泡形状 支持常量、数据映射
- filter 图层过滤方法，支持常量和数据映射 同layer.filter方法
数据映射
- field 填充映射字段
- values 回调函数 `false` 返回值将会被过滤掉
- style 气泡图样式 同 PointLayer
- stroke 填充描边颜色 `ProvinceLayer, CityLayer, CountyLayer`
- strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`

98
examples/district/basic/demo/attach_map.js Normal file
View File

@ -0,0 +1,98 @@
import { Scene } from '@antv/l7';
import { CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 0,
maxZoom: 10
})
});
const attachMapContainer = document.createElement('div');
attachMapContainer.id = 'attach';
attachMapContainer.style.cssText = `position: absolute;
height: 125px;
width: 98px;
right: 50px;
bottom: 20px;
border: 1px solid #333;`;
document.getElementById('map').parentElement.append(attachMapContainer);
scene.on('loaded', () => {
new CountryLayer(scene, {
data: [],
joinBy: [ 'NAME_CHN', 'name' ],
depth: 1,
provinceStroke: '#783D2D',
cityStroke: '#EBCCB4',
cityStrokeWidth: 1,
label: {
enable: false
},
fill: {
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});
// 添加附图，附图需要和主图保持一致
const scene2 = new Scene({
id: 'attach',
logoVisible: false,
map: new Mapbox({
center: [ 113.60540108435657, 12.833692637803168 ],
pitch: 0,
style: 'blank',
zoom: 1.93,
minZoom: 0,
maxZoom: 3,
interactive: false
})
});
scene2.on('loaded', () => {
new CountryLayer(scene2, {
data: [],
label: {
enable: false
},
popup: {
enable: false
},
autoFit: false,
depth: 1,
fill: {
color: {
field: 'NAME_CHN',
values: [
'#feedde',
'#fdd0a2',
'#fdae6b',
'#fd8d3c',
'#e6550d',
'#a63603'
]
}
}
});
});

106
examples/district/basic/demo/hainan.js Normal file
View File

@ -0,0 +1,106 @@
import { Scene } from '@antv/l7';
import { ProvinceLayer, CountryLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
async function initMap() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 109.803, 19.347 ],
pitch: 0,
style: 'blank',
zoom: 7,
minZoom: 6,
maxZoom: 11
})
});
const attachMapContainer = document.createElement('div');
attachMapContainer.id = 'attach';
attachMapContainer.style.cssText = `position: absolute;
height: 125px;
width: 98px;
right: 50px;
bottom: 20px;
border: 1px solid #333;`;
document.getElementById('map').parentElement.append(attachMapContainer);
scene.on('loaded', () => {
new ProvinceLayer(scene, {
data: [],
geoDataLevel: 1,
autoFit: false,
joinBy: [ 'adcode', 'code' ],
adcode: [ '460000' ],
depth: 2,
stroke: '#aaa',
label: {
enable: false,
field: 'NAME_CHN',
textAllowOverlap: false
},
fill: {
color: '#A3d7FF'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
const scene2 = new Scene({
id: 'attach',
logoVisible: false,
map: new Mapbox({
center: [ 113.60540108435657, 12.833692637803168 ],
pitch: 0,
style: 'blank',
zoom: 1.93,
// zoom: 3,
minZoom: 0,
maxZoom: 3,
interactive: false
})
});
scene2.on('loaded', () => {
new CountryLayer(scene2, {
data: [],
label: {
enable: false
},
popup: {
enable: false
},
autoFit: false,
provinceStroke: '#aaa',
depth: 1,
fill: {
color: '#A3d7FF'
}
});
new ProvinceLayer(scene2, {
data: [],
autoFit: false,
adcode: [ '460000' ],
depth: 2,
zIndex: 2,
stroke: '#aaa',
strokeWidth: 0.1,
label: {
enable: false,
field: 'NAME_CHN',
textAllowOverlap: false
},
fill: {
color: '#A3d7ff'
},
popup: {
enable: false,
Html: props => {
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
}
}
});
});
}
initMap();

10
examples/district/basic/demo/meta.json
View File

@ -28,6 +28,16 @@
"filename": "county.js",
"title": "中国县地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*iVwLSpIf_ckAAAAAAAAAAABkARQnAQ"
},
{
"filename": "attach_map.js",
"title": "中国地图附图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*bGX-Tbw5uVAAAAAAAAAAAABkARQnAQ"
},
{
"filename": "hainan.js",
"title": "海南省地图",
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nHOTQ61hFbYAAAAAAAAAAABkARQnAQ"
}
]
}

2
examples/district/react/demo/province.tsx
View File

@ -217,7 +217,7 @@ class Province extends React.Component {
const { province } = this.state;
this.provinceLayer = new ProvinceLayer(scene, {
adcode: ['230000'],
depth: 3,
depth: 1,
label: {
field: 'NAME_CHN',
textAllowOverlap: false,

10
packages/boundry/src/config.ts
View File

@ -127,12 +127,12 @@ const dataLevel1: { [key: string]: any } = {
fill: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/56cb34eb-cf61-4512-a6f3-fe4a45a7b1a3.bin',
'https://gw.alipayobjects.com/os/bmw-prod/35bb8365-1926-471c-b357-db2c02ff3a81.bin',
},
line: {
type: 'pbf',
url:
'//gw.alipayobjects.com/os/bmw-prod/76914518-e04c-42c9-8c4b-1ae71aabb024.bin',
'https://gw.alipayobjects.com/os/bmw-prod/8ec671c3-a4f9-4fdf-8e88-85d2ab1d8930.bin',
},
label: {
type: 'pbf',
@ -154,7 +154,7 @@ const dataLevel1: { [key: string]: any } = {
fill: {
type: 'pbf',
url:
'https://gw.alipayobjects.com/os/bmw-prod/1d03a9af-1df4-407f-8bae-3638a1e0ad65.bin',
'https://gw.alipayobjects.com/os/bmw-prod/380370e0-76aa-4240-8874-5732de77e71d.bin',
},
line: {
type: 'pbf',
@ -176,7 +176,7 @@ const dataLevel1: { [key: string]: any } = {
fill: {
type: 'pbf',
url:
'//gw.alipayobjects.com/os/bmw-prod/561e2cfe-9460-42d1-a2f8-3fd2e1274c52.bin',
'https://gw.alipayobjects.com/os/bmw-prod/feeb1f06-11c6-4495-84c9-f41ea6f77123.bin',
},
line: {
type: 'pbf',
@ -198,7 +198,7 @@ const dataLevel1: { [key: string]: any } = {
fill: {
type: 'pbf',
url:
'//gw.alipayobjects.com/os/bmw-prod/516b2703-d692-44e6-80dd-b3f5df0186e7.bin',
'https://gw.alipayobjects.com/os/bmw-prod/24a9ee83-2be1-4fc1-b187-769ac939269d.bin',
},
line: {
type: 'pbf',

3
packages/boundry/src/layer/drillDown.ts
View File

@ -184,7 +184,7 @@ export default class DrillDownLayer {
}
private getLayerOption(type: 'province' | 'city' | 'county') {
const { joinBy, label, bubble, fill, popup, province } = this.options;
const { joinBy, label, bubble, fill, popup, geoDataLevel } = this.options;
const datatype = (type + 'Data') as
| 'provinceData'
| 'cityData'
@ -196,6 +196,7 @@ export default class DrillDownLayer {
bubble,
fill,
popup,
geoDataLevel,
...this.options[type],
};
}

1
packages/boundry/src/layer/interface.ts
View File

@ -110,6 +110,7 @@ interface IDrawOption {
}
export interface IDrillDownOption {
drillDepth: 0 | 1 | 2;
geoDataLevel: 1 | 2;
customTrigger: boolean;
drillDownTriggerEvent: TriggeEventType;
drillUpTriggerEvent: TriggeEventType & DrillUpTriggeEventType;

1
stories/District/Layer/Country.tsx
View File

@ -199,6 +199,7 @@ export default class Country extends React.Component {
const Layer = new CountryLayer(scene, {
visible: true,
data: ProvinceData,
geoDataLevel: 1,
joinBy: ['NAME_CHN', 'name'],
// label: {
// field: 'NAME_CHN',

1
stories/District/Layer/drillDown.tsx
View File

@ -31,6 +31,7 @@ export default class Country extends React.Component {
this.scene = scene;
this.drillDown = new DrillDownLayer(scene, {
drillDepth: 2,
geoDataLevel: 2,
fill: {
color: {
field: 'NAME_CHN',