| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- 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)
- }
- })
- }
|