|
@ -99,55 +99,22 @@ function Map(props) { |
|
|
map.setRotation(1.7000) |
|
|
map.setRotation(1.7000) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//初始层级 zoom14以下显示聚合点
|
|
|
|
|
|
const data = [ |
|
|
const data = [ |
|
|
{ lng: 116.117906, lat: 28.678096, type: 'home', name: '廉租房1', kind: 'markergreen' }, |
|
|
{ lng: 115.886724, lat: 28.534257, type: 'home', name: '城西幸福庄园', kind: 'markergreen' }, |
|
|
{ lng: 116.195238, lat: 28.842114, type: 'home', name: '廉租房2', kind: 'markerblue' }, |
|
|
{ lng: 115.956004, lat: 28.541413, type: 'home', name: '城东幸福庄园', kind: 'markerblue' }, |
|
|
{ lng: 116.037227, lat: 28.558811, type: 'home', name: '廉租房3', kind: 'markeryellow' }, |
|
|
{ lng: 115.9335, lat: 28.541146, type: 'home', name: '城南幸福庄园', kind: 'markeryellow' }, |
|
|
{ lng: 115.925856, lat: 28.558811, type: 'home', name: '廉租房4', kind: 'markergreen' }, |
|
|
{ lng: 115.91131, lat: 28.525062, type: 'home', name: '小蓝经投公租房', kind: 'markergreen' }, |
|
|
{ lng: 115.989847, lat: 28.484411, type: 'home', name: '廉租房5', kind: 'markergreen' }, |
|
|
|
|
|
|
|
|
|
|
|
{ lng: 116.054664, lat: 28.538966, type: 'device', name: '廉租房1', kind: 'markergreen' }, |
|
|
|
|
|
{ lng: 116.074711, lat: 28.746745, type: 'device', name: '廉租房2', kind: 'markerblue' }, |
|
|
|
|
|
{ lng: 116.111632, lat: 28.56532, type: 'device', name: '廉租房3', kind: 'markeryellow' }, |
|
|
|
|
|
{ lng: 115.978519, lat: 28.56532, type: 'device', name: '廉租房4', kind: 'markergreen' }, |
|
|
|
|
|
{ lng: 115.95792, lat: 28.417395, type: 'device', name: '廉租房5', kind: 'markergreen' }, |
|
|
|
|
|
] |
|
|
] |
|
|
|
|
|
|
|
|
//zoom14以上显示详情
|
|
|
|
|
|
const databig = [ |
|
|
|
|
|
{ lng: 115.924246, lat: 28.554835, type: 'device', name: '廉租房1', kind: 'markergreenbig' }, |
|
|
|
|
|
{ lng: 115.921495, lat: 28.553053, type: 'device', name: '廉租房2', kind: 'markerbluebig' }, |
|
|
|
|
|
{ lng: 115.919115, lat: 28.557256, type: 'device', name: '廉租房3', kind: 'markeryellowbig' }, |
|
|
|
|
|
] |
|
|
|
|
|
//初始点位显示
|
|
|
|
|
|
data.filter(s => s.type == tab).map((x, index) => { |
|
|
|
|
|
var marker = new AMap.Marker({ |
|
|
|
|
|
position: new AMap.LngLat(x.lng, x.lat), |
|
|
|
|
|
// 将一张图片的地址设置为 icon
|
|
|
|
|
|
icon: '/assets/images/homepage/communtity/markerblue.png', |
|
|
|
|
|
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
|
|
|
|
|
|
offset: new AMap.Pixel(-13, -30), |
|
|
|
|
|
zooms: [3, 14], |
|
|
|
|
|
}); |
|
|
|
|
|
marker.setTitle(x.name); |
|
|
|
|
|
map.add(marker); |
|
|
|
|
|
marker.on('click', () => { |
|
|
|
|
|
map.setZoom(17.4) |
|
|
|
|
|
map.setCenter([115.922069, 28.554867]) |
|
|
|
|
|
map.setPitch(47.30) |
|
|
|
|
|
map.setRotation(1.7000) |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
//下钻点位显示
|
|
|
//下钻点位显示
|
|
|
databig.map((x, index) => { |
|
|
data.map((x, index) => { |
|
|
var marker = new AMap.Marker({ |
|
|
var marker = new AMap.Marker({ |
|
|
position: new AMap.LngLat(x.lng, x.lat), |
|
|
position: new AMap.LngLat(x.lng, x.lat), |
|
|
// 将一张图片的地址设置为 icon
|
|
|
// 将一张图片的地址设置为 icon
|
|
|
icon: '/assets/images/homepage/communtity/' + x.kind + '.png', |
|
|
icon: '/assets/images/homepage/communtity/markergreen.png', |
|
|
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
|
|
|
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
|
|
|
offset: new AMap.Pixel(-13, -30), |
|
|
offset: new AMap.Pixel(-13, -30), |
|
|
zooms: [15, 19], |
|
|
zooms: [3, 19], |
|
|
}); |
|
|
}); |
|
|
marker.setTitle(x.name); |
|
|
marker.setTitle(x.name); |
|
|
map.add(marker); |
|
|
map.add(marker); |
|
|