sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增图层

Browse Source
This commit is contained in:
licuizhu 2023-10-25 22:43:04 +08:00
parent 61102f64cb
commit 7d42cc22a3
1 changed files with 109 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
src/pages/BaseMap/index.js
View File

@ -5,7 +5,7 @@ import LayerData from './LayerData';
import { AimOutlined } from '@ant-design/icons'; import { AimOutlined } from '@ant-design/icons';
import Guide from '../../components/Guide/index.ts' 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'; import styles from './index.less';
@ -69,14 +69,6 @@ class BaseMap extends React.Component{
this.setState({ this.setState({
map: scene map: scene
}); });
// let map = new AMap.Map('container', {
// resizeEnable: true,
// center: [116.405285,39.904989],
// zoom: 4,
// });
// this.setState({
// map: map
// });
} }
//根据cityname、adcode、citycode设置地图位置 //根据cityname、adcode、citycode设置地图位置
@ -113,9 +105,6 @@ class BaseMap extends React.Component{
let self = this; let self = this;
let getLayers = self.state.map.getLayers(); let getLayers = self.state.map.getLayers();
for (let i = 0; i < getLayers.length; i++) { 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) { if (getLayers[i].name == layerId) {
self.state.map.removeLayer(getLayers[i]); 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 self = this;
let map = this.state.map; let map = this.state.map;
let LabelsData = data || []; let LabelsData = data || [];
let logoImage = data.length > 0 && data[0].logoImage; 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}) const pointLayer = new PointLayer({name: layerId})
.source(LabelsData, { .source(LabelsData, {
parser: { parser: {
@ -147,7 +139,7 @@ class BaseMap extends React.Component{
y: 'lat', y: 'lat',
} }
}) })
.shape(layerId) .shape(logoImage)
.size(30) .size(30)
.color('mag', mag => { .color('mag', mag => {
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1'; return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
@ -158,56 +150,6 @@ class BaseMap extends React.Component{
strokeWidth: 3 strokeWidth: 3
}); });
map.addLayer(pointLayer); 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 = '<h3>详情信息</h3>';
// let detailVisibleFields = LabelsData[i].detailVisibleFields || [];
// for(let j = 0;j < detailVisibleFields.length;j++){
// let fieldNameStr = detailVisibleFields[j].fieldName;
// let fieldValue = LabelsData[i][fieldNameStr];
// content += '<p><label>' + detailVisibleFields[j].fieldShowName + '：</label><span>' + fieldValue + '</span></p>'
// }
// 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 self = this;
let map = this.state.map; let map = this.state.map;
let LabelsData = data || []; 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 heatmap;
var points = []; // var points = [];
LabelsData.forEach(function (item) { // LabelsData.forEach(function (item) {
points.push( // points.push(
{ // {
"lng": Number(item.location.split(',')[0]), // "lng": Number(item.location.split(',')[0]),
"lat": Number(item.location.split(',')[1]), // "lat": Number(item.location.split(',')[1]),
"count": item.weight, // "count": item.weight,
"id": layerId, // "id": layerId,
} // }
) // )
}) // })
map.plugin(["AMap.Heatmap"],function(){ // map.plugin(["AMap.Heatmap"],function(){
// 在地图对象叠加热力图 // // 在地图对象叠加热力图
heatmap = new AMap.Heatmap(map, { // heatmap = new AMap.Heatmap(map, {
radius: 25, //热力图的每个点的半径大小 [0,+∞) // radius: 25, //热力图的每个点的半径大小 [0,+∞)
opacity: [0, 0.8], //热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity // opacity: [0, 0.8], //热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
gradient:{ //热力图的颜色渐变区间。 {JSON}:key 插值的位置, 0-1; value颜色值 // gradient:{ //热力图的颜色渐变区间。 {JSON}:key 插值的位置, 0-1; value颜色值
0.5: 'blue', // 0.5: 'blue',
0.65: 'rgb(117,211,248)', // 0.65: 'rgb(117,211,248)',
0.7: 'rgb(0, 255, 0)', // 0.7: 'rgb(0, 255, 0)',
0.9: '#ffea00', // 0.9: '#ffea00',
1.0: 'red' // 1.0: 'red'
}, // },
}); // });
// 设置热力图数据集 // // 设置热力图数据集
heatmap.setDataSet({data:points,max:100}); // heatmap.setDataSet({data:points,max:100});
}); // });
this.setState((state) => { // this.setState((state) => {
state.heatMapList.push(heatmap); // state.heatMapList.push(heatmap);
}); // });
} }
// 获取围栏图层数据 // 获取围栏图层数据
getLayerShapes = (layerId, selected, adcode) => { getLayerShapes = (layerId, selected, adcode) => {
@ -268,57 +231,64 @@ class BaseMap extends React.Component{
}); });
} else { } else {
this.state.map.removeAllLayer(); 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) => { setPolygon = (d, layerId) => {
let self = this; let self = this;
let map = this.state.map; let map = this.state.map;
let paths = d || []; let data = d || [];
let overlayList = []; let overlayList = [];
const layer = new PolygonLayer({})
paths.forEach(function(path) { .source(data)
if(path.type === "ENVELOPE"){ .shape('extrude')
var tmp1 = path.positionRectangle[0] .size('h20', [ 100, 120, 160, 200, 260, 500 ])
var tmp2 = path.positionRectangle[1] .color('h20', [
var southWest = new AMap.LngLat(tmp1[0], tmp1[1]) '#816CAD',
var northEast = new AMap.LngLat(tmp2[0], tmp2[1]) '#A67FB5',
var bound = new AMap.Bounds(southWest,northEast); '#C997C7',
var rectangle = new AMap.Rectangle({ '#DEB8D4',
id: layerId, '#F5D4E6',
bounds: bound, '#FAE4F1',
strokeColor: path.borderColor, '#FFF3FC'
strokeWeight: 1, ]);
strokeOpacity: path.borderOpacity, map.addLayer(layer);
fillOpacity: path.opacity, // paths.forEach(function(path) {
fillColor: path.themeColor, // if(path.type === "ENVELOPE"){
zIndex: 50, // var tmp1 = path.positionRectangle[0]
}); // var tmp2 = path.positionRectangle[1]
overlayList.push(rectangle); // var southWest = new AMap.LngLat(tmp1[0], tmp1[1])
}else if(path.type === "POLYGON"){ // var northEast = new AMap.LngLat(tmp2[0], tmp2[1])
var polygon = new AMap.Polygon({ // var bound = new AMap.Bounds(southWest,northEast);
id: layerId, // var rectangle = new AMap.Rectangle({
path: path.positionBorder, // id: layerId,
strokeColor: path.borderColor, // bounds: bound,
strokeWeight: 1, // strokeColor: path.borderColor,
strokeOpacity: path.borderOpacity, // strokeWeight: 1,
fillOpacity: path.opacity, // strokeOpacity: path.borderOpacity,
fillColor: path.themeColor, // fillOpacity: path.opacity,
zIndex: 50, // fillColor: path.themeColor,
}); // zIndex: 50,
overlayList.push(polygon); // });
} // 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); // let overlay = new AMap.OverlayGroup(overlayList);
map.add(overlay) // map.add(overlay)
// 缩放地图到合适的视野级别 // 缩放地图到合适的视野级别
// map.setFitView([ polygon ]) // map.setFitView([ polygon ])
} }