新增图层
This commit is contained in:
licuizhu
parent
61102f64cb
commit
7d42cc22a3
@ -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})
|
||||||
var heatmap;
|
.source(LabelsData)
|
||||||
var points = [];
|
.shape('heatmap')
|
||||||
LabelsData.forEach(function (item) {
|
.size('mag', [ 0, 1.0 ]) // weight映射通道
|
||||||
points.push(
|
.style({
|
||||||
{
|
intensity: 2,
|
||||||
"lng": Number(item.location.split(',')[0]),
|
radius: 20,
|
||||||
"lat": Number(item.location.split(',')[1]),
|
rampColors: {
|
||||||
"count": item.weight,
|
colors: [
|
||||||
"id": layerId,
|
'#FF4818',
|
||||||
|
'#F7B74A',
|
||||||
|
'#FFF598',
|
||||||
|
'#91EABC',
|
||||||
|
'#2EA9A1',
|
||||||
|
'#206C7C'
|
||||||
|
].reverse(),
|
||||||
|
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
|
||||||
}
|
}
|
||||||
)
|
|
||||||
})
|
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
|
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);
|
||||||
|
// });
|
||||||
}
|
}
|
||||||
// 获取围栏图层数据
|
// 获取围栏图层数据
|
||||||
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({})
|
||||||
|
.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);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
paths.forEach(function(path) {
|
// let overlay = new AMap.OverlayGroup(overlayList);
|
||||||
if(path.type === "ENVELOPE"){
|
// map.add(overlay)
|
||||||
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)
|
|
||||||
// 缩放地图到合适的视野级别
|
// 缩放地图到合适的视野级别
|
||||||
// map.setFitView([ polygon ])
|
// map.setFitView([ polygon ])
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user