init
This commit is contained in:
MeSHard
613
public/web/static/js/unity.js
Normal file
613
public/web/static/js/unity.js
Normal file
@@ -0,0 +1,613 @@
|
||||
|
||||
// 在网页上使用高德API
|
||||
// 在网页头部位置声明
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: 'c093878ad110aeadf3f2e6854ada1f6c',
|
||||
}
|
||||
var lat = '107.01256'
|
||||
var lng = '29.777093'
|
||||
|
||||
|
||||
const markers_pos = [
|
||||
["106.966331,29.793454", "l"],
|
||||
["107.003196,29.784273", "l"],
|
||||
["107.015512,29.792728", "l"],
|
||||
["107.045725,29.780213", "l"],
|
||||
["107.045544,29.777595", "l"],
|
||||
["107.054068,29.794411", "l"],
|
||||
["106.980254,29.813962", "l"],
|
||||
["106.987378,29.818169", "l"],
|
||||
["106.984116,29.822749", "l"],
|
||||
["107.044095,29.782846", "s"],
|
||||
["107.019512,29.785516", "l"],
|
||||
["107.050346,29.817561", "s"],
|
||||
["106.975558,29.815869", "s"],
|
||||
["106.984753,29.818885", "s"],
|
||||
["106.977999,29.83126", "s"],
|
||||
["106.980611,29.833619", "s"],
|
||||
["107.054259,29.798698", "u"],
|
||||
["107.025699,29.792106", "u"],
|
||||
["107.004842,29.77419", "u"],
|
||||
["107.007932,29.786705", "u"],
|
||||
["107.005658,29.796352", "u"],
|
||||
["106.980509,29.800336", "u"],
|
||||
["106.978621,29.804433", "u"],
|
||||
["106.995358,29.807672", "u"],
|
||||
["106.980853,29.825173", "u"],
|
||||
["106.987934,29.829491", "u"],
|
||||
["106.981754,29.836974", "u"],
|
||||
["106.985101,29.838724", "u"],
|
||||
["107.045577,29.777609", "c"],
|
||||
["107.003992,29.787983", "c"],
|
||||
["107.009292,29.795189", "c"],
|
||||
["106.99602,29.808735", "c"],
|
||||
["106.998767,29.810923", "c"],
|
||||
["106.986096,29.821339", "c"],
|
||||
["106.997383,29.849334", "c"],
|
||||
["106.997866,29.850711", "c"],
|
||||
["107.012382,29.857886", "c"],
|
||||
["107.044109,29.792248", "d"],
|
||||
["107.023338,29.787294", "d"],
|
||||
["106.995228,29.779473", "d"],
|
||||
["107.046662,29.795115", "h"],
|
||||
["107.021857,29.792918", "h"],
|
||||
["107.034066,29.804668", "h"],
|
||||
["107.056468,29.817998", "h"],
|
||||
["107.005817,29.842048", "h"],
|
||||
["106.972071,29.813358", "f"],
|
||||
["106.972329,29.819586", "f"],
|
||||
["106.970312,29.823495", "f"],
|
||||
["107.015416,29.811245", "p"],
|
||||
["107.005889,29.813517", "p"],
|
||||
["106.997391,29.827926", "p"],
|
||||
["106.990214,29.831379", "p"],
|
||||
["106.966769,29.796498", "m"],
|
||||
["106.972348,29.806702", "m"],
|
||||
["107.003763,29.811394", "m"],
|
||||
["106.990716,29.8175", "m"],
|
||||
["106.993463,29.827628", "m"],
|
||||
["107.002046,29.829191", "m"],
|
||||
["106.989858,29.837754", "m"],
|
||||
["107.002561,29.859194", "m"],
|
||||
["107.033013,29.762547", "g"],
|
||||
["106.994796,29.794357", "g"],
|
||||
["107.005525,29.798602", "g"],
|
||||
["106.98926,29.810444", "g"],
|
||||
["106.981493,29.812046", "g"],
|
||||
["106.979175,29.817445", "g"],
|
||||
["106.996492,29.835371", "g"],
|
||||
["106.97233,29.829526", "v"],
|
||||
["106.982973,29.815006", "v"],
|
||||
["107.011641,29.786033", "v"],
|
||||
["107.049921,29.792327", "v"],
|
||||
["107.033699,29.761504", "y"],
|
||||
["107.050737,29.797225", "y"],
|
||||
["107.005933,29.788696", "y"],
|
||||
["107.007864,29.791303", "y"],
|
||||
["106.99735,29.806125", "y"],
|
||||
["106.977437,29.813796", "y"],
|
||||
["106.98881,29.819399", "y"],
|
||||
["106.988874,29.850187", "y"],
|
||||
["107.013035,29.848363", "y"],
|
||||
["107.012993,29.798919", "_"],
|
||||
["107.011963,29.823942", "_"],
|
||||
["107.004409,29.831686", "_"],
|
||||
["107.072216,29.832951", "_"],
|
||||
["107.09127,29.863251", "_"],
|
||||
["107.049857,29.784133", "b"],
|
||||
["107.003251,29.768042", "b"],
|
||||
["107.011233,29.791508", "b"],
|
||||
["107.065714,29.822583", "b"],
|
||||
["107.084854,29.818897", "b"],
|
||||
["107.079286,29.864469", "b"],
|
||||
["106.991502,29.819465", "b"],
|
||||
["107.005321,29.849284", "b"]
|
||||
]
|
||||
|
||||
stopcolor = '#ff0000'
|
||||
livcolor = '#e89393'
|
||||
lv1color = "#ff0000"
|
||||
lv2color = "#a08e8e"
|
||||
lv3color = '#d2db00'
|
||||
lv4color = '#f29b76'
|
||||
overlayGroups = {
|
||||
fac: [],
|
||||
car: [],
|
||||
enter: {},
|
||||
road: [],
|
||||
truth: [],
|
||||
}
|
||||
overlayGroups.truth = {nor: [], no: [], warn: []};
|
||||
var truthColor = {nor: '#1b2538', warn: '#46A162', no: '#6A005F'}
|
||||
|
||||
|
||||
function dataHandle(data) {
|
||||
let lv1 = [], lv2 = [], lv3 = [], lv4 = [];
|
||||
data.filter(function (i) {
|
||||
var res;
|
||||
if (i.region_type === 8) {
|
||||
// console.log('停车场',i.name)
|
||||
//停车场
|
||||
overlayGroups.fac.push(lvOverRender(i, {
|
||||
fillColor: '#D1C667',//stopcolor
|
||||
fillOpacity: 1,
|
||||
strokeColor: '#D1C667',//stopcolor
|
||||
extData: {
|
||||
type: 'stop',
|
||||
name: i.name
|
||||
}
|
||||
}))
|
||||
} else if (i.region_type === 3) {
|
||||
// console.log('居住区',i.name)
|
||||
//居住区
|
||||
overlayGroups.fac.push(lvOverRender(i, {
|
||||
fillColor: '#F948F7',//livcolor
|
||||
fillOpacity: 1,
|
||||
strokeColor: '#F948F7',//livcolor
|
||||
extData: {
|
||||
type: 'live',
|
||||
name: i.name
|
||||
}
|
||||
}))
|
||||
} else if (i.region_type === 4) {
|
||||
// console.log('森林防护区',i.name)
|
||||
//森林防护区
|
||||
overlayGroups.fac.push(lvOverRender(i, {
|
||||
fillColor: '#26c533',
|
||||
strokeColor: '#26c533',
|
||||
fillOpacity: 1,
|
||||
extData: {
|
||||
type: 'tree',
|
||||
name: i.name
|
||||
}
|
||||
}))
|
||||
}else if (i.region_type === 1) {
|
||||
// console.log('工贸企业区',i.name)
|
||||
//工贸企业区
|
||||
overlayGroups.fac.push(lvOverRender(i, {
|
||||
fillColor: '#499C9F',
|
||||
strokeColor: '#499C9F',
|
||||
fillOpacity: 1,
|
||||
extData: {
|
||||
type: 'tree',
|
||||
name: i.name
|
||||
}
|
||||
}))
|
||||
}else if (i.region_type === 2) {
|
||||
// console.log('化工企业区',i.name)
|
||||
//化工企业区
|
||||
overlayGroups.fac.push(lvOverRender(i, {
|
||||
fillColor: '#535332',
|
||||
strokeColor: '#535332',
|
||||
fillOpacity: 1,
|
||||
extData: {
|
||||
type: 'tree',
|
||||
name: i.name
|
||||
}
|
||||
}))
|
||||
}else if (i.region_type === 5) {
|
||||
// console.log('道路区域',i.name)
|
||||
//道路区域
|
||||
overlayGroups.fac.push(lvOverRender(i, {
|
||||
fillColor: '#AED54C',
|
||||
strokeColor: '#AED54C',
|
||||
fillOpacity: 1,
|
||||
extData: {
|
||||
type: 'tree',
|
||||
name: i.name
|
||||
}
|
||||
}))
|
||||
}else if (i.region_type === 6) {
|
||||
// console.log('企业区域',i.name)
|
||||
//企业区域
|
||||
overlayGroups.fac.push(lvOverRender(i, {
|
||||
fillColor: '#C76813',
|
||||
strokeColor: '#C76813',
|
||||
fillOpacity: 1,
|
||||
extData: {
|
||||
type: 'tree',
|
||||
name: i.name
|
||||
}
|
||||
}))
|
||||
} else {
|
||||
res = true;
|
||||
}
|
||||
return res;
|
||||
|
||||
}).forEach(i => {
|
||||
|
||||
if (i.info) {
|
||||
let stys = {}
|
||||
if (i.region_type == 5) {
|
||||
stys = {
|
||||
[i.id]: {
|
||||
fillColor: '#000000',
|
||||
fillOpacity: .1,
|
||||
strokeColor: '#000000',
|
||||
}
|
||||
}
|
||||
}
|
||||
var over = lvOverRender(i, stys[i.id] || {})
|
||||
switch (i.region_lv) {
|
||||
case 22:
|
||||
lv1.push(over);
|
||||
break;
|
||||
case 20:
|
||||
lv2.push(over);
|
||||
break;
|
||||
case 21:
|
||||
lv3.push(over);
|
||||
break;
|
||||
default:
|
||||
lv4.push(over);
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
overlayGroups.enter = {
|
||||
lv1, lv2, lv3, lv4
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//公共方法
|
||||
function strToLL(str) {
|
||||
return str.split(';').map(i => new LngLat(...i.split(',').map(j => +j)))
|
||||
}
|
||||
|
||||
// 区域数据
|
||||
function lvOverRender(i, sty) {
|
||||
var style = {};
|
||||
|
||||
style = {
|
||||
fillOpacity: {
|
||||
1: 1,//0
|
||||
2: .5,
|
||||
3: .5,
|
||||
4: 1,
|
||||
},
|
||||
fillColor: {
|
||||
1: lv1color,
|
||||
2: lv2color,
|
||||
3: lv3color,
|
||||
4: lv4color
|
||||
},
|
||||
strokeOpacity: {
|
||||
1: 1,
|
||||
2: 1,
|
||||
3: 1,
|
||||
4: 1
|
||||
},
|
||||
strokeColor: {
|
||||
1: lv1color,
|
||||
2: lv2color,
|
||||
3: lv3color,
|
||||
4: lv4color
|
||||
},
|
||||
strokeWeight: {
|
||||
1: 3,
|
||||
2: 2,
|
||||
3: 0,
|
||||
4: 0,
|
||||
},
|
||||
zIndex: {
|
||||
1: 21,
|
||||
2: 22,
|
||||
3: 23,
|
||||
4: 24
|
||||
},
|
||||
strokeStyle: {
|
||||
1: 'dashed',//dashed
|
||||
2: 'solid',
|
||||
3: 'solid',
|
||||
4: 'solid',
|
||||
},
|
||||
}
|
||||
|
||||
var poy = new AMap.Polygon({
|
||||
map: map,
|
||||
path: i.info ? strToLL(i.info) : '',
|
||||
extData: i,
|
||||
...(function () {
|
||||
var obj = {};
|
||||
for (var j in style) {
|
||||
const region_lv = i.region_lv == 20 ? 2 : (i.region_lv == 21 ? 3 : (i.region_lv == 22 ? 1 : 4))
|
||||
obj[j] = style[j][region_lv]
|
||||
|
||||
if (region_lv == 1 && i.id == 1) {
|
||||
// 计算区域面积
|
||||
var area = Math.round(AMap.GeometryUtil.ringArea(strToLL(i.info)));
|
||||
// console.log(area)
|
||||
var text = new AMap.Text({
|
||||
position: new AMap.LngLat(107.01256, 29.777093),
|
||||
text: '区域面积' + area + '平方米',
|
||||
offset: new AMap.Pixel(-20, -20)
|
||||
})
|
||||
map.add(text);
|
||||
map.setFitView();
|
||||
}
|
||||
}
|
||||
return obj
|
||||
})(),
|
||||
...(sty || {})
|
||||
})
|
||||
|
||||
|
||||
map.add(poy)
|
||||
poy.on('click', function (e) {
|
||||
// console.log('区域信息',e.target.getExtData())
|
||||
openInfo(e.target.getExtData().name, e.lnglat)
|
||||
})
|
||||
|
||||
return poy;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 卡口
|
||||
var kk = `107.027841,29.759073;107.034279,29.762086;106.997726,29.824484;107.059954,29.820257;107.043592,29.83791;107.016477,29.871028;106.962953,29.790122`;
|
||||
function kkRender() {
|
||||
strToLL(kk).map(i => {
|
||||
new AMap.Marker({
|
||||
position: i,
|
||||
map: map,
|
||||
icon: '/web/static/icon/tuli_kakou.png'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
var carlist = [],
|
||||
timer,
|
||||
markerEvent = e => {
|
||||
let pos = e.pixel;
|
||||
this.carInfo = e.target.getExtData();
|
||||
this.infoVis = true;
|
||||
this.zjinforvis = false;
|
||||
this.infoPos = {
|
||||
left: `${pos.x + 10}px`,
|
||||
top: `${pos.y - 120}px`
|
||||
}
|
||||
timer && clearTimeout(timer);
|
||||
|
||||
timer = setTimeout(e => {
|
||||
this.infoVis = false
|
||||
}, 5e3);
|
||||
};
|
||||
|
||||
|
||||
function CarMarkers() {
|
||||
this.list = [];
|
||||
this.data = [];
|
||||
Object.defineProperty(this, 'ids', {
|
||||
get() {
|
||||
return this.data.map(i => i.id);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
CarMarkers.prototype.getMarker = function (id) {
|
||||
return this.list.filter(i => {
|
||||
return i.getExtData().id === id
|
||||
})[0];
|
||||
}
|
||||
CarMarkers.prototype.update = function (list) {
|
||||
let markers = [], marker;
|
||||
list.forEach(i => {
|
||||
let lnglat = new LngLat(i.longitude, i.latitude);
|
||||
i.type = "marker";
|
||||
|
||||
if (this.ids.includes(i.id)) {
|
||||
marker = this.getMarker(i.id);
|
||||
|
||||
if (lnglat.toString() !== marker.getPosition().toString()) {
|
||||
marker.setPosition(lnglat);
|
||||
}
|
||||
|
||||
var _data = marker.getExtData();
|
||||
|
||||
marker.setIcon('icon/' + i.status + '.png'/*_data.vehicle_type?'icon/dingwei_red.png':_data.vec1?'icon/dingwei_blue.png':'icon/dingwei_white.png'*/);
|
||||
|
||||
|
||||
marker.setExtData(i);
|
||||
|
||||
|
||||
} else {
|
||||
marker = new AMap.Marker({
|
||||
icon: '/web/static/icon/' + i.status + '.png',//i.vehicle_type?'icon/dingwei_red.png':i.vec1?'icon/dingwei_blue.png':'icon/dingwei_white.png',
|
||||
position: lnglat,
|
||||
offset: new AMap.Pixel(-12, -12),
|
||||
zIndex: 30 + i.id,
|
||||
map: map,
|
||||
extData: i
|
||||
});
|
||||
marker.on('click', markerEvent)
|
||||
}
|
||||
|
||||
/*if(this.form[1].zh.includes(i.status)){
|
||||
marker.show();
|
||||
}else{
|
||||
marker.hide();
|
||||
}*/
|
||||
|
||||
markers.push(marker)
|
||||
})
|
||||
let removeArr = [];
|
||||
this.list.forEach(i => {
|
||||
if (!markers.includes(i)) {
|
||||
removeArr.push(i)
|
||||
}
|
||||
})
|
||||
map.remove(removeArr)
|
||||
this.data = list;
|
||||
this.list = markers;
|
||||
// this.form[1].change();
|
||||
}
|
||||
|
||||
|
||||
let car_markers = new CarMarkers();
|
||||
|
||||
|
||||
// 配置地图icon
|
||||
function showMarkers() {
|
||||
const icons = {
|
||||
_: '/web/static/icon/ht.png',
|
||||
g: '/web/static/icon/fq.png',
|
||||
u: '/web/static/icon/lv3.png',
|
||||
c: '/web/static/icon/lv4.png',
|
||||
l: '/web/static/icon/2.png',
|
||||
y: '/web/static/icon/d.png',
|
||||
v: '/web/static/icon/rs.png',
|
||||
d: '/web/static/icon/w.png',
|
||||
h: '/web/static/icon/ws.png',
|
||||
s: '/web/static/icon/lv1.png',
|
||||
b: '/web/static/icon/ot.png',
|
||||
m: '/web/static/icon/pp.png',
|
||||
f: '/web/static/icon/fs.png',
|
||||
p: '/web/static/icon/b.png',
|
||||
stop: '/web/static/icon/p.png'
|
||||
}
|
||||
let geoJson = markers_pos.map(i => {
|
||||
console.log('iiiiiii',i)
|
||||
return {
|
||||
path: i[0],
|
||||
type: i[1]
|
||||
}
|
||||
}),
|
||||
markers = geoJson.map(i => {
|
||||
return new AMap.Marker({
|
||||
position: strToLL(i.path)[0],
|
||||
icon: new AMap.Icon({
|
||||
size: new AMap.Size(23, 23),
|
||||
image: icons[i.type],
|
||||
imageSize: new AMap.Size(15, 15),
|
||||
}),
|
||||
anchor: 'bottom-center',
|
||||
offset: new AMap.Pixel(0, 0),
|
||||
content: !icons[i.type] && `<span style="color:#fff">${i.type}</span>`,
|
||||
map: map,
|
||||
extData: i,
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
overlayGroups.fac = markers;
|
||||
return markers;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 提取vm公共部分
|
||||
var mixin = {
|
||||
filters: { //过滤器
|
||||
status(n) {
|
||||
console.log('过滤器',n)
|
||||
switch (n) {
|
||||
case -1:
|
||||
return '区域外行驶';
|
||||
case 0:
|
||||
return '正常';
|
||||
case 1:
|
||||
return '超速';
|
||||
case 2:
|
||||
return '禁行/禁停';
|
||||
case 3:
|
||||
return '禁停/禁行';
|
||||
case 4:
|
||||
return '未上报';
|
||||
case 5:
|
||||
return '超最大数量'
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
name: '封闭园区运营中心',
|
||||
currentTime: '',
|
||||
showSidebar: false,
|
||||
infoPos: {
|
||||
left: '0px',
|
||||
top: '0px'
|
||||
},
|
||||
zjinfor: {},
|
||||
zjinforvis: false,
|
||||
carInfo: {},
|
||||
infoVis: false,
|
||||
vis: false,
|
||||
linKey: "",
|
||||
search: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
enterModel() {
|
||||
|
||||
var ef = this.form.filter(i => i.tit === '周界')[0],
|
||||
sf = this.form.filter(i => i.tit === '周界筛选禁行')[0];
|
||||
return {
|
||||
lv: ef.model,
|
||||
isSec: sf.val,
|
||||
sec: sf.model
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.startTimer()
|
||||
this.getData()
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.stopTimer(); // 清除定时器以避免内存泄漏
|
||||
},
|
||||
methods: {
|
||||
// 头部跳转
|
||||
toPath(url) {
|
||||
window.location.href = '/index/datav/' + url
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 开启定时器
|
||||
startTimer() {
|
||||
this.timer = setInterval(() => {
|
||||
this.currentTime = this.getCurrentDateTime();
|
||||
}, 1000);
|
||||
},
|
||||
// 关闭定时器
|
||||
stopTimer() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
// 获取日期
|
||||
getCurrentDateTime() {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = this.padNumber(now.getMonth() + 1);
|
||||
const day = this.padNumber(now.getDate());
|
||||
const hours = this.padNumber(now.getHours());
|
||||
const minutes = this.padNumber(now.getMinutes());
|
||||
const seconds = this.padNumber(now.getSeconds());
|
||||
return (
|
||||
year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
|
||||
);
|
||||
},
|
||||
// 格式化<10的值
|
||||
padNumber(num) {
|
||||
return num < 10 ? '0' + num : num;
|
||||
},
|
||||
//隐藏或开启侧边栏
|
||||
toggleSidebar() {
|
||||
this.showSidebar = !this.showSidebar
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user