新增图层
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 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 = '<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 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 ])
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user