fj-dc-ui/.svn/pristine/4d/4dc246fbc477bda4a9ac7d3c424f6d0b0b51dfbe.svn-base

var mapObject = null;
import {removeLayerById} from './removeLayerById.js'
export function addOneMapLayer(_self,map,item1,leftLayersAddedList){
    mapObject = map;
    var ol = _self.$ol;
    removeLayerById(_self,item1.id);
    let item = item1;
    var resolutions = [
        78271.5169628125,
        39135.758482729165,
        19567.879240041664,
        9783.939620020832,
        4891.9698113333325,
        2445.9849056666662,
        1222.9924528333331,
        611.4962264166666,
        305.7481132083333,
        152.87405660416664,
        76.43702697916666,
        38.2185148125,
        19.10925608333333,
        9.554628041666666,
        4.777314020833333,
        2.3886583333333333,
        1.1943291666666667,
        0.5971645833333333,
        0.29858229166666667,
        0.14929114583333333
    ]
    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 = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
    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:3857");
    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 //矩阵标识列表，与地图级数保持一致
    });
    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.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_vector,
                  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;
  };
}