mirror of https://gitee.com/antv-l7/antv-l7
Merge pull request #348 from antvis/District
fix(layer): 数据映射设置成不存在字段时,不能正常渲染
This commit is contained in:
@thinkinggis
GitHub
commit
d86fc2a967
|
|
@ -19,7 +19,7 @@
|
|||
],
|
||||
"rules": {
|
||||
"no-console": [
|
||||
"error",
|
||||
"warn",
|
||||
{
|
||||
"allow": [
|
||||
"warn",
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ module.exports = api => {
|
|||
{
|
||||
extensions: [
|
||||
// 由于使用了 TS 的 resolveJsonModule 选项，JSON 可以直接引入，不需要当作纯文本
|
||||
'.json',
|
||||
// '.json',
|
||||
'.glsl'
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,10 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管
|
|||
|
||||
### 引入 Map
|
||||
|
||||
```javascropt
|
||||
```javascript
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
```
|
||||
|
||||
### 实例化
|
||||
|
|
|
|||
|
|
@ -12,11 +12,10 @@ L7 在内部解决了不同地图底图之间差异，同时 L7 层面统一管
|
|||
|
||||
### 引入 Map
|
||||
|
||||
```javascropt
|
||||
```javascript
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
```
|
||||
|
||||
### 实例化
|
||||
|
|
|
|||
|
|
@ -26,11 +26,3 @@ const scene = new Scene({
|
|||
|
||||
|
||||
离线，无token使用
|
||||
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="worldmap"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
|
|
|||
|
|
@ -24,12 +24,4 @@ const scene = new Scene({
|
|||
```
|
||||
如果你只是需要做个中国地图，世界地图这样填充图，建议你采用这样的模式
|
||||
|
||||
离线，无token使用
|
||||
|
||||
<iframe
|
||||
src="https://codesandbox.io/embed/worldmap-tv6uv?fontsize=14&hidenavigation=1&theme=dark"
|
||||
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
|
||||
title="worldmap"
|
||||
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
|
||||
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
离线，无token使用
|
||||
|
|
@ -70,14 +70,14 @@ const scene = new Scene({
|
|||
|
||||
blank 样式以为无底图样式，这种样式下就不需要使用mapbox服务，也不需要使用mapbox的token了
|
||||
|
||||
<a name="cGfei"></a>
|
||||
|
||||
#### 本地化雪碧图
|
||||
如果你需要使用mapbox字段的图片标注，你需要本地化雪碧图资源<br />只需要下载两个文件即可<br />sprite.json 主要记录每个图表在大图上位置<br />sprite.png 每个小图标组成的大图
|
||||
|
||||
在线雪碧图服务地址:<br />[https://lzxue.github.io/font-glyphs/sprite/sprite](https://lzxue.github.io/font-glyphs/sprite/sprite)
|
||||
|
||||
|
||||
<a name="KWyGs"></a>
|
||||
|
||||
#### 本地化字体
|
||||
如果需要使用mapbox文章标注功能需要本地化，如果你的渲染能力都是用L7实现的，这个过程也是不需要的。
|
||||
|
||||
|
|
@ -94,7 +94,6 @@ _如果你有新的字体需求可提PR，帮你自动生成在线可用的字
|
|||
|
||||
**你也可以使用在线服务**<br />**<br />github服务<br />[https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf](https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf)<br />蚂蚁CDN：<br />[https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf](https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf)
|
||||
|
||||
<a name="oeqps"></a>
|
||||
#### 地图服务本地化
|
||||
1.加载[第三方底图](https://github.com/htoooth/Leaflet.ChineseTmsProviders)，栅格瓦片图层做底图，如天地图，高德，google的栅格瓦片都可以<br />2.下载[opensteetmap ](https://openmaptiles.com/downloads/planet/)矢量瓦片地图做底图<br />3.自己业务数据发布底图服务，或者矢量瓦片服务。
|
||||
|
||||
|
|
|
|||
|
|
@ -70,14 +70,12 @@ const scene = new Scene({
|
|||
|
||||
blank 样式以为无底图样式，这种样式下就不需要使用mapbox服务，也不需要使用mapbox的token了
|
||||
|
||||
<a name="cGfei"></a>
|
||||
#### 本地化雪碧图
|
||||
如果你需要使用mapbox字段的图片标注，你需要本地化雪碧图资源<br />只需要下载两个文件即可<br />sprite.json 主要记录每个图表在大图上位置<br />sprite.png 每个小图标组成的大图
|
||||
|
||||
在线雪碧图服务地址:<br />[https://lzxue.github.io/font-glyphs/sprite/sprite](https://lzxue.github.io/font-glyphs/sprite/sprite)
|
||||
|
||||
|
||||
<a name="KWyGs"></a>
|
||||
#### 本地化字体
|
||||
如果需要使用mapbox文章标注功能需要本地化，如果你的渲染能力都是用L7实现的，这个过程也是不需要的。
|
||||
|
||||
|
|
@ -94,7 +92,6 @@ _如果你有新的字体需求可提PR，帮你自动生成在线可用的字
|
|||
|
||||
**你也可以使用在线服务**<br />**<br />github服务<br />[https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf](https://lzxue.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf)<br />蚂蚁CDN：<br />[https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf](https://gw.alipayobjects.com/os/antvdemo/assets/mapbox/glyphs/{fontstack}/{range}.pbf)
|
||||
|
||||
<a name="oeqps"></a>
|
||||
#### 地图服务本地化
|
||||
1.加载[第三方底图](https://github.com/htoooth/Leaflet.ChineseTmsProviders)，栅格瓦片图层做底图，如天地图，高德，google的栅格瓦片都可以<br />2.下载[opensteetmap ](https://openmaptiles.com/downloads/planet/)矢量瓦片地图做底图<br />3.自己业务数据发布底图服务，或者矢量瓦片服务。
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: API
|
||||
---
|
||||
地图行政区划组件，支持世界地图，中国地图省市县三级，支持中国地图省市县上钻下取。
|
||||
|
||||
## 配置项
|
||||
|
||||
## 方法
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { CountryLayer } from '@antv/l7-district';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
const ProvinceData = [
|
||||
{
|
||||
name: '云南省',
|
||||
code: 530000,
|
||||
value: 17881.12
|
||||
},
|
||||
{
|
||||
name: '黑龙江省',
|
||||
code: 230000,
|
||||
value: 16361.62
|
||||
},
|
||||
{
|
||||
name: '贵州省',
|
||||
code: 520000,
|
||||
value: 14806.45
|
||||
},
|
||||
{
|
||||
name: '北京市',
|
||||
code: 110000,
|
||||
value: 30319.98
|
||||
},
|
||||
{
|
||||
name: '河北省',
|
||||
code: 130000,
|
||||
value: 36010.27
|
||||
},
|
||||
{
|
||||
name: '山西省',
|
||||
code: 140000,
|
||||
value: 16818.11
|
||||
},
|
||||
{
|
||||
name: '吉林省',
|
||||
code: 220000,
|
||||
value: 15074
|
||||
},
|
||||
{
|
||||
name: '宁夏回族自治区',
|
||||
code: 640000,
|
||||
value: 3705.18
|
||||
},
|
||||
{
|
||||
name: '辽宁省',
|
||||
code: 210000,
|
||||
value: 25315.35
|
||||
},
|
||||
{
|
||||
name: '海南省',
|
||||
code: 460000,
|
||||
value: 4832.05
|
||||
},
|
||||
{
|
||||
name: '内蒙古自治区',
|
||||
code: 150000,
|
||||
value: 17289.22
|
||||
},
|
||||
{
|
||||
name: '天津市',
|
||||
code: 120000,
|
||||
value: 18809.64
|
||||
},
|
||||
{
|
||||
name: '新疆维吾尔自治区',
|
||||
code: 650000,
|
||||
value: 12199.08
|
||||
},
|
||||
{
|
||||
name: '上海市',
|
||||
code: 310000,
|
||||
value: 32679.87
|
||||
},
|
||||
{
|
||||
name: '陕西省',
|
||||
code: 610000,
|
||||
value: 24438.32
|
||||
},
|
||||
{
|
||||
name: '甘肃省',
|
||||
code: 620000,
|
||||
value: 8246.07
|
||||
},
|
||||
{
|
||||
name: '安徽省',
|
||||
code: 340000,
|
||||
value: 30006.82
|
||||
},
|
||||
{
|
||||
name: '香港特别行政区',
|
||||
code: 810000,
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '广东省',
|
||||
code: 440000,
|
||||
value: 97277.77
|
||||
},
|
||||
{
|
||||
name: '河南省',
|
||||
code: 410000,
|
||||
value: 48055.86
|
||||
},
|
||||
{
|
||||
name: '湖南省',
|
||||
code: 430000,
|
||||
value: 36425.78
|
||||
},
|
||||
{
|
||||
name: '江西省',
|
||||
code: 360000,
|
||||
value: 21984.78
|
||||
},
|
||||
{
|
||||
name: '四川省',
|
||||
code: 510000,
|
||||
value: 40678.13
|
||||
},
|
||||
{
|
||||
name: '广西壮族自治区',
|
||||
code: 450000,
|
||||
value: 20353.51
|
||||
},
|
||||
{
|
||||
name: '江苏省',
|
||||
code: 320000,
|
||||
value: 92595.4
|
||||
},
|
||||
{
|
||||
name: '澳门特别行政区',
|
||||
code: 820000,
|
||||
value: null
|
||||
},
|
||||
{
|
||||
name: '浙江省',
|
||||
code: 330000,
|
||||
value: 56197.15
|
||||
},
|
||||
{
|
||||
name: '山东省',
|
||||
code: 370000,
|
||||
value: 76469.67
|
||||
},
|
||||
{
|
||||
name: '青海省',
|
||||
code: 630000,
|
||||
value: 2865.23
|
||||
},
|
||||
{
|
||||
name: '重庆市',
|
||||
code: 500000,
|
||||
value: 20363.19
|
||||
},
|
||||
{
|
||||
name: '福建省',
|
||||
code: 350000,
|
||||
value: 35804.04
|
||||
},
|
||||
{
|
||||
name: '湖北省',
|
||||
code: 420000,
|
||||
value: 39366.55
|
||||
},
|
||||
{
|
||||
name: '西藏自治区',
|
||||
code: 540000,
|
||||
value: 1477.63
|
||||
},
|
||||
{
|
||||
name: '台湾省',
|
||||
code: 710000,
|
||||
value: null
|
||||
}
|
||||
];
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [ 116.2825, 39.9 ],
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 3,
|
||||
minZoom: 0,
|
||||
maxZoom: 10
|
||||
})
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
new CountryLayer(scene, {
|
||||
data: ProvinceData,
|
||||
joinBy: [ 'NAME_CHN', 'name' ],
|
||||
// label: {
|
||||
// field: 'NAME_CHN',
|
||||
// textAllowOverlap: true,
|
||||
// },
|
||||
depth: 1,
|
||||
fill: {
|
||||
field: 'value',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
'#fdae6b',
|
||||
'#fd8d3c',
|
||||
'#e6550d',
|
||||
'#a63603'
|
||||
]
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
Html: props => {
|
||||
return `<span>${props.NAME_CHN}:</span><span>${props.value}</span>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { CityLayer } from '@antv/l7-district';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
|
||||
async function initMap() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json'
|
||||
);
|
||||
const provinceData = await response.json();
|
||||
const data = Object.keys(provinceData).map(key => {
|
||||
return {
|
||||
code: key,
|
||||
name: provinceData[key][0],
|
||||
pop: provinceData[key][2] * 1
|
||||
};
|
||||
});
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [ 116.2825, 39.9 ],
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 3,
|
||||
minZoom: 3,
|
||||
maxZoom: 10
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
new CityLayer(scene, {
|
||||
data,
|
||||
joinBy: [ 'adcode', 'code' ],
|
||||
adcode: [ '330000', '330100' ],
|
||||
depth: 3,
|
||||
label: {
|
||||
field: 'NAME_CHN',
|
||||
textAllowOverlap: false
|
||||
},
|
||||
fill: {
|
||||
field: 'pop',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
'#fdae6b',
|
||||
'#fd8d3c',
|
||||
'#e6550d',
|
||||
'#a63603'
|
||||
]
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
Html: props => {
|
||||
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
initMap();
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { CountyLayer } 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: 3,
|
||||
maxZoom: 10
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
new CountyLayer(scene, {
|
||||
data: [],
|
||||
adcode: [ '110101', '110102', '110106' ],
|
||||
depth: 3,
|
||||
label: {
|
||||
field: 'NAME_CHN'
|
||||
},
|
||||
fill: {
|
||||
field: 'NAME_CHN',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
'#fdae6b',
|
||||
'#fd8d3c',
|
||||
'#e6550d',
|
||||
'#a63603'
|
||||
]
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
Html: props => {
|
||||
return `<span>${props.NAME_CHN}</span>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { DrillDownLayer } 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: 3,
|
||||
maxZoom: 10
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
new DrillDownLayer(scene, {
|
||||
data: [],
|
||||
depth: 1,
|
||||
fill: {
|
||||
field: 'NAME_CHN',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
'#fdae6b',
|
||||
'#fd8d3c',
|
||||
'#e6550d',
|
||||
'#a63603'
|
||||
]
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
Html: props => {
|
||||
return `<span>${props.NAME_CHN}</span>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "行政区划",
|
||||
"en": "District"
|
||||
},
|
||||
"demos": [
|
||||
|
||||
{
|
||||
"filename": "china_map.js",
|
||||
"title": "中国地图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*tClNQoAo5isAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "world_map.js",
|
||||
"title": "世界地图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*EtRFRYyGs98AAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "province.js",
|
||||
"title": "中国省级地图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*eVVcRaCBkdYAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "city.js",
|
||||
"title": "中国市地图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*C_y8Tr0V8GIAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "county.js",
|
||||
"title": "中国县地图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*iVwLSpIf_ckAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "drill_down.js",
|
||||
"title": "中国地图上钻下取",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*xjjARqU70xoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { ProvinceLayer } from '@antv/l7-district';
|
||||
import { Mapbox } from '@antv/l7-maps';
|
||||
async function initMap() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json'
|
||||
);
|
||||
const provinceData = await response.json();
|
||||
const data = Object.keys(provinceData).map(key => {
|
||||
return {
|
||||
code: key,
|
||||
name: provinceData[key][0],
|
||||
pop: provinceData[key][2] * 1
|
||||
};
|
||||
});
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [ 116.2825, 39.9 ],
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 3,
|
||||
minZoom: 3,
|
||||
maxZoom: 10
|
||||
})
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
new ProvinceLayer(scene, {
|
||||
data,
|
||||
joinBy: [ 'adcode', 'code' ],
|
||||
adcode: [ '330000' ],
|
||||
depth: 3,
|
||||
label: {
|
||||
field: 'NAME_CHN',
|
||||
textAllowOverlap: false
|
||||
},
|
||||
fill: {
|
||||
field: 'pop',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
'#fdae6b',
|
||||
'#fd8d3c',
|
||||
'#e6550d',
|
||||
'#a63603'
|
||||
]
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
Html: props => {
|
||||
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
initMap();
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { WorldLayer } 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: 0,
|
||||
minZoom: 0,
|
||||
maxZoom: 10
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
new WorldLayer(scene, {
|
||||
data: [],
|
||||
fill: {
|
||||
field: 'NAME_CHN',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
'#fdae6b',
|
||||
'#fd8d3c',
|
||||
'#e6550d',
|
||||
'#a63603'
|
||||
]
|
||||
},
|
||||
stroke: '#ccc',
|
||||
label: {
|
||||
enable: true,
|
||||
textAllowOverlap: false,
|
||||
field: 'Short_Name_ZH'
|
||||
},
|
||||
popup: {
|
||||
enable: false,
|
||||
Html: props => {
|
||||
return `<span>${props.Short_Name_ZH}</span>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: L7 District
|
||||
order: 3
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 基础组件
|
||||
order: 3
|
||||
---
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { CityLayer } from '@antv/l7-district';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
import { Cascader } from 'antd';
|
||||
import * as React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
class City extends React.Component {
|
||||
public state = {
|
||||
options: [],
|
||||
};
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
private cityLayer: CityLayer;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const res = await fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/551e3ca6-6dad-421b-a8b4-b225e47f73ca.json',
|
||||
);
|
||||
const options = await res.json();
|
||||
this.setState({
|
||||
options,
|
||||
});
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json',
|
||||
);
|
||||
const provinceData = await response.json();
|
||||
const data = Object.keys(provinceData).map((key: string) => {
|
||||
return {
|
||||
code: key,
|
||||
name: provinceData[key][0],
|
||||
pop: provinceData[key][2] * 1,
|
||||
};
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [116.2825, 39.9],
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 3,
|
||||
minZoom: 3,
|
||||
maxZoom: 10,
|
||||
}),
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
this.cityLayer = new CityLayer(scene, {
|
||||
data,
|
||||
joinBy: ['adcode', 'code'],
|
||||
adcode: ['330000', '330100'],
|
||||
depth: 3,
|
||||
label: {
|
||||
field: 'NAME_CHN',
|
||||
textAllowOverlap: false,
|
||||
},
|
||||
fill: {
|
||||
field: 'NAME_CHN',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
'#fdae6b',
|
||||
'#fd8d3c',
|
||||
'#e6550d',
|
||||
'#a63603',
|
||||
],
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
Html: (props) => {
|
||||
return `<span>${props.NAME_CHN}:</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<Cascader
|
||||
style={{
|
||||
width: 200,
|
||||
zIndex: 2,
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '10px',
|
||||
}}
|
||||
options={this.state.options}
|
||||
defaultValue={['330000', '330100']}
|
||||
onChange={this.handleProvinceChange}
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
private handleProvinceChange = (value: string[]) => {
|
||||
this.cityLayer.updateDistrict([value[1]]);
|
||||
};
|
||||
}
|
||||
ReactDOM.render(<City />, document.getElementById('map'));
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { CountyLayer } from '@antv/l7-district';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
import { Cascader } from 'antd';
|
||||
import ReactDOM from 'react-dom';
|
||||
import * as React from 'react';
|
||||
export default class County extends React.Component {
|
||||
public state = {
|
||||
options: [],
|
||||
};
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
private countyLayer: CountyLayer;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const res = await fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/04de56cc-5998-4f7e-9ad3-e87e9ac5fd39.json',
|
||||
);
|
||||
const options = await res.json();
|
||||
this.setState({
|
||||
options,
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [116.2825, 39.9],
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 3,
|
||||
minZoom: 3,
|
||||
maxZoom: 10,
|
||||
}),
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
this.countyLayer = new CountyLayer(scene, {
|
||||
data: [],
|
||||
adcode: ['110101'],
|
||||
depth: 3,
|
||||
label: {
|
||||
field: 'NAME_CHN',
|
||||
},
|
||||
fill: {
|
||||
field: 'NAME_CHN',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
'#fdae6b',
|
||||
'#fd8d3c',
|
||||
'#e6550d',
|
||||
'#a63603',
|
||||
],
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
Html: (props) => {
|
||||
return `<span>${props.NAME_CHN}</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<Cascader
|
||||
style={{
|
||||
width: 200,
|
||||
zIndex: 2,
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '10px',
|
||||
}}
|
||||
options={this.state.options}
|
||||
defaultValue={['110000', '110100', '110101']}
|
||||
onChange={this.handleProvinceChange}
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
private handleProvinceChange = (value: string[]) => {
|
||||
this.countyLayer.updateDistrict([value[2]]);
|
||||
};
|
||||
}
|
||||
|
||||
ReactDOM.render(<County />, document.getElementById('map'));
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "行政区划",
|
||||
"en": "District"
|
||||
},
|
||||
"demos": [
|
||||
|
||||
{
|
||||
"filename": "province.tsx",
|
||||
"title": "省级地图切换",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*LZAZSYFf0-MAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "city.tsx",
|
||||
"title": "市级地图切换",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*Q7-tSpvgHjcAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "county.tsx",
|
||||
"title": "县地图切换",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_8e1672/afts/img/A*pBaIQo9D50YAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { ProvinceLayer } from '@antv/l7-district';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Select } from 'antd';
|
||||
import * as React from 'react';
|
||||
const { Option } = Select;
|
||||
|
||||
const ProvinceData = [
|
||||
{
|
||||
NAME_CHN: '云南省',
|
||||
adcode: 530000,
|
||||
value: 17881.12,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '黑龙江省',
|
||||
adcode: 230000,
|
||||
value: 16361.62,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '贵州省',
|
||||
adcode: 520000,
|
||||
value: 14806.45,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '北京市',
|
||||
adcode: 110000,
|
||||
value: 30319.98,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '河北省',
|
||||
adcode: 130000,
|
||||
value: 36010.27,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '山西省',
|
||||
adcode: 140000,
|
||||
value: 16818.11,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '吉林省',
|
||||
adcode: 220000,
|
||||
value: 15074,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '宁夏回族自治区',
|
||||
adcode: 640000,
|
||||
value: 3705.18,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '辽宁省',
|
||||
adcode: 210000,
|
||||
value: 25315.35,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '海南省',
|
||||
adcode: 460000,
|
||||
value: 4832.05,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '内蒙古自治区',
|
||||
adcode: 150000,
|
||||
value: 17289.22,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '天津市',
|
||||
adcode: 120000,
|
||||
value: 18809.64,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '新疆维吾尔自治区',
|
||||
adcode: 650000,
|
||||
value: 12199.08,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '上海市',
|
||||
adcode: 310000,
|
||||
value: 32679.87,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '陕西省',
|
||||
adcode: 610000,
|
||||
value: 24438.32,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '甘肃省',
|
||||
adcode: 620000,
|
||||
value: 8246.07,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '安徽省',
|
||||
adcode: 340000,
|
||||
value: 30006.82,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '香港特别行政区',
|
||||
adcode: 810000,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '广东省',
|
||||
adcode: 440000,
|
||||
value: 97277.77,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '河南省',
|
||||
adcode: 410000,
|
||||
value: 48055.86,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '湖南省',
|
||||
adcode: 430000,
|
||||
value: 36425.78,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '江西省',
|
||||
adcode: 360000,
|
||||
value: 21984.78,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '四川省',
|
||||
adcode: 510000,
|
||||
value: 40678.13,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '广西壮族自治区',
|
||||
adcode: 450000,
|
||||
value: 20353.51,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '江苏省',
|
||||
adcode: 320000,
|
||||
value: 92595.4,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '澳门特别行政区',
|
||||
adcode: 820000,
|
||||
value: null,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '浙江省',
|
||||
adcode: 330000,
|
||||
value: 56197.15,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '山东省',
|
||||
adcode: 370000,
|
||||
value: 76469.67,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '青海省',
|
||||
adcode: 630000,
|
||||
value: 2865.23,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '重庆市',
|
||||
adcode: 500000,
|
||||
value: 20363.19,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '福建省',
|
||||
adcode: 350000,
|
||||
value: 35804.04,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '湖北省',
|
||||
adcode: 420000,
|
||||
value: 39366.55,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '西藏自治区',
|
||||
adcode: 540000,
|
||||
value: 1477.63,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '台湾省',
|
||||
adcode: 710000,
|
||||
value: null,
|
||||
},
|
||||
];
|
||||
class Province extends React.Component {
|
||||
public state = {
|
||||
province: '110000',
|
||||
};
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
private provinceLayer: ProvinceLayer;
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json',
|
||||
);
|
||||
const provinceData = await response.json();
|
||||
const data = Object.keys(provinceData).map((key: string) => {
|
||||
return {
|
||||
code: key,
|
||||
name: provinceData[key][0],
|
||||
pop: provinceData[key][3],
|
||||
};
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
center: [116.2825, 39.9],
|
||||
pitch: 0,
|
||||
style: 'blank',
|
||||
zoom: 3,
|
||||
minZoom: 3,
|
||||
maxZoom: 10,
|
||||
}),
|
||||
});
|
||||
|
||||
scene.on('loaded', () => {
|
||||
const { province } = this.state;
|
||||
this.provinceLayer = new ProvinceLayer(scene, {
|
||||
adcode: ['230000'],
|
||||
depth: 3,
|
||||
label: {
|
||||
field: 'NAME_CHN',
|
||||
textAllowOverlap: false,
|
||||
},
|
||||
fill: {
|
||||
field: 'NAME_CHN',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
'#fdae6b',
|
||||
'#fd8d3c',
|
||||
'#e6550d',
|
||||
'#a63603',
|
||||
],
|
||||
},
|
||||
popup: {
|
||||
enable: true,
|
||||
Html: (props) => {
|
||||
return `<span>${props.NAME_CHN}</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
defaultValue="黑龙江省"
|
||||
style={{
|
||||
width: 120,
|
||||
zIndex: 2,
|
||||
position: 'absolute',
|
||||
right: '10px',
|
||||
top: '10px',
|
||||
}}
|
||||
onChange={this.handleProvinceChange}
|
||||
>
|
||||
{ProvinceData.map((province, i) => {
|
||||
return (
|
||||
<Option key={i} value={province.adcode}>
|
||||
{province.NAME_CHN}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
private handleProvinceChange = (value: string) => {
|
||||
this.setState({
|
||||
province: value,
|
||||
});
|
||||
this.provinceLayer.updateDistrict([value]);
|
||||
};
|
||||
}
|
||||
ReactDOM.render(<Province />, document.getElementById('map'))
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: React
|
||||
order: 3
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: React 组件
|
||||
order: 3
|
||||
---
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
---
|
||||
title: L7 Draw
|
||||
title: Draw Control
|
||||
order: 3
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
---
|
||||
title: 绘制组件
|
||||
title: UI 控件
|
||||
order: 3
|
||||
---
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { DrawCircle } from '@antv/l7-draw';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 113.775374, 28.31067 ],
|
||||
zoom: 12
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
const drawCircle = new DrawCircle(scene);
|
||||
drawCircle.enable();
|
||||
drawCircle.on('draw.create', e => {
|
||||
console.log(e);
|
||||
});
|
||||
drawCircle.on('draw.update', e => {
|
||||
console.log('update', e);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import { DrawPolygon } from '@antv/l7-draw';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
const polygon = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: [
|
||||
[
|
||||
[
|
||||
116.30470275878906,
|
||||
39.88352811449648
|
||||
],
|
||||
[
|
||||
116.32083892822264,
|
||||
39.89380183825623
|
||||
],
|
||||
[
|
||||
116.31637573242188,
|
||||
39.89617247892832
|
||||
],
|
||||
[
|
||||
116.30556106567381,
|
||||
39.89577737784395
|
||||
],
|
||||
[
|
||||
116.30281448364258,
|
||||
39.89709437260048
|
||||
],
|
||||
[
|
||||
116.28822326660156,
|
||||
39.90657598772839
|
||||
],
|
||||
[
|
||||
116.27809524536131,
|
||||
39.901571965464
|
||||
],
|
||||
[
|
||||
116.27843856811523,
|
||||
39.880103197763546
|
||||
],
|
||||
[
|
||||
116.28822326660156,
|
||||
39.87457027859936
|
||||
],
|
||||
[
|
||||
116.29131317138673,
|
||||
39.85928656392012
|
||||
],
|
||||
[
|
||||
116.29371643066405,
|
||||
39.852302354195864
|
||||
],
|
||||
[
|
||||
116.3129425048828,
|
||||
39.853620184014325
|
||||
],
|
||||
[
|
||||
116.3393783569336,
|
||||
39.85414730885731
|
||||
],
|
||||
[
|
||||
116.3448715209961,
|
||||
39.85796884289976
|
||||
],
|
||||
[
|
||||
116.3448715209961,
|
||||
39.87233063679467
|
||||
],
|
||||
[
|
||||
116.3422966003418,
|
||||
39.885240508711654
|
||||
],
|
||||
[
|
||||
116.32564544677734,
|
||||
39.889060310919994
|
||||
],
|
||||
[
|
||||
116.31465911865234,
|
||||
39.88813830918363
|
||||
],
|
||||
[
|
||||
116.30470275878906,
|
||||
39.88352811449648
|
||||
]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [ 116.30470275878906, 39.88352811449648 ],
|
||||
zoom: 12
|
||||
})
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
|
||||
const draw = new DrawPolygon(scene, {
|
||||
data: polygon
|
||||
});
|
||||
draw.on('draw.create', e => {
|
||||
console.log(e);
|
||||
});
|
||||
draw.on('draw.update', e => {
|
||||
console.log('update', e);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"title": {
|
||||
"zh": "绘制组件",
|
||||
"en": "Draw"
|
||||
},
|
||||
"demos": [
|
||||
|
||||
{
|
||||
"filename": "draw_circle.js",
|
||||
"title": "绘制圆",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nMVTRY3xCuoAAAAAAAAAAABkARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "draw_polygon.js",
|
||||
"title": "绘制多边形",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_855bab/afts/img/A*nMVTRY3xCuoAAAAAAAAAAABkARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: L7 Draw
|
||||
order: 3
|
||||
---
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: 绘制组件
|
||||
order: 3
|
||||
---
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { AMapScene, Control, LineLayer } from '@antv/l7-react';
|
||||
import { AMapScene, Control } from '@antv/l7-react';
|
||||
import * as React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
const MapScene = React.memo(function Map() {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
|
||||
require('./site/css/demo.css');
|
||||
require('./packages/component/src/css/l7.css');
|
||||
require('antd/dist/antd.css');
|
||||
window.geotiff = require('geotiff');
|
||||
window.g2 = require('@antv/g2');
|
||||
window.l7 = require('@antv/l7');
|
||||
window.l7Maps = require('@antv/l7-maps');
|
||||
window.l7React = require('@antv/l7-react');
|
||||
window.l7Draw = require('@antv/l7-draw');
|
||||
window.l7District = require('@antv/l7-district');
|
||||
window.react = require('react');
|
||||
window.reactDom = require('react-dom');
|
||||
window.antd = require('antd');
|
||||
|
|
|
|||
|
|
@ -191,11 +191,19 @@ module.exports = {
|
|||
en: 'React Demo'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'district',
|
||||
icon: 'map',
|
||||
title: {
|
||||
zh: '行政区划',
|
||||
en: 'L7 District'
|
||||
}
|
||||
},
|
||||
{
|
||||
slug: 'draw',
|
||||
icon: 'map',
|
||||
title: {
|
||||
zh: '绘制 组件',
|
||||
zh: '绘制组件',
|
||||
en: 'L7 Draw'
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
|
|||
'@antv/l7-source': path.resolve(__dirname, 'packages/source/src'),
|
||||
'@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
|
||||
'@antv/l7-react': path.resolve(__dirname, 'packages/react/src'),
|
||||
'@antv/l7-draw': path.resolve(__dirname, 'packages/draw/src')
|
||||
'@antv/l7-draw': path.resolve(__dirname, 'packages/draw/src'),
|
||||
'@antv/l7-district': path.resolve(__dirname, 'packages/district/src')
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
"@babel/preset-typescript": "^7.3.3",
|
||||
"@commitlint/cli": "^8.1.0",
|
||||
"@commitlint/config-conventional": "^8.1.0",
|
||||
"@rollup/plugin-alias": "^3.1.0",
|
||||
"@rollup/plugin-alias": "2.2.0",
|
||||
"@rollup/plugin-commonjs": "11.0.2",
|
||||
"@rollup/plugin-json": "^4.0.0",
|
||||
"@rollup/plugin-node-resolve": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -468,3 +468,11 @@
|
|||
border-top: 1px solid #D8D8D8;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
.mapboxgl-ctrl-logo {
|
||||
display: none !important;
|
||||
}
|
||||
.amap-logo{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -131,6 +131,7 @@ export interface IStyleAttributeInitializationOptions {
|
|||
scale?: {
|
||||
field: StyleAttributeField;
|
||||
values: unknown[] | string;
|
||||
defaultValues: unknown[] | string;
|
||||
names: string[] | number[];
|
||||
type: StyleScaleType;
|
||||
callback?: (...args: any[]) => [];
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ export default class StyleAttribute implements IStyleAttribute {
|
|||
names: string[];
|
||||
field: string | string[];
|
||||
values: unknown[];
|
||||
defaultValues: unknown[];
|
||||
callback?: (...args: any[]) => [];
|
||||
scalers?: IAttributeScale[];
|
||||
};
|
||||
|
|
@ -76,7 +77,7 @@ export default class StyleAttribute implements IStyleAttribute {
|
|||
private defaultCallback = (params: unknown[]): unknown[] => {
|
||||
// 没有 params 的情况，是指没有指定 fields，直接返回配置的 values 常量
|
||||
if (params.length === 0) {
|
||||
return this.scale?.values || [];
|
||||
return this.scale?.defaultValues || [];
|
||||
}
|
||||
return params.map((param, idx) => {
|
||||
const scaleFunc = this.scale?.scalers![idx].func;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ export default class BaseLayer extends EventEmitter {
|
|||
protected scene: Scene;
|
||||
protected options: IDistrictLayerOption;
|
||||
protected layers: ILayer[] = [];
|
||||
protected fillData: any;
|
||||
private popup: IPopup;
|
||||
|
||||
constructor(scene: Scene, option: Partial<IDistrictLayerOption> = {}) {
|
||||
|
|
@ -48,6 +49,34 @@ export default class BaseLayer extends EventEmitter {
|
|||
public hide() {
|
||||
this.layers.forEach((layer) => layer.hide());
|
||||
}
|
||||
|
||||
public setOption(newOption: { [key: string]: any }) {
|
||||
this.options = merge(this.options, newOption);
|
||||
}
|
||||
|
||||
public updateData(
|
||||
newData: Array<{ [key: string]: any }>,
|
||||
joinByField?: [string, string],
|
||||
) {
|
||||
this.setOption({
|
||||
data: newData,
|
||||
joinBy: joinByField,
|
||||
});
|
||||
const { data = [], joinBy } = this.options;
|
||||
this.fillLayer.setData(this.fillData, {
|
||||
transforms:
|
||||
data.length === 0
|
||||
? []
|
||||
: [
|
||||
{
|
||||
type: 'join',
|
||||
sourceField: joinBy[1], // data1 对应字段名
|
||||
targetField: joinBy[0], // data 对应字段名 绑定到的地理数据
|
||||
data,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
protected async fetchData(data: { url: string; type: string }) {
|
||||
if (data.type === 'pbf') {
|
||||
const buffer = await (await fetch(data.url)).arrayBuffer();
|
||||
|
|
@ -62,6 +91,7 @@ export default class BaseLayer extends EventEmitter {
|
|||
zIndex: 0,
|
||||
depth: 1,
|
||||
adcode: [],
|
||||
joinBy: ['name', 'name'],
|
||||
label: {
|
||||
enable: true,
|
||||
color: '#000',
|
||||
|
|
@ -76,16 +106,20 @@ export default class BaseLayer extends EventEmitter {
|
|||
scale: null,
|
||||
field: null,
|
||||
values: '#fff',
|
||||
style: {
|
||||
opacity: 1.0,
|
||||
},
|
||||
activeColor: 'rgba(0,0,255,0.3)',
|
||||
},
|
||||
autoFit: true,
|
||||
stroke: '#d95f0e',
|
||||
stroke: '#bdbdbd',
|
||||
strokeWidth: 0.6,
|
||||
cityStroke: 'rgba(255,255,255,0.6)',
|
||||
cityStroke: '#636363',
|
||||
cityStrokeWidth: 0.6,
|
||||
countyStrokeWidth: 0.6,
|
||||
provinceStrokeWidth: 0.6,
|
||||
provinceStroke: '#fff',
|
||||
countyStroke: 'rgba(255,255,255,0.6)',
|
||||
provinceStroke: '#f0f0f0',
|
||||
countyStroke: '#525252',
|
||||
coastlineStroke: '#4190da',
|
||||
coastlineWidth: 1,
|
||||
nationalStroke: '#c994c7',
|
||||
|
|
@ -104,7 +138,8 @@ export default class BaseLayer extends EventEmitter {
|
|||
|
||||
protected addFillLayer(fillCountry: any) {
|
||||
// 添加省份填充
|
||||
const { popup, data = [], fill, autoFit } = this.options;
|
||||
const { popup, data = [], fill, autoFit, joinBy } = this.options;
|
||||
this.fillData = fillCountry;
|
||||
const fillLayer = new PolygonLayer({
|
||||
autoFit,
|
||||
}).source(fillCountry, {
|
||||
|
|
@ -114,8 +149,8 @@ export default class BaseLayer extends EventEmitter {
|
|||
: [
|
||||
{
|
||||
type: 'join',
|
||||
sourceField: 'name', // data1 对应字段名
|
||||
targetField: 'name', // data 对应字段名 绑定到的地理数据
|
||||
sourceField: joinBy[1], // data1 对应字段名
|
||||
targetField: joinBy[0], // data 对应字段名 绑定到的地理数据
|
||||
data,
|
||||
},
|
||||
],
|
||||
|
|
@ -133,11 +168,9 @@ export default class BaseLayer extends EventEmitter {
|
|||
fillLayer
|
||||
.shape('fill')
|
||||
.active({
|
||||
color: 'rgba(0,0,255,0.3)',
|
||||
color: fill.activeColor as string,
|
||||
})
|
||||
.style({
|
||||
opacity: 1,
|
||||
});
|
||||
.style(fill.style);
|
||||
this.fillLayer = fillLayer;
|
||||
this.layers.push(fillLayer);
|
||||
this.scene.addLayer(fillLayer);
|
||||
|
|
|
|||
|
|
@ -16,6 +16,12 @@ export default class CountryLayer extends BaseLayer {
|
|||
const { depth } = this.options;
|
||||
this.loadData().then(([fillData, fillLabel]) => {
|
||||
this.addFillLayer(fillData);
|
||||
// const labeldata = fillData.features.map((feature: any) => {
|
||||
// return {
|
||||
// ...feature.properties,
|
||||
// center: [feature.properties.x, feature.properties.y],
|
||||
// };
|
||||
// });
|
||||
if (fillLabel && this.options.label?.enable) {
|
||||
this.addLabelLayer(
|
||||
fillLabel.filter((v: any) => {
|
||||
|
|
@ -33,7 +39,7 @@ export default class CountryLayer extends BaseLayer {
|
|||
this.addCityBorder(countryConfig.cityLine);
|
||||
}
|
||||
if (depth === 3 * 1) {
|
||||
this.addCountryBorder(countryConfig.countryLine);
|
||||
this.addCountyBorder(countryConfig.countryLine);
|
||||
}
|
||||
}
|
||||
// 国界,省界
|
||||
|
|
@ -92,6 +98,8 @@ export default class CountryLayer extends BaseLayer {
|
|||
private async addNationBorder(boundaries: any, boundaries2: any) {
|
||||
const {
|
||||
nationalStroke,
|
||||
provinceStroke,
|
||||
provinceStrokeWidth,
|
||||
nationalWidth,
|
||||
chinaNationalStroke,
|
||||
chinaNationalWidth,
|
||||
|
|
@ -108,7 +116,7 @@ export default class CountryLayer extends BaseLayer {
|
|||
.source(boundaries)
|
||||
.size('type', (v: string) => {
|
||||
if (v === '3') {
|
||||
return strokeWidth;
|
||||
return provinceStrokeWidth;
|
||||
} else if (v === '2') {
|
||||
return coastlineWidth;
|
||||
} else if (v === '0') {
|
||||
|
|
@ -120,7 +128,7 @@ export default class CountryLayer extends BaseLayer {
|
|||
.shape('line')
|
||||
.color('type', (v: string) => {
|
||||
if (v === '3') {
|
||||
return stroke;
|
||||
return provinceStroke;
|
||||
} else if (v === '2') {
|
||||
return coastlineStroke;
|
||||
} else if (v === '0') {
|
||||
|
|
@ -146,7 +154,7 @@ export default class CountryLayer extends BaseLayer {
|
|||
this.scene.addLayer(lineLayer2);
|
||||
this.layers.push(lineLayer, lineLayer2);
|
||||
}
|
||||
// 省级边界
|
||||
// 市边界
|
||||
private async addCityBorder(cfg: any) {
|
||||
const border1 = await this.fetchData(cfg);
|
||||
const { cityStroke, cityStrokeWidth } = this.options;
|
||||
|
|
@ -164,7 +172,7 @@ export default class CountryLayer extends BaseLayer {
|
|||
}
|
||||
|
||||
// 县级边界
|
||||
private async addCountryBorder(cfg: any) {
|
||||
private async addCountyBorder(cfg: any) {
|
||||
const border1 = await this.fetchData(cfg);
|
||||
const { countyStrokeWidth, countyStroke } = this.options;
|
||||
const cityline = new LineLayer({
|
||||
|
|
@ -196,7 +204,7 @@ export default class CountryLayer extends BaseLayer {
|
|||
this.scene.addLayer(labelLayer);
|
||||
this.scene.addLayer(labelLayer1);
|
||||
this.scene.addLayer(labelLayer2);
|
||||
this.layers.push(labelLayer, labelLayer1);
|
||||
this.layers.push(labelLayer, labelLayer1, labelLayer2);
|
||||
}
|
||||
|
||||
private addText(labelData: any, option: any, offset: [number, number]) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Scene } from '@antv/l7';
|
||||
import CityLayer from './city';
|
||||
import CountryLayer from './country';
|
||||
import { IDistrictLayerOption } from './interface';
|
||||
import { adcodeType, IDistrictLayerOption } from './interface';
|
||||
import ProvinceLayer from './province';
|
||||
|
||||
export default class DrillDownLayer {
|
||||
|
|
@ -9,6 +9,7 @@ export default class DrillDownLayer {
|
|||
private cityLayer: CityLayer;
|
||||
private countryLayer: CountryLayer;
|
||||
private scene: Scene;
|
||||
private drillState: 'province' | 'city' | 'county' = 'province';
|
||||
constructor(scene: Scene, option: Partial<IDistrictLayerOption>) {
|
||||
const cfg = this.getDefaultOption();
|
||||
this.scene = scene;
|
||||
|
|
@ -41,32 +42,33 @@ export default class DrillDownLayer {
|
|||
this.countryLayer.fillLayer.on('click', (e: any) => {
|
||||
this.countryLayer.hide();
|
||||
// 更新市级行政区划
|
||||
this.provinceLayer.updateDistrict([e.feature.properties.adcode]);
|
||||
// this.provinceLayer.updateDistrict([e.feature.properties.adcode]);
|
||||
// this.drillState = 'city';
|
||||
this.drillDown(e.feature.properties.adcode);
|
||||
});
|
||||
}
|
||||
|
||||
public addProvinceEvent() {
|
||||
this.provinceLayer.fillLayer.on('undblclick', () => {
|
||||
this.countryLayer.show();
|
||||
this.countryLayer.fillLayer.fitBounds();
|
||||
this.provinceLayer.hide();
|
||||
this.drillUp();
|
||||
});
|
||||
this.provinceLayer.fillLayer.on('click', (e: any) => {
|
||||
this.provinceLayer.hide();
|
||||
let adcode = e.feature.properties.adcode.toFixed(0);
|
||||
if (adcode.substr(2, 2) === '00') {
|
||||
adcode = adcode.substr(0, 2) + '0100';
|
||||
}
|
||||
// 更新县级行政区划
|
||||
this.cityLayer.updateDistrict([adcode]);
|
||||
// this.provinceLayer.hide();
|
||||
// const adcode = e.feature.properties.adcode.toFixed(0);
|
||||
this.drillDown(e.feature.properties.adcode);
|
||||
// if (adcode.substr(2, 2) === '00') {
|
||||
// adcode = adcode.substr(0, 2) + '0100';
|
||||
// }
|
||||
// // 更新县级行政区划
|
||||
// this.cityLayer.updateDistrict([adcode]);
|
||||
// this.drillState = 'county';
|
||||
// this.showCityView(adcode);
|
||||
});
|
||||
}
|
||||
|
||||
public addCityEvent() {
|
||||
this.cityLayer.fillLayer.on('undblclick', () => {
|
||||
this.provinceLayer.show();
|
||||
this.provinceLayer.fillLayer.fitBounds();
|
||||
this.cityLayer.hide();
|
||||
this.drillUp();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -75,4 +77,66 @@ export default class DrillDownLayer {
|
|||
this.provinceLayer.destroy();
|
||||
this.cityLayer.destroy();
|
||||
}
|
||||
|
||||
public showProvinceView(
|
||||
adcode: adcodeType,
|
||||
newData: Array<{ [key: string]: any }> = [],
|
||||
joinByField?: [string, string],
|
||||
) {
|
||||
this.provinceLayer.show();
|
||||
this.provinceLayer.updateDistrict(adcode, newData, joinByField);
|
||||
this.provinceLayer.fillLayer.fitBounds();
|
||||
this.cityLayer.hide();
|
||||
this.drillState = 'city';
|
||||
}
|
||||
public showCityView(
|
||||
code: adcodeType,
|
||||
newData: Array<{ [key: string]: any }> = [],
|
||||
joinByField?: [string, string],
|
||||
) {
|
||||
this.cityLayer.show();
|
||||
let adcode = `${code}`;
|
||||
if (adcode.substr(2, 2) === '00') {
|
||||
adcode = adcode.substr(0, 2) + '0100';
|
||||
}
|
||||
// 更新县级行政区划
|
||||
this.cityLayer.updateDistrict(adcode, newData, joinByField);
|
||||
this.cityLayer.fillLayer.fitBounds();
|
||||
this.provinceLayer.hide();
|
||||
this.drillState = 'county';
|
||||
}
|
||||
|
||||
/**
|
||||
* 向上
|
||||
*/
|
||||
public drillUp() {
|
||||
switch (this.drillState) {
|
||||
case 'county':
|
||||
this.provinceLayer.show();
|
||||
this.provinceLayer.fillLayer.fitBounds();
|
||||
this.cityLayer.hide();
|
||||
this.drillState = 'city';
|
||||
break;
|
||||
case 'city':
|
||||
this.countryLayer.show();
|
||||
this.countryLayer.fillLayer.fitBounds();
|
||||
this.provinceLayer.hide();
|
||||
this.drillState = 'province';
|
||||
break;
|
||||
}
|
||||
}
|
||||
public drillDown(
|
||||
adcode: adcodeType,
|
||||
newData: Array<{ [key: string]: any }> = [],
|
||||
joinByField?: [string, string],
|
||||
) {
|
||||
switch (this.drillState) {
|
||||
case 'province':
|
||||
this.showProvinceView(adcode);
|
||||
break;
|
||||
case 'city':
|
||||
this.showCityView(adcode);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export type adcodeType = string[] | string | number | number[];
|
|||
export interface IDistrictLayerOption {
|
||||
zIndex: number;
|
||||
data?: Array<{ [key: string]: any }>;
|
||||
joinBy: [string, string];
|
||||
adcode: adcodeType;
|
||||
depth: 0 | 1 | 2 | 3;
|
||||
label: Partial<ILabelOption>;
|
||||
|
|
@ -20,6 +21,8 @@ export interface IDistrictLayerOption {
|
|||
scale: ScaleTypeName | null;
|
||||
field: string | null;
|
||||
values: StyleAttributeOption;
|
||||
style: any;
|
||||
activeColor: string;
|
||||
}>;
|
||||
autoFit: boolean;
|
||||
stroke: string;
|
||||
|
|
|
|||
|
|
@ -16,35 +16,35 @@ export interface IProvinceLayerOption extends IDistrictLayerOption {
|
|||
adcode: adcodeType;
|
||||
}
|
||||
export default class ProvinceLayer extends BaseLayer {
|
||||
private fillData: any;
|
||||
private lineData: any;
|
||||
private labelData: any;
|
||||
private fillRawData: any;
|
||||
private lineRawData: any;
|
||||
private labelRawData: any;
|
||||
constructor(scene: Scene, option: Partial<IProvinceLayerOption> = {}) {
|
||||
super(scene, option);
|
||||
this.addProvinceFillLayer();
|
||||
this.addProvinceLineLayer();
|
||||
}
|
||||
// 通过adcode 更新
|
||||
public updateDistrict(adcode: adcodeType) {
|
||||
public updateDistrict(
|
||||
adcode: adcodeType,
|
||||
newData: Array<{ [key: string]: any }> = [],
|
||||
joinByField?: [string, string],
|
||||
) {
|
||||
if (!adcode && Array.isArray(adcode) && adcode.length === 0) {
|
||||
this.hide();
|
||||
return;
|
||||
}
|
||||
const fillData = this.filterData(this.fillData, adcode);
|
||||
const lineData = this.filterData(this.lineData, adcode);
|
||||
const labelData = this.filterLabelData(this.labelData, adcode);
|
||||
this.fillLayer.setData(fillData);
|
||||
this.setOption({ adcode });
|
||||
const fillData = this.filterData(this.fillRawData, adcode);
|
||||
const lineData = this.filterData(this.lineRawData, adcode);
|
||||
const labelData = this.filterLabelData(this.labelRawData, adcode);
|
||||
this.fillData = fillData;
|
||||
this.updateData(newData, joinByField);
|
||||
this.lineLayer.setData(lineData);
|
||||
this.labelLayer.setData(labelData);
|
||||
this.show();
|
||||
}
|
||||
|
||||
// 更新渲染数据
|
||||
|
||||
public updateData() {
|
||||
return 'update data';
|
||||
}
|
||||
|
||||
protected getDefaultOption(): IProvinceLayerOption {
|
||||
const config = super.getDefaultOption();
|
||||
return merge({}, config, {
|
||||
|
|
@ -102,15 +102,15 @@ export default class ProvinceLayer extends BaseLayer {
|
|||
const countryConfig = DataConfig.country.CHN[depth];
|
||||
const fillData = await this.fetchData(countryConfig.fill);
|
||||
|
||||
this.labelData = fillData.features.map((feature: any) => {
|
||||
this.labelRawData = fillData.features.map((feature: any) => {
|
||||
return {
|
||||
...feature.properties,
|
||||
center: [feature.properties.x, feature.properties.y],
|
||||
};
|
||||
});
|
||||
const data = this.filterData(fillData, adcode);
|
||||
const labelData = this.filterLabelData(this.labelData, adcode);
|
||||
this.fillData = fillData;
|
||||
const labelData = this.filterLabelData(this.labelRawData, adcode);
|
||||
this.fillRawData = fillData;
|
||||
this.addFillLayer(data);
|
||||
this.addLabelLayer(labelData);
|
||||
}
|
||||
|
|
@ -120,7 +120,7 @@ export default class ProvinceLayer extends BaseLayer {
|
|||
const countryConfig = DataConfig.country.CHN[depth];
|
||||
const fillData = await this.fetchData(countryConfig.line);
|
||||
const data = this.filterData(fillData, adcode);
|
||||
this.lineData = fillData;
|
||||
this.lineRawData = fillData;
|
||||
this.addFillLine(data);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,18 @@ export default class WorldLayer extends BaseLayer {
|
|||
zIndex: zIndex + 1,
|
||||
})
|
||||
.source(boundaries)
|
||||
.size(0.6)
|
||||
// .size(0.6)
|
||||
.size('type', (v: string) => {
|
||||
if (v === '0') {
|
||||
return chinaNationalWidth; // 中国国界线
|
||||
} else if (v === '2' || v === '9') {
|
||||
return coastlineWidth; // 中国海岸线
|
||||
} else if (v === '7') {
|
||||
return nationalWidth; // 国外国界
|
||||
} else {
|
||||
return nationalWidth;
|
||||
}
|
||||
})
|
||||
.color('type', (v: string) => {
|
||||
if (v === '0') {
|
||||
return chinaNationalStroke; // 中国国界线
|
||||
|
|
|
|||
|
|
@ -184,10 +184,11 @@ export default abstract class DrawFeature extends DrawMode {
|
|||
}
|
||||
this.selectMode.setSelectedFeature(this.currentFeature as Feature);
|
||||
this.selectMode.enable();
|
||||
this.drawLayer.enableSelect();
|
||||
this.drawLayer.updateData(
|
||||
// TODO:导入数据不能正常使用
|
||||
featureCollection([this.currentFeature as Feature]),
|
||||
);
|
||||
this.drawLayer.enableSelect();
|
||||
this.drawVertexLayer.updateData(
|
||||
featureCollection(this.currentFeature?.properties?.pointFeatures),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -40,6 +40,9 @@ export default class BaseRenderLayer {
|
|||
}
|
||||
|
||||
public updateData(data: any) {
|
||||
if (this.drawLayers.length === 0) {
|
||||
this.update(data);
|
||||
}
|
||||
this.drawLayers.forEach((layer) => layer.setData(data));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@
|
|||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
|
||||
<script src="../dist/l7.js"></script>
|
||||
|
||||
<script src="../dist/l7.js"></script>
|
||||
<script>
|
||||
console.log(L7);
|
||||
const scene = new L7.Scene({
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<!-- <script src="https://cdn.jsdelivr.net/npm/symbol-es6@0.1.2/symbol-es6.min.js"></script> -->
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
|
||||
|
||||
<script src="../dist/l7.js"></script>
|
||||
<script src="../dist/l7-dev.js"></script>
|
||||
<script>
|
||||
console.log(L7);
|
||||
const scene = new L7.Scene({
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
|
|||
scale.scale.domain(tick);
|
||||
}
|
||||
}
|
||||
scale.scale.range(attributeScale.values);
|
||||
scale.scale.range(attributeScale.values); // 判断常量, 默认值
|
||||
} else if (scale.option?.type === 'cat') {
|
||||
// 如果没有设置初值且 类型为cat，range ==domain;
|
||||
|
||||
|
|
@ -144,7 +144,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
|
|||
} else {
|
||||
// 设置attribute 常量值 常量直接在value取值
|
||||
attributeScale.type = StyleScaleType.CONSTANT;
|
||||
attributeScale.values = scales.map((scale, index) => {
|
||||
attributeScale.defaultValues = scales.map((scale, index) => {
|
||||
return scale.scale(attributeScale.names[index]);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { Map } from 'mapbox-gl';
|
||||
import { IMapboxInstance } from '../../typings/index';
|
||||
import BaseMapWrapper from '../BaseMapWrapper';
|
||||
import './logo.css';
|
||||
import MapboxService from './map';
|
||||
|
||||
export default class MapboxWrapper extends BaseMapWrapper<
|
||||
Map & IMapboxInstance
|
||||
> {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ import mapboxgl, { IControl, Map } from 'mapbox-gl';
|
|||
// tslint:disable-next-line:no-submodule-imports
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import { IMapboxInstance } from '../../typings/index';
|
||||
import './logo.css';
|
||||
import Viewport from './Viewport';
|
||||
const EventMap: {
|
||||
[key: string]: any;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,5 @@ export function join(geoData: IParserData, options: IJoinOption) {
|
|||
...item,
|
||||
};
|
||||
});
|
||||
|
||||
return geoData;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,12 +23,189 @@ export default class Country extends React.Component {
|
|||
maxZoom: 10,
|
||||
}),
|
||||
});
|
||||
const ProvinceData = [
|
||||
{
|
||||
name: '云南省',
|
||||
code: 530000,
|
||||
value: 17881.12,
|
||||
},
|
||||
{
|
||||
name: '黑龙江省',
|
||||
code: 230000,
|
||||
value: 16361.62,
|
||||
},
|
||||
{
|
||||
name: '贵州省',
|
||||
code: 520000,
|
||||
value: 14806.45,
|
||||
},
|
||||
{
|
||||
name: '北京市',
|
||||
code: 110000,
|
||||
value: 30319.98,
|
||||
},
|
||||
{
|
||||
name: '河北省',
|
||||
code: 130000,
|
||||
value: 36010.27,
|
||||
},
|
||||
{
|
||||
name: '山西省',
|
||||
code: 140000,
|
||||
value: 16818.11,
|
||||
},
|
||||
{
|
||||
name: '吉林省',
|
||||
code: 220000,
|
||||
value: 15074,
|
||||
},
|
||||
{
|
||||
name: '宁夏回族自治区',
|
||||
code: 640000,
|
||||
value: 3705.18,
|
||||
},
|
||||
{
|
||||
name: '辽宁省',
|
||||
code: 210000,
|
||||
value: 25315.35,
|
||||
},
|
||||
{
|
||||
name: '海南省',
|
||||
code: 460000,
|
||||
value: 4832.05,
|
||||
},
|
||||
{
|
||||
name: '内蒙古自治区',
|
||||
code: 150000,
|
||||
value: 17289.22,
|
||||
},
|
||||
{
|
||||
name: '天津市',
|
||||
code: 120000,
|
||||
value: 18809.64,
|
||||
},
|
||||
{
|
||||
name: '新疆维吾尔自治区',
|
||||
code: 650000,
|
||||
value: 12199.08,
|
||||
},
|
||||
{
|
||||
name: '上海市',
|
||||
code: 310000,
|
||||
value: 32679.87,
|
||||
},
|
||||
{
|
||||
name: '陕西省',
|
||||
code: 610000,
|
||||
value: 24438.32,
|
||||
},
|
||||
{
|
||||
name: '甘肃省',
|
||||
code: 620000,
|
||||
value: 8246.07,
|
||||
},
|
||||
{
|
||||
name: '安徽省',
|
||||
code: 340000,
|
||||
value: 30006.82,
|
||||
},
|
||||
{
|
||||
name: '香港特别行政区',
|
||||
code: 810000,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: '广东省',
|
||||
code: 440000,
|
||||
value: 97277.77,
|
||||
},
|
||||
{
|
||||
name: '河南省',
|
||||
code: 410000,
|
||||
value: 48055.86,
|
||||
},
|
||||
{
|
||||
name: '湖南省',
|
||||
code: 430000,
|
||||
value: 36425.78,
|
||||
},
|
||||
{
|
||||
name: '江西省',
|
||||
code: 360000,
|
||||
value: 21984.78,
|
||||
},
|
||||
{
|
||||
name: '四川省',
|
||||
code: 510000,
|
||||
value: 40678.13,
|
||||
},
|
||||
{
|
||||
name: '广西壮族自治区',
|
||||
code: 450000,
|
||||
value: 20353.51,
|
||||
},
|
||||
{
|
||||
name: '江苏省',
|
||||
code: 320000,
|
||||
value: 92595.4,
|
||||
},
|
||||
{
|
||||
name: '澳门特别行政区',
|
||||
code: 820000,
|
||||
value: null,
|
||||
},
|
||||
{
|
||||
name: '浙江省',
|
||||
code: 330000,
|
||||
value: 56197.15,
|
||||
},
|
||||
{
|
||||
name: '山东省',
|
||||
code: 370000,
|
||||
value: 76469.67,
|
||||
},
|
||||
{
|
||||
name: '青海省',
|
||||
code: 630000,
|
||||
value: 2865.23,
|
||||
},
|
||||
{
|
||||
name: '重庆市',
|
||||
code: 500000,
|
||||
value: 20363.19,
|
||||
},
|
||||
{
|
||||
name: '福建省',
|
||||
code: 350000,
|
||||
value: 35804.04,
|
||||
},
|
||||
{
|
||||
name: '湖北省',
|
||||
code: 420000,
|
||||
value: 39366.55,
|
||||
},
|
||||
{
|
||||
name: '西藏自治区',
|
||||
code: 540000,
|
||||
value: 1477.63,
|
||||
},
|
||||
{
|
||||
name: '台湾省',
|
||||
code: 710000,
|
||||
value: null,
|
||||
},
|
||||
];
|
||||
scene.on('loaded', () => {
|
||||
const Layer = new CountryLayer(scene, {
|
||||
data: [],
|
||||
data: ProvinceData,
|
||||
joinBy: ['NAME_CHN', 'name'],
|
||||
// label: {
|
||||
// field: 'NAME_CHN',
|
||||
// textAllowOverlap: true,
|
||||
// },
|
||||
depth: 1,
|
||||
fill: {
|
||||
field: 'NAME_CHN',
|
||||
field: 'value',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
|
|
@ -41,7 +218,7 @@ export default class Country extends React.Component {
|
|||
popup: {
|
||||
enable: true,
|
||||
Html: (props) => {
|
||||
return `<span>${props.NAME_CHN}</span>`;
|
||||
return `<span>${props.NAME_CHN}:</span><span>${props.value}</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -24,6 +24,17 @@ export default class Country extends React.Component {
|
|||
this.setState({
|
||||
options,
|
||||
});
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json',
|
||||
);
|
||||
const provinceData = await response.json();
|
||||
const data = Object.keys(provinceData).map((key: string) => {
|
||||
return {
|
||||
code: parseInt(key),
|
||||
name: provinceData[key][0],
|
||||
pop: provinceData[key][2] * 1,
|
||||
};
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
|
|
@ -37,15 +48,16 @@ export default class Country extends React.Component {
|
|||
});
|
||||
scene.on('loaded', () => {
|
||||
this.cityLayer = new CityLayer(scene, {
|
||||
data: [],
|
||||
adcode: ['110100'],
|
||||
data,
|
||||
joinBy: ['adcode', 'code'],
|
||||
adcode: ['330000', '330100'],
|
||||
depth: 3,
|
||||
label: {
|
||||
field: 'NAME_CHN',
|
||||
textAllowOverlap: false,
|
||||
},
|
||||
fill: {
|
||||
field: 'NAME_CHN',
|
||||
field: 'pop',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
|
|
@ -58,7 +70,7 @@ export default class Country extends React.Component {
|
|||
popup: {
|
||||
enable: true,
|
||||
Html: (props) => {
|
||||
return `<span>${props.NAME_CHN}</span>`;
|
||||
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -78,7 +90,7 @@ export default class Country extends React.Component {
|
|||
top: '10px',
|
||||
}}
|
||||
options={this.state.options}
|
||||
defaultValue={['110000', '110100']}
|
||||
defaultValue={['330000', '330100']}
|
||||
onChange={this.handleProvinceChange}
|
||||
placeholder="Please select"
|
||||
/>
|
||||
|
|
@ -97,5 +109,6 @@ export default class Country extends React.Component {
|
|||
}
|
||||
private handleProvinceChange = (value: string[]) => {
|
||||
this.cityLayer.updateDistrict([value[1]]);
|
||||
console.log(this.cityLayer.fillLayer);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,142 +5,177 @@ import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
|||
import { Select } from 'antd';
|
||||
import * as React from 'react';
|
||||
const { Option } = Select;
|
||||
|
||||
const ProvinceData = [
|
||||
{
|
||||
NAME_CHN: '云南省',
|
||||
adcode: 530000,
|
||||
value: 17881.12,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '黑龙江省',
|
||||
adcode: 230000,
|
||||
value: 16361.62,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '贵州省',
|
||||
adcode: 520000,
|
||||
value: 14806.45,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '北京市',
|
||||
adcode: 110000,
|
||||
value: 30319.98,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '河北省',
|
||||
adcode: 130000,
|
||||
value: 36010.27,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '山西省',
|
||||
adcode: 140000,
|
||||
value: 16818.11,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '吉林省',
|
||||
adcode: 220000,
|
||||
value: 15074,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '宁夏回族自治区',
|
||||
adcode: 640000,
|
||||
value: 3705.18,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '辽宁省',
|
||||
adcode: 210000,
|
||||
value: 25315.35,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '海南省',
|
||||
adcode: 460000,
|
||||
value: 4832.05,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '内蒙古自治区',
|
||||
adcode: 150000,
|
||||
value: 17289.22,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '天津市',
|
||||
adcode: 120000,
|
||||
value: 18809.64,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '新疆维吾尔自治区',
|
||||
adcode: 650000,
|
||||
value: 12199.08,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '上海市',
|
||||
adcode: 310000,
|
||||
value: 32679.87,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '陕西省',
|
||||
adcode: 610000,
|
||||
value: 24438.32,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '甘肃省',
|
||||
adcode: 620000,
|
||||
value: 8246.07,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '安徽省',
|
||||
adcode: 340000,
|
||||
value: 30006.82,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '香港特别行政区',
|
||||
adcode: 810000,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '广东省',
|
||||
adcode: 440000,
|
||||
value: 97277.77,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '河南省',
|
||||
adcode: 410000,
|
||||
value: 48055.86,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '湖南省',
|
||||
adcode: 430000,
|
||||
value: 36425.78,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '江西省',
|
||||
adcode: 360000,
|
||||
value: 21984.78,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '四川省',
|
||||
adcode: 510000,
|
||||
value: 40678.13,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '广西壮族自治区',
|
||||
adcode: 450000,
|
||||
value: 20353.51,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '江苏省',
|
||||
adcode: 320000,
|
||||
value: 92595.4,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '澳门特别行政区',
|
||||
adcode: 820000,
|
||||
value: null,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '浙江省',
|
||||
adcode: 330000,
|
||||
value: 56197.15,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '山东省',
|
||||
adcode: 370000,
|
||||
value: 76469.67,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '青海省',
|
||||
adcode: 630000,
|
||||
value: 2865.23,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '重庆市',
|
||||
adcode: 500000,
|
||||
value: 20363.19,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '福建省',
|
||||
adcode: 350000,
|
||||
value: 35804.04,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '湖北省',
|
||||
adcode: 420000,
|
||||
value: 39366.55,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '西藏自治区',
|
||||
adcode: 540000,
|
||||
value: 1477.63,
|
||||
},
|
||||
{
|
||||
NAME_CHN: '台湾省',
|
||||
adcode: 710000,
|
||||
value: null,
|
||||
},
|
||||
];
|
||||
export default class Country extends React.Component {
|
||||
|
|
@ -155,6 +190,17 @@ export default class Country extends React.Component {
|
|||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/149b599d-21ef-4c24-812c-20deaee90e20.json',
|
||||
);
|
||||
const provinceData = await response.json();
|
||||
const data = Object.keys(provinceData).map((key: string) => {
|
||||
return {
|
||||
code: key,
|
||||
name: provinceData[key][0],
|
||||
pop: provinceData[key][3],
|
||||
};
|
||||
});
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new Mapbox({
|
||||
|
|
@ -170,15 +216,16 @@ export default class Country extends React.Component {
|
|||
scene.on('loaded', () => {
|
||||
const { province } = this.state;
|
||||
this.provinceLayer = new ProvinceLayer(scene, {
|
||||
data: [],
|
||||
adcode: [],
|
||||
data,
|
||||
joinBy: ['adcode', 'code'],
|
||||
adcode: ['330000'],
|
||||
depth: 3,
|
||||
label: {
|
||||
field: 'NAME_CHN',
|
||||
textAllowOverlap: false,
|
||||
},
|
||||
fill: {
|
||||
field: 'NAME_CHN',
|
||||
field: 'pop',
|
||||
values: [
|
||||
'#feedde',
|
||||
'#fdd0a2',
|
||||
|
|
@ -191,7 +238,7 @@ export default class Country extends React.Component {
|
|||
popup: {
|
||||
enable: true,
|
||||
Html: (props) => {
|
||||
return `<span>${props.NAME_CHN}</span>`;
|
||||
return `<span>${props.NAME_CHN}:</span><span>${props.pop}</span>`;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default class Country extends React.Component {
|
|||
},
|
||||
stroke: '#ccc',
|
||||
label: {
|
||||
enable: false,
|
||||
enable: true,
|
||||
textAllowOverlap: false,
|
||||
field: 'Short_Name_ZH',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
|
||||
import { Scene } from '@antv/l7';
|
||||
import { DrawPolygon } from '@antv/l7-draw';
|
||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||
|
||||
|
|
@ -16,8 +16,8 @@ export default class Circle extends React.Component {
|
|||
map: new Mapbox({
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [113.775374, 28.31067],
|
||||
zoom: 12,
|
||||
center: [44.29687499999999, 55.3791104480105],
|
||||
zoom: 3,
|
||||
}),
|
||||
});
|
||||
this.scene = scene;
|
||||
|
|
@ -49,7 +49,7 @@ export default class Circle extends React.Component {
|
|||
],
|
||||
},
|
||||
});
|
||||
drawPolygon.enable();
|
||||
// drawPolygon.enable();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,6 @@ export default class Point3D extends React.Component {
|
|||
setTimeout(() => {
|
||||
pointLayer.size([20, 100]);
|
||||
scene.render();
|
||||
console.log('update size');
|
||||
}, 2000);
|
||||
scene.render();
|
||||
this.scene = scene;
|
||||
|
|
|
|||
|
|
@ -2990,10 +2990,10 @@
|
|||
prop-types "^15.6.1"
|
||||
react-lifecycles-compat "^3.0.4"
|
||||
|
||||
"@rollup/plugin-alias@^3.1.0":
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-3.1.0.tgz#4f7bc9d15e030d75da9224aaa5105129c54a3ffd"
|
||||
integrity sha512-IzoejtAqdfwAvx4D0bztAJFoL5Js36kJgnbO00zfI1B9jf9G80vWysyG0C4+E6w5uG5hz0EeetPpoBWKdNktCQ==
|
||||
"@rollup/plugin-alias@2.2.0":
|
||||
version "2.2.0"
|
||||
resolved "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-2.2.0.tgz#3ac52ece8b39583249884adb90fb316484389fe5"
|
||||
integrity sha512-//6zmlHGbmousaatu4pBlC61gqZykLbH0c2GESBO4JgK5xFZgb/ih0zlg/5/BmTAczX5R/xsHRnsYsu4KyHV5w==
|
||||
dependencies:
|
||||
slash "^3.0.0"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue