fj-dc-ui/.svn/pristine/67/67b334426ffe359eeabce5cbeb4a3bf07912e389.svn-base

var mapObject = null;
import {removeLayerById} from './removeLayerById.js'
import {mapConfig} from '../config/mapConfig'
export function addOneMapLayer(_self,map,item1,leftLayersAddedList){
  //debugger
    mapObject = map;
    var ol = _self.$ol;
    removeLayerById(_self,item1.id);
    let item = item1;
    // var resolutions = (mapConfig.wkid == '3857' || mapConfig.wkid =='102100')?mapConfig.resolutions_M:mapConfig.resolutions;
    // var matrixIds = (mapConfig.wkid == '3857' || mapConfig.wkid =='102100')?mapConfig.matrixIds_M:mapConfig.matrixIds;
    // var resolutions_vector = [78271.51696402045,39135.75848201023,19567.879241005114,9783.939620502557,4891.969810251278,2445.984905125639,1222.9924525628196,611.4962262814098,305.7481131407049,152.87405657035245,76.43702828517623,38.21851414258811,19.109257071294056,9.554628535647028,4.777314267823514,2.388657133911757];
    // var matrixIds_vector = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
    // var projection = ol.proj.get('EPSG:4326');
    // var projectionExtent = projection.getExtent();
    // var tileGrid = new ol.tilegrid.TileGrid({
    //     origin: ol.extent.getTopLeft(projectionExtent), //原点（左上角）
    //     resolutions: resolutions, //分辨率数组
    //     matrixIds: matrixIds //矩阵标识列表，与地图级数保持一致
    // });
    // var tileGrid_vector = new ol.tilegrid.TileGrid({
    //     origin: ol.extent.getTopLeft(projectionExtent), //原点（左上角）
    //     resolutions: resolutions_vector, //分辨率数组
    //     matrixIds: matrixIds_vector //矩阵标识列表，与地图级数保持一致
    // });
  var resolutions = mapConfig.resolutions;
  var matrixIds = mapConfig.matrixIds;
  var projection = ol.proj.get("EPSG:4326");
  var projectionExtent = projection.getExtent();
  // 水利一张图   湖南底图
  var tileGrid = new ol.tilegrid.TileGrid({
    origin: ol.extent.getTopLeft(projectionExtent), //原点（左上角）
    resolutions: resolutions, //分辨率数组
    matrixIds: matrixIds //矩阵标识列表，与地图级数保持一致
  });
    if(item.checked == false){
        if(item.id == "oneMap_nsbd"){
            var lyr = new ol.layer.Tile({
                id:item.id,
                source: new ol.source.XYZ({
                    // crossOrigin: "anonymous",
                    projection: projection,
                    tileGrid: tileGrid,
                    tileUrlFunction: function (tileCoord) {
                        var z = tileCoord[0];
                        var x = tileCoord[1];
                        var y = -tileCoord[2]-1;
                        return "http://ditu.mwr.gov.cn"+item.url+"&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=M_NSBD"+
                            "&STYLE=Default&FORMAT=image/png&TILEMATRIXSET="+item.tileMatrixSet+"&tilecol="+x+"&tilerow="+y+"&tilematrix="+z;
                    },
                    wrapX: true,
                })
            });
            mapObject.addLayer(lyr);
            var layers = new ol.layer.Image({
                id:item.id,
                source: new ol.source.ImageArcGISRest({
                    ratio: 1,
                    params: {},
                    url: 'http://gis.goldenwater.com.cn:6080/arcgis/rest/services/dc/nsbd/MapServer'
                })
            });
            mapObject.addLayer(layers)
        }else if(item.id == "oneMap_image_label"){//天地图注记
          var urlStr = ''
          if(mapConfig.wkid == ('102100' || '3857')){
            urlStr = 'http://t{0-7}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=gettile&version=1.0.0&v=4.0&tk=66b63588d9f26d7be3394ac366a45e9f&layer=cia&format=tiles&tilematrixset=w&tilecol={x}&tilerow={y}&tilematrix={z}'
            var lyr = new ol.layer.Tile({
                id:item.id,
                source: new ol.source.XYZ({
                    url:urlStr
                })
            });
            mapObject.addLayer(lyr);
          }else{
            urlStr = 'http://t{0-7}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=gettile&version=1.0.0&v=4.0&tk=66b63588d9f26d7be3394ac366a45e9f&layer=cia&format=tiles&tilematrixset=c&tilecol={x}&tilerow={y}&tilematrix={z}'
            var lyr = new ol.layer.Tile({
              id:item.id,
              source: new ol.source.XYZ({
                  projection:projection,
                  crossOrigin: 'anonymous',
                  url: urlStr
              }),
          });
            mapObject.addLayer(lyr);
          }

      }else if(item.id.indexOf('oneMap_image_mwr')>-1){//非矢量瓦片服务
          var lyr = new ol.layer.Tile({
            id:item.id,
            source: new ol.source.XYZ({
              // crossOrigin: "anonymous",
              projection: projection,
              tileGrid: tileGrid,
              tileUrlFunction: function (tileCoord) {
                var z = tileCoord[0];
                var x = tileCoord[1];
                var y = -tileCoord[2]-1;
                return "https://proxy.mwr.cn/"+item.url+"/wmts100?k=+GReDiP9JG4ddwpKQiyCWw==&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER="+item.tileMatrixSet.replace("Custom_","")+"&STYLE=Default&FORMAT=image/png&TILEMATRIXSET="+item.tileMatrixSet+"&tilecol="+x+"&tilerow="+y+"&tilematrix="+z;
              },
              wrapX: true,
            })
          });
          mapObject.addLayer(lyr);
          if(item.type && item.type != ""){
            leftLayersAddedList.push(item.type);
          }
        }else if(item.id.substring(7,13) != 'Vector'){//非矢量瓦片服务
            var lyr = new ol.layer.Tile({
                id:item.id,
                source: new ol.source.XYZ({
                    // crossOrigin: "anonymous",
                    projection: projection,
                    tileGrid: tileGrid,
                    tileUrlFunction: function (tileCoord) {
                        var z = tileCoord[0];
                        var x = tileCoord[1];
                        var y = -tileCoord[2]-1;
                        return "http://ditu.mwr.gov.cn"+item.url+"&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER="+item.tileMatrixSet.substring(7)+
                            "&STYLE=Default&FORMAT=image/png&TILEMATRIXSET="+item.tileMatrixSet+"&tilecol="+x+"&tilerow="+y+"&tilematrix="+z;
                    },
                    wrapX: true,
                })
            });
            mapObject.addLayer(lyr);
            if(item.type && item.type != ""){
                leftLayersAddedList.push(item.type);
            }
        }else{
            var tileUrl = item.url + "/tiles/{z}/{x}/{y}.mvt";
            if(item.id == 'oneMap_Vector_hp'){
              var lyr = new ol.layer.VectorTile({
                declutter: true,
                id:item.id,
                source: new ol.source.VectorTile({
                  projection: projection,
                  // url: tileUrl,
                  attributions:{'layerId':item.id},
                  tileUrlFunction: function (tileCoord) {
                    var z = tileCoord[0]+1;
                    var x = tileCoord[1];
                    var y = -tileCoord[2]-1;
                    return item.url+"/tiles/"+z+"/"+x+"/"+y+".mvt";
                  },
                  wrapX: false,
                  tileGrid: tileGrid,
                  format: new ol.format.MVT(),
                }),
                style: createMapboxStreetsV6Style(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text)
              });
            }
            else if(item.id == "oneMap_Vector_hl"){
              var lyr = new ol.layer.VectorTile({
                declutter: true,
                id:item.id,
                source: new ol.source.VectorTile({
                  // projection: projection,
                  // url: tileUrl,
                  tileUrlFunction: function (tileCoord) {
                    var z = tileCoord[0]+1;
                    var x = tileCoord[1];
                    var y = -tileCoord[2]-1;
                    return item.url+"/tiles/"+z+"/"+x+"/"+y+".mvt";
                  },
                  wrapX: false,
                  tileGrid: tileGrid_vector,
                  format: new ol.format.MVT(),
                }),
                style: createMapboxStreetsV6HlStyle(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text)
              });
            }
            else if(item.id == "oneMap_Vector_sk"){
              var lyr = new ol.layer.VectorTile({
                declutter: true,
                id:item.id,
                source: new ol.source.VectorTile({
                  // projection: projection,
                  // url: tileUrl,
                  tileUrlFunction: function (tileCoord) {
                    var z = tileCoord[0]+1;
                    var x = tileCoord[1];
                    var y = -tileCoord[2]-1;
                    return item.url+"/tiles/"+z+"/"+x+"/"+y+".mvt";
                  },
                  wrapX: false,
                  tileGrid: tileGrid_vector,
                  format: new ol.format.MVT(),
                }),
                style: createMapboxStreetsV6SkStyle(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text)
              });
            }
            else if(item.id == "oneMap_Vector_sz"){
              var lyr = new ol.layer.VectorTile({
                declutter: true,
                id:item.id,
                source: new ol.source.VectorTile({
                  // projection: projection,
                  // url: tileUrl,
                  tileUrlFunction: function (tileCoord) {
                    var z = tileCoord[0]+1;
                    var x = tileCoord[1];
                    var y = -tileCoord[2]-1;
                    return item.url+"/tiles/"+z+"/"+x+"/"+y+".mvt";
                  },
                  wrapX: false,
                  tileGrid: tileGrid_vector,
                  format: new ol.format.MVT(),
                }),
                style: createMapboxStreetsV6SzStyle(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text)
              });
            }
            else if(item.id == "oneMap_Vector_sdz"){
              var lyr = new ol.layer.VectorTile({
                declutter: true,
                id:item.id,
                source: new ol.source.VectorTile({
                  // projection: projection,
                  // url: tileUrl,
                  tileUrlFunction: function (tileCoord) {
                    var z = tileCoord[0]+1;
                    var x = tileCoord[1];
                    var y = -tileCoord[2]-1;
                    return item.url+"/tiles/"+z+"/"+x+"/"+y+".mvt";
                  },
                  wrapX: false,
                  tileGrid: tileGrid_vector,
                  format: new ol.format.MVT(),
                }),
                style: createMapboxStreetsV6SdzStyle(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Icon, ol.style.Text)
              });
            }

            mapObject.addLayer(lyr);
            if(item.type && item.type != ""){
                leftLayersAddedList.push(item.type);
            }
        }
    }else{
        mapObject.getLayers().forEach((val)=>{
            // console.log(val.getProperties().id)
            if(val.getProperties().id == item.id){
                // val.setVisible(false);
                mapObject.removeLayer(val)
                return;
            }
        })
        for(var i=0;i<leftLayersAddedList.length;i++){
            if(leftLayersAddedList[i] == item.type){
                leftLayersAddedList.splice(i,1);
            }
        }
    }
    item.checked = !item.checked;
}

function createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text) {
    var fill = new Fill({color: ''});
    var stroke = new Stroke({color: '', width: 1});
    var polygon = new Style({fill: fill});
    var strokedPolygon = new Style({fill: fill, stroke: stroke});
    var line = new Style({stroke: stroke});
    var text = new Style({text: new Text({
      text: '', fill: fill, stroke: stroke
    })});

    var styles = [];
    return function(feature, resolution) {
      var length = 0;
      var layer = feature.get('layer');
      var geom = feature.getGeometry().getType();
      console.log(geom);
      if (geom == 'Polygon') {
        fill.setColor('rgba(171,225,250,1.00)');
        styles[length++] = polygon;
      } else if (geom == 'Point') {
        text.getText().setText(feature.get('NAME'));
        text.getText().setFont('"SimSun Regular"');
        fill.setColor('rgba(255,255,255,1.00)');
        stroke.setColor('rgba(0,0,0,1.00)');
        stroke.setWidth(3);
        styles[length++] = text;
      }else {
        stroke.setColor('rgba(171,225,250,1.00)');
        stroke.setWidth(0.38);
        styles[length++] = line;
      }
      styles.length = length;
      return styles;
    };
  }
function createMapboxStreetsV6HlStyle(Style, Fill, Stroke, Icon, Text) {
  var fill = new Fill({color: ''});
  var stroke = new Stroke({color: '', width: 1});
  var polygon = new Style({fill: fill});
  var strokedPolygon = new Style({fill: fill, stroke: stroke});
  var line = new Style({stroke: stroke});
  var text = new Style({text: new Text({
      text: '', fill: fill, stroke: stroke
    })});
  var styles = [];
  return function(feature, resolution) {
    var length = 0;
    var layer = feature.get('layer');
    var geom = feature.getGeometry().getType();
    text.getText().setText(feature.get('RV_NAME'));
    text.getText().setFont('12px SimSun Regular');
    fill.setColor('rgba(255,255,255,1.00)');
    stroke.setColor("rgba(0,155,232,1.00)");
    styles[length++] = text;
    if(layer == 'RIVER_1@river'){
      stroke.setWidth(3.45);
      styles[length++] = line;
    } else if(layer == 'RIVER_2@river'){
      stroke.setWidth(2.05);
      styles[length++] = line;
    } else if(layer == 'RIVER_3@river'){
      stroke.setWidth(1.91);
      styles[length++] = line;
    } else if(layer == 'RIVER_4@river'){
      stroke.setWidth(0.78);
      styles[length++] = line;
    } else if(layer == 'RIVER_5@river'){
      stroke.setWidth(0.59);
      styles[length++] = line;
    } else if(layer == 'RIVER_6@river'){
      stroke.setWidth(0.38);
      styles[length++] = line;
    } else if(layer == 'RIVER_7@river') {
      stroke.setWidth(0.38);
      styles[length++] = line;
    }
    styles.length = length;
    return styles;
  };
}
function createMapboxStreetsV6SkStyle(Style, Fill, Stroke, Icon, Text) {
  var fill = new Fill({color: ''});
  var stroke = new Stroke({color: '', width: 1});
  var polygon = new Style({fill: fill});
  var strokedPolygon = new Style({fill: fill, stroke: stroke});
  var line = new Style({stroke: stroke});
  var text = new Style({text: new Text({
      text: '', fill: fill, stroke: stroke
    })});
  var styles = [];
  return function(feature, resolution) {
    var length = 0;
    var layer = feature.get('layer');
    var geom = feature.getGeometry().getType();
    console.log(layer);
    console.log(geom);
    // if (geom == 'Point') {
    //   text.getText().setText(feature.get('NAME'));
    //   text.getText().setFont('11.57px SimSun Regular');
    //   fill.setColor('rgba(115,178,255,1.00)');
    //   styles[length++] = text;
    // }
    if (geom == 'Point') {
      //返回一个样式
      return new Style({
        //把点的样式换成ICON图标
        image: new Icon({
          //设置图标偏移
          anchor: [0.5, 1.5],
          anchorXUnits: 'fraction',
          //图片路径
          // imgSize: [28],
          src:'/src/views/zongHeXinXiOl/assets/shuiku.png'
        }),
        //文本样式
        text: new Text({
          font: '12px SimSun Regular',
          //文本内容
          text: feature.get('NAME'),
          // text: "",
          //填充样式
          fill: new Fill({
            color: '#ffffff'
          }),
          stroke: new Stroke({
            color:'#000000'
          })
        })
      });
    }
    styles.length = length;
    return styles;
  };
}
function createMapboxStreetsV6SzStyle(Style, Fill, Stroke, Icon, Text) {
  var fill = new Fill({color: ''});
  var stroke = new Stroke({color: '', width: 1});
  var polygon = new Style({fill: fill});
  var strokedPolygon = new Style({fill: fill, stroke: stroke});
  var line = new Style({stroke: stroke});
  var text = new Style({text: new Text({
      text: '', fill: fill, stroke: stroke
    })});
  var styles = [];
  return function(feature, resolution) {
    var length = 0;
    var layer = feature.get('layer');
    var geom = feature.getGeometry().getType();
    console.log(layer);
    console.log(geom);
    if (geom == 'Point') {
      //返回一个样式
      return new Style({
        //把点的样式换成ICON图标
        image: new Icon({
          //设置图标偏移
          anchor: [0.5, 1.5],
          anchorXUnits: 'fraction',
          //图片路径
          src:'/src/views/zongHeXinXiOl/assets/shuizha.png'
        }),
        //文本样式
        text: new Text({
          font: '12px SimSun Regular',
          //文本内容
          text: feature.get('NAME'),
          // text: "",
          //填充样式
          fill: new Fill({
            color: '#ffffff'
          }),
          stroke: new Stroke({
            color:'#000000'
          })
        })
      });
    }
    styles.length = length;
    return styles;
  };
}
function createMapboxStreetsV6SdzStyle(Style, Fill, Stroke, Icon, Text) {
  var fill = new Fill({color: ''});
  var stroke = new Stroke({color: '', width: 1});
  var polygon = new Style({fill: fill});
  var strokedPolygon = new Style({fill: fill, stroke: stroke});
  var line = new Style({stroke: stroke});
  var text = new Style({text: new Text({
      text: '', fill: fill, stroke: stroke
  })});

  var styles = [];
  return function(feature, resolution) {
    var length = 0;
    var layer = feature.get('layer');
    var geom = feature.getGeometry().getType();
    console.log(layer);
    console.log(geom);
    if (geom == 'Point') {
      //返回一个样式
      return new Style({
        //把点的样式换成ICON图标
        image: new Icon({
          //设置图标偏移
          anchor: [0.5, 1.5],
          //标注样式的起点位置
          // anchorOrigin: 'top-right',
          // //X方向单位：分数
          anchorXUnits: 'fraction',
          // //Y方向单位：像素
          // anchorYUnits: 'pixels',
          // //偏移起点位置的方向
          // offsetOrigin: 'top-right',
          //透明度
          // imgSize: [20, 20],
          // opacity: 0.9,
          //图片路径
          src:'/src/views/zongHeXinXiOl/assets/shuidianzhan.png'
        }),
        //文本样式
        text: new Text({
          //对齐方式
          // textAlign: 'center',
          //文本基线
          // textBaseline: 'middle',
          //字体样式
          font: '12px SimSun Regular',
          //文本内容
          text: feature.get('NAME'),
          // text: "",
          //填充样式
          fill: new Fill({
            color: '#ffffff'
          }),
          stroke: new Stroke({
            color:'#000000'
          })
          //笔触
          // stroke: new Stroke({
          //   color: '#ffcc33',
          //   width: 2
          // })
        }),
        //层
        // zIndex: 20
      });
    }
    styles.length = length;
    return styles;
  };
}