wenlele 1 year ago
parent
commit
da9fff14d1
  1. 8
      super-screen/client/src/sections/community-safty/components/infrastructure.js
  2. 47
      super-screen/client/src/sections/community-safty/containers/gis.js

8
super-screen/client/src/sections/community-safty/components/infrastructure.js

@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect } from 'react'
import { Box, NoData } from '$components';
import { useMockRequest, ApiTable } from '$utils';
@ -7,10 +7,14 @@ function Infrastructure(props) {
url: 'https://superchangnan.anxinyun.cn/api/xiaofang/devices',
method: 'mockGet',
});
const datas = devices?.map(s => {
let datas = []
useEffect(() => {
devices?.map(s => {
s.data = JSON.parse(s.data)
return s;
})
}, [devices])
const data = [
{ name: '烟感设备', number: datas?.find(s => s.type == 3)?.data?.length || 0 },

47
super-screen/client/src/sections/community-safty/containers/gis.js

@ -99,55 +99,22 @@ function Map(props) {
map.setRotation(1.7000)
//初始层级 zoom14以下显示聚合点
const data = [
{ lng: 116.117906, lat: 28.678096, type: 'home', name: '廉租房1', kind: 'markergreen' },
{ lng: 116.195238, lat: 28.842114, type: 'home', name: '廉租房2', kind: 'markerblue' },
{ lng: 116.037227, lat: 28.558811, type: 'home', name: '廉租房3', kind: 'markeryellow' },
{ lng: 115.925856, lat: 28.558811, type: 'home', name: '廉租房4', 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' },
{ lng: 115.886724, lat: 28.534257, type: 'home', name: '城西幸福庄园', kind: 'markergreen' },
{ lng: 115.956004, lat: 28.541413, type: 'home', name: '城东幸福庄园', kind: 'markerblue' },
{ lng: 115.9335, lat: 28.541146, type: 'home', name: '城南幸福庄园', kind: 'markeryellow' },
{ lng: 115.91131, lat: 28.525062, type: 'home', name: '小蓝经投公租房', 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({
position: new AMap.LngLat(x.lng, x.lat),
// 将一张图片的地址设置为 icon
icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
icon: '/assets/images/homepage/communtity/markergreen.png',
// 设置了 icon 以后,设置 icon 的偏移量,以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30),
zooms: [15, 19],
zooms: [3, 19],
});
marker.setTitle(x.name);
map.add(marker);

Loading…
Cancel
Save