Browse Source

巡更轨迹查询 -todo

release_0.0.4
LUCAS 2 years ago
parent
commit
c68cfd9bbc
  1. 2
      api/app/lib/controllers/report/index.js
  2. BIN
      web/client/assets/images/worker.png
  3. 70
      web/client/index.html
  4. 188
      web/client/src/sections/fillion/components/gis/bounds.js
  5. 59
      web/client/src/sections/fillion/components/gis/mock_data.js
  6. 131
      web/client/src/sections/fillion/components/gis/patrolGis.js
  7. 2
      web/client/src/sections/fillion/components/patrolTable.js

2
api/app/lib/controllers/report/index.js

@ -9,7 +9,7 @@ async function reportList (ctx) {
where: {
},
attributes: ['id', 'road', 'time', 'projectType', 'roadSectionStart', 'roadSectionEnd', 'reportType', 'content'],
attributes: ['id', 'road', 'time', 'projectType', 'roadSectionStart', 'roadSectionEnd', 'reportType', 'content', 'longitude','latitude'],
include: [{
model: models.User,
attributes: ['name']

BIN
web/client/assets/images/worker.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

70
web/client/index.html

@ -1,43 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="shortcut icon" href="/assets/images/favicon.ico" />
<link
rel="stylesheet"
type="text/css"
href="/assets/font_sc/iconfont.css"
/>
<link rel="stylesheet" href="/assets/fontziti/font.css" />
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
}
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="shortcut icon" href="/assets/images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css" />
<link rel="stylesheet" href="/assets/fontziti/font.css" />
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
}
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.Adaptor,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder,AMap.CustomLayer,Map3D,ElasticMarker"></script>
</head>
<body>
<link
rel="stylesheet/less"
type="text/css"
href="/assets/color.less"
rel="external nofollow"
/>
<script>
window.less = {
async: false,
env: "production",
};
</script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"
></script>
<div id="App"></div>
<script
type="text/javascript"
src="http://localhost:5001/client/build/app.js"
></script>
</body>
</html>
<script
src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.Adaptor,AMap.Scale,AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder,AMap.CustomLayer,Map3D,ElasticMarker"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=00f9a29dedcdbd8befec3dfe0cef5003"></script>
</head>
<body>
<link rel="stylesheet/less" type="text/css" href="/assets/color.less" rel="external nofollow" />
<script>
window.less = {
async: false,
env: "production",
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<div id="App"></div>
<script type="text/javascript" src="http://localhost:5001/client/build/app.js"></script>
</body>
</html>

188
web/client/src/sections/fillion/components/gis/bounds.js

@ -0,0 +1,188 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { geoJson } from './mock_data';
export default class Bounds extends Component {
constructor(props) {
super(props);
this.map = props.map;
this.pl = {};
this.textMarker = {};
}
static propTypes = {
prop: PropTypes
}
componentDidMount() {
if (!window.BoundPl) {
this.drawBounds();
}
}
componentWillUnmount() {
if (window.local_)
window.local_.remove(this.pl);
this.textMarker = null;
window.BoundPl = null;
}
drawBounds = () => {
var map = this.map;
var loca = window.local_;
loca.ambLight = {
intensity: 0.3,
color: '#fff',
};
loca.dirLight = {
intensity: 0.6,
color: '#fff',
target: [0, 0, 0],
position: [0, -1, 1],
};
loca.pointLight = {
color: 'rgb(100,100,100)',
position: [120.24289, 30.341335, 20000],
intensity: 3,
// 距离表示从光源到光照强度为 0 的位置,0 就是光不会消失。
distance: 50000,
};
var geo = new Loca.GeoJSONSource({
data: geoJson
});
var colors = ['#04398c', '#04398c', '#0542a5'].reverse();
var height = [500];
var pl = new Loca.PolygonLayer({
// loca,
zIndex: 1,
opacity: 0.6,
// cullface: 'none',
shininess: 10,
hasSide: true,
});
pl.setSource(geo);
pl.setStyle({
topColor: function (index, feature) {
var i = index % 3;
return colors[i];
},
sideColor: function (index, feature) {
return '#023890';
},
borderColor: function () {
return '#24dcf7'
},
height: function (index, feature) {
return index == 0 ? height[0] : height[0] + index * 50;
},
altitude: 0,
});
loca.add(pl);
// 创建纯文本标记
var text = new AMap.Text({
text: '纯文本标记',
anchor: 'center', // 设置文本标记锚点
draggable: true,
cursor: 'pointer',
angle: 0,
visible: false,
offset: [60, 60],
extData: 'bounds_text',
style: {
'padding': '5px 10px',
'margin-bottom': '1rem',
'border-radius': '.25rem',
'background-color': 'rgba(0,0,0,0.5)',
// 'width': '12rem',
'border-width': 0,
'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
'text-align': 'center',
'font-size': '16px',
'color': '#fff',
},
});
// text.setMap(map);
if (!this.textMarker)
map.add(text);
this.textMarker = text;
console.log(text)
// 拾取
map.on('mousemove', (e) => {
var feat = pl.queryFeature(e.pixel.toArray());
// if (!text) {
map.add(text);
// text = this.textMarker;
// }
if (feat) {
text.show();
text.setText(feat.properties.NAME);
text.setPosition(e.lnglat);
pl.setStyle({
topColor: (index, feature) => {
if (feature === feat) {
return [19, 43, 77, 1];
}
// var v = feature.properties.health * 100;
var i = index % 3;
return colors[i];
},
sideColor: (index, feature) => {
if (feature === feat) {
return '#023890';
}
return '#023890';
},
borderColor: function () {
return '#24dcf7'
},
height: function (index, feature) {
return index == 0 ? height[0] : height[0] + index * 50;
},
});
} else {
pl.setStyle({
topColor: function (index, feature) {
var i = index % 3;
return colors[i];
},
sideColor: function (index, feature) {
return '#023890';
},
borderColor: function () {
return '#24dcf7'
},
height: function (index, feature) {
return index == 0 ? height[0] : height[0] + index * 50;
},
altitude: 0,
});
text.hide();
map.remove(text);
}
});
map.setZoom(12.88)
map.setCenter([115.888149, 28.549851]);
map.setRotation(-68.7);
map.setPitch(42);
this.pl = pl;
window.BoundPl = pl;
}
render() {
return (
<div>
</div>
)
}
}

59
web/client/src/sections/fillion/components/gis/mock_data.js

File diff suppressed because one or more lines are too long

131
web/client/src/sections/fillion/components/gis/patrolGis.js

@ -1,10 +1,133 @@
import React from 'react'
import PropTypes from 'prop-types'
import { useEffect } from 'react';
import { useState } from 'react';
import { DatePicker } from 'antd';
import Bounds from './bounds';
import moment from 'moment';
const { RangePicker } = DatePicker;
function PatrolGis(props) {
return (
<div>PatrolGis</div>
)
const { reportList, userId, dispatch } = props;
const [mapComplete, setMapComplete] = useState(false);
const [mapObj, setMapObj] = useState();
const [dateRange, setDateRange] = useState();
useEffect(() => {
if (AMap) loadMap();
return () => {
if (window.local_) {
window.local_ = null
}
if (mapObj)
mapObj.clearMap();
}
}, [true])
useEffect(() => {
if (userId) {
}
}, [userId, dateRange])
useEffect(() => {
if (reportList && mapObj) {
mapObj.clearMap();
renderMarkers();
renderPath();
}
}, [reportList, mapObj])
const loadMap = () => {
const map = new AMap.Map("amapId", {
resizeEnable: true,
center: [115.99255, 28.503617],//地图中心点,初始定位加载显示楼块
zoom: 8,//地图显示的缩放级别
zooms: [8, 18],
pitch: 0, // 地图俯仰角度,有效范围 0 度- 83 度
viewMode: '3D', // 地图模式
mapStyle: 'amap://styles/light',
});
//主题样式
// var styleName = defaultStyleName;
// map.setMapStyle(styleName);
let windowOnload = false;
map.on('complete', function () {
console.log("map-complete")
if (!window.local_) {
window.local_ = new Loca.Container({ map });
setMapObj(map);
}
});
window.onload = function () {
console.log("window.onload")
windowOnload = true;
}
};
const renderMarkers = () => {
const map = mapObj;
if (reportList && reportList instanceof Array) {
reportList.map(item => {
const { longitude, latitude, user } = item;
if (!longitude || !latitude) {
return;
}
const imageURL = '/assets/images/worker.png'
let icon = new AMap.Icon({
size: new AMap.Size(24, 24), // 图标尺寸
image: imageURL, // Icon的图像
rotation: 270,
// imageOffset: new AMap.Pixel(-14, -14), // 图像相对展示区域的偏移量,适于雪碧图等
imageSize: new AMap.Size(24, 24) // 根据所设置的大小拉伸或压缩图片
});
let marker = new AMap.Marker({
position: new AMap.LngLat(longitude, latitude),
icon: icon,
offset: new AMap.Pixel(-12, -12),
extData: {
name: user.name || '',
}
});
// marker.setTitle(s.name);
map.add(marker);
})
}
}
const renderPath = () => {
const map = mapObj;
if (reportList && reportList instanceof Array) {
let list = reportList
list.sort((a, b) => {
const timeA = moment(a.time).valueOf();
const timeB = moment(b.time).valueOf();
return timeA - timeB;
})
let path = []
list.map(item => {
const { longitude, latitude, } = item;
if (longitude && latitude)
path.push([item.longitude, item.latitude])
});
var polyline1 = new AMap.Polyline({
map: map,
path: path, // 设置线覆盖物路径
showDir: true,
strokeColor: '#3366bb', // 线颜色
strokeWeight: 7 // 线宽
});
}
}
return (
<div style={{ width: '100%', backgroundColor: '#101824', height: '100%', minHeight: 700 }}>
<div id='amapId' style={{ width: '100%', height: '100%', background: "#101824", minHeight: 700 }} />
<RangePicker onChange={(date, dateString) => { setDateRange(dateString) }} />
{mapObj ? <Bounds map={mapObj} /> : ''}
</div >
)
}
PatrolGis.propTypes = {}

2
web/client/src/sections/fillion/components/patrolTable.js

@ -301,7 +301,7 @@ const PatrolTable = (props) => {
<DetailList reportList={reportList} record={record} loading={reportListLoading} dispatch={dispatch} handleOpen={handleOpen} handelRefresh={handelRefresh} />
</Card>
</div>],
tab2: <PatrolGis />
tab2: <PatrolGis userId={record.id} dispatch={dispatch} />
};
const [activeTabKey1, setActiveTabKey1] = useState('tab1');
const onTab1Change = (key) => {

Loading…
Cancel
Save