// 在网页上使用高德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] && `${i.type}`, 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 }, } }