初步完成
This commit is contained in:
parent
9064a35a94
commit
e1473590d6
@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
|
||||
import styles from './Guide.less';
|
||||
import { getDashboardData, getAdStatisticsData } from '../../api';
|
||||
|
||||
import { GaodeMap ,Scene } from '@antv/l7';
|
||||
import { GaodeMap, Scene } from '@antv/l7';
|
||||
import { Choropleth } from '@antv/l7plot';
|
||||
import areaList from '../../assets/localData/area-list.json'
|
||||
|
||||
@ -29,13 +29,20 @@ const Guide: React.FC<Props> = (props) => {
|
||||
// pitch: 20,
|
||||
doubleClickZoom: false,
|
||||
style: 'light',
|
||||
center: [ 110, 34 ],
|
||||
center: [110, 34],
|
||||
zoom: 3,
|
||||
})
|
||||
})
|
||||
scene.setMapStatus({
|
||||
dragEnable: false, // 是否允许地图拖拽
|
||||
keyboardEnable: false, // 是否允许形键盘事件
|
||||
doubleClickZoom: false, // 双击放大
|
||||
zoomEnable: false, // 滚动缩放
|
||||
rotateEnable: false // 旋转
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
setScene(scene);
|
||||
})
|
||||
})
|
||||
|
||||
//大盘统计数据
|
||||
getDashboardData().then((e) => {
|
||||
@ -45,7 +52,7 @@ const Guide: React.FC<Props> = (props) => {
|
||||
data.createPointCount && setCreatePointCount(data.createPointCount);
|
||||
let layerList: Array<any> = [{
|
||||
value: '001',
|
||||
label: '999',
|
||||
label: '999',
|
||||
}];
|
||||
if (data.layerList && data.layerList.length > 0) {
|
||||
let selectList = data.layerList.map((item: any) => {
|
||||
@ -61,13 +68,24 @@ const Guide: React.FC<Props> = (props) => {
|
||||
}, []);
|
||||
let showAdStatisticsData = (layerId: string) => {
|
||||
if (layerId) {
|
||||
getAdStatisticsData({adLevel: 0, adcode: 100000, layerId: layerId}).then((e) => {
|
||||
// const data = areaList
|
||||
getAdStatisticsData({ adLevel: 0, adcode: 100000, layerId: layerId }).then((e) => {
|
||||
// 模拟数据
|
||||
const data = areaList.filter(({ level }) => level === 'province')
|
||||
.map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
|
||||
const cityData = areaList
|
||||
.filter(({ level }) => level === 'city')
|
||||
.map((item) => Object.assign({}, item, { value: Math.random() * 2000 }));
|
||||
|
||||
const districtData = areaList
|
||||
.filter(({ level }) => level === 'district')
|
||||
.map((item) => Object.assign({}, item, { value: Math.random() * 1000 }));
|
||||
// // .filter(({ level, parent }) => level === 'city' && parent === 330000)
|
||||
// .map((item) => ({ ...item, value: Math.random() * 5000 }));
|
||||
const data = e.data//.map((item: any) => ({ ...item, value: item.statisticsLevel }));
|
||||
|
||||
// const data = e.data//.map((item: any) => ({ ...item, value: item.statisticsLevel }));
|
||||
console.log('data', data);
|
||||
data[4].value = 0;
|
||||
const choropleth = new Choropleth({
|
||||
map: scene,
|
||||
source: {
|
||||
data,
|
||||
joinBy: {
|
||||
@ -96,7 +114,7 @@ const Guide: React.FC<Props> = (props) => {
|
||||
// if (statisticsLevel == 10) return '#570303';
|
||||
// },
|
||||
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
|
||||
scale: { type: 'quantize' },
|
||||
scale: { type: 'cat' },
|
||||
},
|
||||
style: {
|
||||
opacity: 1,
|
||||
@ -122,9 +140,9 @@ const Guide: React.FC<Props> = (props) => {
|
||||
},
|
||||
tooltip: {
|
||||
items: [
|
||||
{field:'name',alias:'行政区域名称'},
|
||||
{field:'adcode',alias:'行政区域编码'},
|
||||
{field:'value',alias:'点位数目统计值'}
|
||||
{ field: 'name', alias: '行政区域名称' },
|
||||
{ field: 'adcode', alias: '行政区域编码' },
|
||||
{ field: 'value', alias: '点位数目统计值' }
|
||||
]
|
||||
},
|
||||
zoom: {
|
||||
@ -134,21 +152,36 @@ const Guide: React.FC<Props> = (props) => {
|
||||
position: 'bottomleft',
|
||||
},
|
||||
drill: {
|
||||
steps: ['province', 'city', 'district'],
|
||||
steps: [
|
||||
{
|
||||
level: 'province',
|
||||
source: { data: cityData },
|
||||
},
|
||||
{
|
||||
level: 'city',
|
||||
source: { data: districtData },
|
||||
},
|
||||
{
|
||||
level: 'district',
|
||||
source: { data: districtData },
|
||||
// color: 'green',
|
||||
// style: { opacity: 0.5 },
|
||||
},
|
||||
],
|
||||
onDown(from, to, callback) {
|
||||
const { level, adcode, granularity } = to;
|
||||
let adLevel = 0;
|
||||
if (level == 'province') {
|
||||
adLevel = 1;
|
||||
} else if (level == 'city') {
|
||||
adLevel = 2;
|
||||
} else if (level == 'district') {
|
||||
adLevel = 3;
|
||||
}
|
||||
getAdStatisticsData({'adLevel': adLevel, 'adcode': adcode, 'layerId': layerId}).then((e) => {
|
||||
let data = e.data;
|
||||
callback({ source: { data: e.data, joinBy: { sourceField: 'adcode' } } })
|
||||
})
|
||||
const { level, adcode, granularity } = to;
|
||||
let adLevel = 0;
|
||||
if (level == 'province') {
|
||||
adLevel = 1;
|
||||
} else if (level == 'city') {
|
||||
adLevel = 2;
|
||||
} else if (level == 'district') {
|
||||
adLevel = 3;
|
||||
}
|
||||
getAdStatisticsData({ 'adLevel': adLevel, 'adcode': adcode, 'layerId': layerId }).then((e) => {
|
||||
let data = e.data;
|
||||
callback({ source: { data: e.data, joinBy: { sourceField: 'adcode' } } })
|
||||
})
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -160,7 +193,7 @@ const Guide: React.FC<Props> = (props) => {
|
||||
setlayerId(id);
|
||||
showAdStatisticsData(id);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
{/* 顶部信息 */}
|
||||
@ -175,15 +208,15 @@ const Guide: React.FC<Props> = (props) => {
|
||||
<Col span={5} className={styles.filterLabel}>请选择需统计数目的图层</Col>
|
||||
<Col span={6}>
|
||||
<Select allowClear
|
||||
style = {{width: 310, color: '#2F66F2'}}
|
||||
onChange = {onLayerSelectChange}
|
||||
style={{ width: 310, color: '#2F66F2' }}
|
||||
onChange={onLayerSelectChange}
|
||||
placeholder='全部自定义图层'
|
||||
options = {layerList}
|
||||
options={layerList}
|
||||
></Select>
|
||||
</Col>
|
||||
|
||||
|
||||
</Row>
|
||||
|
||||
|
||||
|
||||
{/* 地图 */}
|
||||
<div className={styles.homepageCircleWrap}>
|
||||
@ -193,7 +226,7 @@ const Guide: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
@ -8,7 +8,7 @@ import Header from '../../components/Header/index.js';
|
||||
import { createPoint, updatePoint, getDetailByIdApi, queryUserLayers, getLayerPointsApi, getAllProvinceApi, getCityByProvinceApi, getDistrictByCityApi, getLayerShapesApi, getPointByAddressApi, deletePoint } from '../../api';
|
||||
import Pop from './pop'
|
||||
|
||||
import { GaodeMap, Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation, CanvasLayer, Scale } from '@antv/l7';
|
||||
import { GaodeMap, Scene, Heatmap, PolygonLayer, Marker, MarkerLayer, Popup, MouseLocation, CanvasLayer, Scale, MapTheme, Zoom } from '@antv/l7';
|
||||
const { confirm } = Modal;
|
||||
// import { DrawPoint, DrawEvent } from '@antv/l7-draw';
|
||||
import icon04 from '../../assets/icon/icon04.svg'
|
||||
@ -125,16 +125,7 @@ class BaseMap extends React.Component {
|
||||
this.setState({
|
||||
map: scene,
|
||||
}, () => {
|
||||
// 根据省市区码加载地图
|
||||
if (ProvinceAdcode) {
|
||||
this.onProvinceChange(ProvinceAdcode, ProvinceData);
|
||||
}
|
||||
if (CityAdcode) {
|
||||
this.onCityChange(CityAdcode, CityData);
|
||||
}
|
||||
if (DistrictAdcode) {
|
||||
this.onDistrictChange(DistrictAdcode, DistrictData);
|
||||
}
|
||||
|
||||
// 地图拖拽鼠标图标更改
|
||||
let can = document.getElementsByClassName('amap-layer')[0];
|
||||
can.addEventListener('mousedown', (e) => {
|
||||
@ -152,6 +143,70 @@ class BaseMap extends React.Component {
|
||||
// 比例尺插件
|
||||
const scale = new Scale();
|
||||
scene.addControl(scale);
|
||||
// 地图主题插件
|
||||
const mapTheme = new MapTheme({
|
||||
position: 'bottomright', // 控件的位置
|
||||
options: [
|
||||
{
|
||||
"text": "",
|
||||
"value": "amap://styles/normal",
|
||||
"img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*-nqiT6Vu948AAAAAAAAAAAAAARQnAQ",
|
||||
"key": "normal"
|
||||
},
|
||||
{
|
||||
"text": "",
|
||||
"value": "amap://styles/c422f5c0cfced5be9fe3a83f05f28a68?isPublic=true",
|
||||
"img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*J_wYQL_PaUEAAAAAAAAAAAAAARQnAQ",
|
||||
"key": "light"
|
||||
},
|
||||
{
|
||||
"text": "",
|
||||
"value": "amap://styles/c9f1d10cae34f8ab05e425462c5a58d7?isPublic=true",
|
||||
"img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*U7M9QI1yat4AAAAAAAAAAAAAARQnAQ",
|
||||
"key": "dark"
|
||||
},
|
||||
{
|
||||
"text": "",
|
||||
"value": "amap://styles/fresh",
|
||||
"img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*T-oBT4hB5ucAAAAAAAAAAAAAARQnAQ",
|
||||
"key": "fresh"
|
||||
},
|
||||
{
|
||||
"text": "",
|
||||
"value": "amap://styles/grey",
|
||||
"img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*OREXQ4vgQRIAAAAAAAAAAAAAARQnAQ",
|
||||
"key": "grey"
|
||||
},
|
||||
{
|
||||
"text": "",
|
||||
"value": "amap://styles/graffiti",
|
||||
"img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4UApTKmeiy4AAAAAAAAAAAAAARQnAQ",
|
||||
"key": "graffiti"
|
||||
},
|
||||
{
|
||||
"text": "",
|
||||
"value": "amap://styles/macaron",
|
||||
"img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*0GrCQLtDjNcAAAAAAAAAAAAAARQnAQ",
|
||||
"key": "macaron"
|
||||
},
|
||||
{
|
||||
"text": "",
|
||||
"value": "amap://styles/darkblue",
|
||||
"img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*uWxqSZQlPkkAAAAAAAAAAAAAARQnAQ",
|
||||
"key": "darkblue"
|
||||
},
|
||||
{
|
||||
"text": "",
|
||||
"value": "amap://styles/wine",
|
||||
"img": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*OFPrTbg3an0AAAAAAAAAAAAAARQnAQ",
|
||||
"key": "wine"
|
||||
}
|
||||
]
|
||||
});
|
||||
scene.addControl(mapTheme);
|
||||
let op = mapTheme.getOptions();
|
||||
console.log('op', op);
|
||||
|
||||
|
||||
// AutoComplete(输入框提示) 插件
|
||||
window.AMap.plugin(['AMap.AutoComplete', 'AMap.PlaceSearch'], () => {
|
||||
@ -159,6 +214,8 @@ class BaseMap extends React.Component {
|
||||
const autoOptions = {
|
||||
city: '全国', //城市，默认全国
|
||||
input: "tipinput", //使用联想输入的input的id
|
||||
citylimit: true,
|
||||
// closeResultOnScroll: false
|
||||
};
|
||||
// 创建Autocomplete对象
|
||||
const autoComplete = new AMap.AutoComplete(autoOptions);
|
||||
@ -170,21 +227,30 @@ class BaseMap extends React.Component {
|
||||
});
|
||||
});
|
||||
this.state.autoComplete = autoComplete;
|
||||
// 监听选中事件，将选中的地址信息显示在输入框中
|
||||
// 监听选中事件，将选中的地址信息显示在输入框中，暂时不需要，注解掉了
|
||||
autoComplete.on('select', (e) => {
|
||||
let adcode = e.poi.adcode;
|
||||
|
||||
console.log('select', e);
|
||||
this.setState({
|
||||
inputContent: e.poi.name,
|
||||
provinceAdcode: adcode.substr(0, 2) + '0000',
|
||||
inputContent: e.poi.name, // 将选中的地址信息显示在输入框中
|
||||
// provinceAdcode: adcode.substr(0, 2) + '0000',
|
||||
}, () => {
|
||||
// 改变adcode后不自动触发onProvinceChange函数，手动触发
|
||||
let data = this.state.provinceList.find(o => o.value === this.state.provinceAdcode);
|
||||
this.onProvinceChange(this.state.provinceAdcode, data);
|
||||
// let data = this.state.provinceList.find(o => o.value === this.state.provinceAdcode);
|
||||
// this.onProvinceChange(this.state.provinceAdcode, data);
|
||||
})
|
||||
})
|
||||
|
||||
// 根据省市区码加载地图
|
||||
if (ProvinceAdcode) {
|
||||
this.onProvinceChange(ProvinceAdcode, ProvinceData);
|
||||
}
|
||||
if (CityAdcode) {
|
||||
this.onCityChange(CityAdcode, CityData);
|
||||
}
|
||||
if (DistrictAdcode) {
|
||||
this.onDistrictChange(DistrictAdcode, DistrictData);
|
||||
}
|
||||
});
|
||||
|
||||
// scene.map.plugin(['AMap.Autocomplete'], () => {
|
||||
@ -199,6 +265,9 @@ class BaseMap extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭点位窗口的提示界面
|
||||
// Elmessage
|
||||
|
||||
//设置地图省份级别位置
|
||||
gotoProvince = (data) => {
|
||||
let zoom = data.zoom || 6;
|
||||
@ -578,6 +647,9 @@ class BaseMap extends React.Component {
|
||||
data && this.gotoProvince(data)
|
||||
// 根据所选省获取市
|
||||
this.getCityByProvince(`${provinceAdcode}`);
|
||||
// 根据所选省限制输入框的提示内容
|
||||
data && this.state.autoComplete.setCity(data.value);
|
||||
console.log("this.state.autoComplete", this.state.autoComplete.opt.city)
|
||||
|
||||
this.hideHeatMap();
|
||||
this.setState({
|
||||
@ -644,6 +716,10 @@ class BaseMap extends React.Component {
|
||||
self.stopLoading();
|
||||
});
|
||||
data && this.gotoCity(data);
|
||||
// 根据所选省限制输入框的提示内容
|
||||
data && this.state.autoComplete.setCity(data.value);
|
||||
console.log("this.state.autoComplete", this.state.autoComplete.opt.city)
|
||||
|
||||
this.hideHeatMap();
|
||||
this.setState({
|
||||
cityAdcode: cityAdcode ? `${cityAdcode}` : '',
|
||||
@ -702,6 +778,10 @@ class BaseMap extends React.Component {
|
||||
self.stopLoading();
|
||||
});
|
||||
data && this.gotoCity(data);
|
||||
// 根据所选省限制输入框的提示内容
|
||||
data && this.state.autoComplete.setCity(data.label);
|
||||
console.log("this.state.autoComplete", this.state.autoComplete.opt.city)
|
||||
|
||||
this.hideHeatMap();
|
||||
this.setState({
|
||||
districtAdcode: provinceAdcode ? `${provinceAdcode}` : '',
|
||||
@ -1213,6 +1293,7 @@ class BaseMap extends React.Component {
|
||||
<Input name='note' value={this.state.pointAdd.note} onChange={this.onLayerNoteChange} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Alert message="退出将丢失已填信息" type="warning" showIcon />
|
||||
</Modal>
|
||||
<Modal title="点位修改"
|
||||
open={this.state.isEditModalOpen}
|
||||
@ -1268,6 +1349,7 @@ class BaseMap extends React.Component {
|
||||
<Input name='note' value={this.state.pointEdit.note} onChange={this.onEditLayerNoteChange} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Alert message="退出将丢失已填信息" type="warning" showIcon />
|
||||
</Modal>
|
||||
<Button disabled className={styles.btnRight}>点位导入</Button>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user