From e1473590d662475f0ba5d1f82216f2d929342c3a Mon Sep 17 00:00:00 2001 From: Smile-Xin <13622060635@163.com> Date: Sat, 1 Mar 2025 17:08:27 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Guide/Guide.tsx | 99 ++++++++++++++++++---------- src/pages/BaseMap/index.js | 116 ++++++++++++++++++++++++++++----- 2 files changed, 165 insertions(+), 50 deletions(-) diff --git a/src/components/Guide/Guide.tsx b/src/components/Guide/Guide.tsx index 48878182..a0a1dee8 100644 --- a/src/components/Guide/Guide.tsx +++ b/src/components/Guide/Guide.tsx @@ -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) => { // 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) => { data.createPointCount && setCreatePointCount(data.createPointCount); let layerList: Array = [{ 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) => { }, []); 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) => { // 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) => { }, 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) => { 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) => { setlayerId(id); showAdStatisticsData(id); } - + return ( {/* 顶部信息 */} @@ -175,15 +208,15 @@ const Guide: React.FC = (props) => { 请选择需统计数目的图层 - + - + {/* 地图 */}
@@ -193,7 +226,7 @@ const Guide: React.FC = (props) => {
- + ); }; diff --git a/src/pages/BaseMap/index.js b/src/pages/BaseMap/index.js index 8d55ff45..c4f890e3 100644 --- a/src/pages/BaseMap/index.js +++ b/src/pages/BaseMap/index.js @@ -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 { + +