diff --git a/src/pages/BaseMap/index.js b/src/pages/BaseMap/index.js index 538e659a..26d0de35 100644 --- a/src/pages/BaseMap/index.js +++ b/src/pages/BaseMap/index.js @@ -5,7 +5,7 @@ import LayerData from './LayerData'; import { AimOutlined } from '@ant-design/icons'; import Guide from '../../components/Guide/index.ts' -import { GaodeMap ,Scene, PointLayer } from '@antv/l7'; +import { GaodeMap ,Scene, PointLayer, Heatmap, PolygonLayer } from '@antv/l7'; import styles from './index.less'; @@ -69,14 +69,6 @@ class BaseMap extends React.Component{ this.setState({ map: scene }); - // let map = new AMap.Map('container', { - // resizeEnable: true, - // center: [116.405285,39.904989], - // zoom: 4, - // }); - // this.setState({ - // map: map - // }); } //根据cityname、adcode、citycode设置地图位置 @@ -113,9 +105,6 @@ class BaseMap extends React.Component{ let self = this; let getLayers = self.state.map.getLayers(); for (let i = 0; i < getLayers.length; i++) { - // if (getLayers[i].CLASS_NAME === 'AMap.LabelsLayer' && getLayers[i].De.id === layerId) { - // self.state.map.remove(getLayers[i]); - // } if (getLayers[i].name == layerId) { self.state.map.removeLayer(getLayers[i]); } @@ -133,12 +122,15 @@ class BaseMap extends React.Component{ } } // 在地图上设置点位 【经度，纬度】 - setMarkers = (data, layerId) => { + setMarkers = (data, layerId) => {debugger let self = this; let map = this.state.map; let LabelsData = data || []; let logoImage = data.length > 0 && data[0].logoImage; - map.addImage = (layerId, logoImage); + map.addImage("icon", logoImage); + map.addImage( '00','https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', ); + map.addImage('01', 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',); + map.addImage( '02','https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg',); const pointLayer = new PointLayer({name: layerId}) .source(LabelsData, { parser: { @@ -147,7 +139,7 @@ class BaseMap extends React.Component{ y: 'lat', } }) - .shape(layerId) + .shape(logoImage) .size(30) .color('mag', mag => { return mag > 4.5 ? '#5B8FF9' : '#5CCEA1'; @@ -158,56 +150,6 @@ class BaseMap extends React.Component{ strokeWidth: 3 }); map.addLayer(pointLayer); - - //初始化图层 - // var markers = []; - // var allowCollision = true; - // var layer = new AMap.LabelsLayer({ - // id: layerId, - // zooms: [3, 20], - // zIndex: 1000, - // allowCollision, - // }); - // layer.add(markers); - // // 图层添加到地图 - // map.add(layer); - - // // 初始化 labelMarker - // let curData, labelMarker; - // for (let i = 0; i < LabelsData.length; i++) { - // curData = { - // name: LabelsData[i].pointName, - // address: LabelsData[i].address, - // position: [LabelsData[i].location.split(',')[0],LabelsData[i].location.split(',')[1]], - // zooms: [5, 20], - // opacity: 1, - // zIndex: 10, - // fold: true, - // icon: { - // type: 'image', - // image: LabelsData[i].logoImage, - // size: [30, 30], - // anchor: 'center', - // }, - // extData: { - // index: i - // } - // }; - // labelMarker = new AMap.LabelMarker(curData); - // //整理详情显示信息 - // let content = '

详情信息

'; - // let detailVisibleFields = LabelsData[i].detailVisibleFields || []; - // for(let j = 0;j < detailVisibleFields.length;j++){ - // let fieldNameStr = detailVisibleFields[j].fieldName; - // let fieldValue = LabelsData[i][fieldNameStr]; - // content += '

' + fieldValue + '

' - // } - // labelMarker.content = content; - // labelMarker.on('click', self.markerClick); - // markers.push(labelMarker); - // } - // // 将 marker 添加到图层 - // layer.add(markers); } // 点击点显示详细信息 @@ -221,38 +163,59 @@ class BaseMap extends React.Component{ let self = this; let map = this.state.map; let LabelsData = data || []; + let heatLayer = new Heatmap({nmae: layerId}) + .source(LabelsData) + .shape('heatmap') + .size('mag', [ 0, 1.0 ]) // weight映射通道 + .style({ + intensity: 2, + radius: 20, + rampColors: { + colors: [ + '#FF4818', + '#F7B74A', + '#FFF598', + '#91EABC', + '#2EA9A1', + '#206C7C' + ].reverse(), + positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] + } + }); + map.addLayer(heatLayer); + // 加载热力图插件 - var heatmap; - var points = []; - LabelsData.forEach(function (item) { - points.push( - { - "lng": Number(item.location.split(',')[0]), - "lat": Number(item.location.split(',')[1]), - "count": item.weight, - "id": layerId, - } - ) - }) - map.plugin(["AMap.Heatmap"],function(){ - // 在地图对象叠加热力图 - heatmap = new AMap.Heatmap(map, { - radius: 25, //热力图的每个点的半径大小 [0,+∞) - opacity: [0, 0.8], //热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity - gradient:{ //热力图的颜色渐变区间。 {JSON}:key 插值的位置, 0-1; value颜色值 - 0.5: 'blue', - 0.65: 'rgb(117,211,248)', - 0.7: 'rgb(0, 255, 0)', - 0.9: '#ffea00', - 1.0: 'red' - }, - }); - // 设置热力图数据集 - heatmap.setDataSet({data:points,max:100}); - }); - this.setState((state) => { - state.heatMapList.push(heatmap); - }); + // var heatmap; + // var points = []; + // LabelsData.forEach(function (item) { + // points.push( + // { + // "lng": Number(item.location.split(',')[0]), + // "lat": Number(item.location.split(',')[1]), + // "count": item.weight, + // "id": layerId, + // } + // ) + // }) + // map.plugin(["AMap.Heatmap"],function(){ + // // 在地图对象叠加热力图 + // heatmap = new AMap.Heatmap(map, { + // radius: 25, //热力图的每个点的半径大小 [0,+∞) + // opacity: [0, 0.8], //热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity + // gradient:{ //热力图的颜色渐变区间。 {JSON}:key 插值的位置, 0-1; value颜色值 + // 0.5: 'blue', + // 0.65: 'rgb(117,211,248)', + // 0.7: 'rgb(0, 255, 0)', + // 0.9: '#ffea00', + // 1.0: 'red' + // }, + // }); + // // 设置热力图数据集 + // heatmap.setDataSet({data:points,max:100}); + // }); + // this.setState((state) => { + // state.heatMapList.push(heatmap); + // }); } // 获取围栏图层数据 getLayerShapes = (layerId, selected, adcode) => { @@ -268,57 +231,64 @@ class BaseMap extends React.Component{ }); } else { this.state.map.removeAllLayer(); - // let self = this; - // let getOverlays = self.state.map.getAllOverlays(); - // for (let i = 0; i < getOverlays.length; i++) { - // if (getOverlays[i].De.id === layerId) { - // self.state.map.remove(getOverlays[i]); - // } - // } } } // 在地图上设置围栏、面 setPolygon = (d, layerId) => { let self = this; let map = this.state.map; - let paths = d || []; + let data = d || []; let overlayList = []; - - paths.forEach(function(path) { - if(path.type === "ENVELOPE"){ - var tmp1 = path.positionRectangle[0] - var tmp2 = path.positionRectangle[1] - var southWest = new AMap.LngLat(tmp1[0], tmp1[1]) - var northEast = new AMap.LngLat(tmp2[0], tmp2[1]) - var bound = new AMap.Bounds(southWest,northEast); - var rectangle = new AMap.Rectangle({ - id: layerId, - bounds: bound, - strokeColor: path.borderColor, - strokeWeight: 1, - strokeOpacity: path.borderOpacity, - fillOpacity: path.opacity, - fillColor: path.themeColor, - zIndex: 50, - }); - overlayList.push(rectangle); - }else if(path.type === "POLYGON"){ - var polygon = new AMap.Polygon({ - id: layerId, - path: path.positionBorder, - strokeColor: path.borderColor, - strokeWeight: 1, - strokeOpacity: path.borderOpacity, - fillOpacity: path.opacity, - fillColor: path.themeColor, - zIndex: 50, - }); - overlayList.push(polygon); - } - }); + const layer = new PolygonLayer({}) + .source(data) + .shape('extrude') + .size('h20', [ 100, 120, 160, 200, 260, 500 ]) + .color('h20', [ + '#816CAD', + '#A67FB5', + '#C997C7', + '#DEB8D4', + '#F5D4E6', + '#FAE4F1', + '#FFF3FC' + ]); + map.addLayer(layer); + // paths.forEach(function(path) { + // if(path.type === "ENVELOPE"){ + // var tmp1 = path.positionRectangle[0] + // var tmp2 = path.positionRectangle[1] + // var southWest = new AMap.LngLat(tmp1[0], tmp1[1]) + // var northEast = new AMap.LngLat(tmp2[0], tmp2[1]) + // var bound = new AMap.Bounds(southWest,northEast); + // var rectangle = new AMap.Rectangle({ + // id: layerId, + // bounds: bound, + // strokeColor: path.borderColor, + // strokeWeight: 1, + // strokeOpacity: path.borderOpacity, + // fillOpacity: path.opacity, + // fillColor: path.themeColor, + // zIndex: 50, + // }); + // overlayList.push(rectangle); + // }else if(path.type === "POLYGON"){ + // var polygon = new AMap.Polygon({ + // id: layerId, + // path: path.positionBorder, + // strokeColor: path.borderColor, + // strokeWeight: 1, + // strokeOpacity: path.borderOpacity, + // fillOpacity: path.opacity, + // fillColor: path.themeColor, + // zIndex: 50, + // }); + // overlayList.push(polygon); + // } + // }); - let overlay = new AMap.OverlayGroup(overlayList); - map.add(overlay) + // let overlay = new AMap.OverlayGroup(overlayList); + // map.add(overlay) + // 缩放地图到合适的视野级别 // map.setFitView([ polygon ]) }