import axios from 'axios' import {_longLatTransform} from './mercatorToLngLat' import { mapConfig } from '../config/mapConfig.js'; let cancelRequest; var cancelToken = new axios.CancelToken(function executor(c) { cancelRequest = c console.log(c) // 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数,这里把该函数当参数用 }); var gateFlow = ''; var gateFlowWidthZoom = [ { zoom:0, gateFlow:1000, },{ zoom:1, gateFlow:1000, },{ zoom:2, gateFlow:1000, },{ zoom:3, gateFlow:1000, },{ zoom:4, gateFlow:700, },{ zoom:5, gateFlow:700, },{ zoom:6, gateFlow:400, },{ zoom:7, gateFlow:400, },{ zoom:8, gateFlow:200, },{ zoom:9, gateFlow:200, },{ zoom:10, gateFlow:100, },{ zoom:11, gateFlow:100, },{ zoom:12, gateFlow:'', },{ zoom:13, gateFlow:'', },{ zoom:14, gateFlow:'', },{ zoom:15, gateFlow:'', },{ zoom:16, gateFlow:'', },{ zoom:17, gateFlow:'', },{ zoom:18, gateFlow:'', } ] import {getShgcListForMap,getAllSZList} from '../../../api/zhxxAPI.js' import {removeLayerById,getShowOrFalse} from './removeLayerById.js' export function getSzList(_self){ var ol = _self.$ol; removeLayerById(_self,'szGraphicLayer'); gateFlowWidthZoom.forEach((item)=>{ if(item.zoom == _self.mapObject.getView().getZoom()){ // gateFlow = item.gateFlow; } }); var symbol = new ol.style.Style({//未督查 image: new ol.style.Icon(({ anchor: [0.5, 0.5], scale:0.4, src: '/src/views/zongHeXinXiOl/assets/sz.png' })) }); var maxLgtd = _self.mapObject.getView().calculateExtent()[2]; var maxLttd = _self.mapObject.getView().calculateExtent()[3]; var minLgtd = _self.mapObject.getView().calculateExtent()[0]; var minLttd = _self.mapObject.getView().calculateExtent()[1]; var bottomLeft = _longLatTransform({ x:minLgtd, y:minLttd }) var topRight = _longLatTransform({ x:maxLgtd, y:maxLttd }) var maxLgtd1 = topRight.x; var maxLttd1 = topRight.y; var minLgtd1 = bottomLeft.x; var minLttd1 = bottomLeft.y; cancelRequest; var iconFeature,vectorSource,vectorLayer; var features = []; getShgcListForMap(_self.userId,'6',_self.currentAdCode,'','','','','').then((res)=>{ if(res.data){ res.data.forEach((item)=>{ if(item.centerX && item.centerY){ // var pt = ol.proj.transform([item.centerX, item.centerY], "EPSG:4326", "EPSG:3857") var pt = _self.projTransform(new ol.geom.Point([Number(item.centerX), Number(item.centerY)]),mapConfig.wkid) iconFeature = new ol.Feature({ geometry: pt, name: '督查水闸' }); item['layerId'] = 'szGraphicLayer'; iconFeature.setProperties(item); iconFeature.setStyle(symbol); features.push(iconFeature) } }); vectorSource = new ol.source.Vector({ features: features }); vectorLayer = new ol.layer.Vector({ source: vectorSource, id:'szGraphicLayer', visible:true }); _self.mapObject.addLayer(vectorLayer) } }) } export function getAllSzList(_self,type){ var ol = _self.$ol; var show0 = true; var show1 = true; var show2 = true; if(type==1){ show0 = getShowOrFalse(_self,"szGraphicLayerAll0"); show1 = getShowOrFalse(_self,"szGraphicLayerAll1"); show2 = getShowOrFalse(_self,"szGraphicLayerAll2"); } removeLayerById(_self,'szGraphicLayerAll0'); removeLayerById(_self,'szGraphicLayerAll1'); removeLayerById(_self,'szGraphicLayerAll2'); gateFlowWidthZoom.forEach((item)=>{ if(item.zoom == _self.mapObject.getView().getZoom()){ gateFlow = item.gateFlow; } }); var maxLgtd = _self.mapObject.getView().calculateExtent()[2]; var maxLttd = _self.mapObject.getView().calculateExtent()[3]; var minLgtd = _self.mapObject.getView().calculateExtent()[0]; var minLttd = _self.mapObject.getView().calculateExtent()[1]; var bottomLeft = _longLatTransform({ x:minLgtd, y:minLttd }) var topRight = _longLatTransform({ x:maxLgtd, y:maxLttd }) var maxLgtd1 = topRight.x; var maxLttd1 = topRight.y; var minLgtd1 = bottomLeft.x; var minLttd1 = bottomLeft.y; var displayLevel = _self.mapObject.getView().getZoom()-3; var iconFeature,vectorSource,vectorLayer,vectorSource1,vectorLayer1,vectorSource2,vectorLayer2; var features = []; var features1 = []; var features2 = []; cancelRequest; getAllSZList(_self.currentAdCode,maxLgtd1,maxLttd1,minLgtd1,minLttd1,gateFlow,displayLevel).then((res)=>{ if(res.data){ res.data.forEach((item)=>{ if(item.centerX && item.centerY){ // var pt = ol.proj.transform([item.centerX, item.centerY], "EPSG:4326", "EPSG:3857") var pt = _self.projTransform(new ol.geom.Point([Number(item.centerX), Number(item.centerY)]),mapConfig.wkid) iconFeature = new ol.Feature({ geometry: pt, name: '水闸' }); item['layerId'] = 'szGraphicLayerAll'; iconFeature.setProperties(item); var src = ""; if(!item.state || item.state=="0"){ src = "/src/views/zongHeXinXiOl/assets/sz_0.png"; item['layerId'] = 'szGraphicLayerAll0'; } if(item.state=="1"){ src = "/src/views/zongHeXinXiOl/assets/sz.png"; item['layerId'] = 'szGraphicLayerAll1'; } if(item.state=="2"){ src = "/src/views/zongHeXinXiOl/assets/sz_2.png"; item['layerId'] = 'szGraphicLayerAll2'; } var symbol = new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 0.5], scale:0.4, src: src }), text: new ol.style.Text({ font: 'normal 14px 黑体', // // 对其方式 textAlign: 'center', // 基准线 textBaseline: 'middle', offsetY: -15, offsetX: 0, fill: new ol.style.Fill({ color: 'white' }), stroke: new ol.style.Stroke({ color: 'black', lineCap: 'butt', width: 4 }), padding: [5, 5, 5, 5], text: item.gateName, }) }); iconFeature.setStyle(symbol); if(!item.state || item.state=="0"){ features.push(iconFeature) } if(item.state=="1"){ features1.push(iconFeature) } if(item.state=="2"){ features2.push(iconFeature) } } }); vectorSource = new ol.source.Vector({ features: features }); vectorLayer = new ol.layer.Vector({ source: vectorSource, id:'szGraphicLayerAll0', visible:show0 }); vectorSource1 = new ol.source.Vector({ features: features1 }); vectorLayer1 = new ol.layer.Vector({ source: vectorSource1, id:'szGraphicLayerAll1', visible:show1 }); vectorSource2 = new ol.source.Vector({ features: features2 }); vectorLayer2 = new ol.layer.Vector({ source: vectorSource2, id:'szGraphicLayerAll2', visible:show2 }); _self.mapObject.addLayer(vectorLayer) _self.mapObject.addLayer(vectorLayer1) _self.mapObject.addLayer(vectorLayer2) } }) }