export default class newfiberMapBoxVectorLayer {
  //添加circle
  static addGeojsonCircle(layerId, geojson, minzoom) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addSource(layerId + '_label', {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'circle',
        source: layerId,
        paint: {
          'circle-color': ['get', 'fillcolor'],
          'circle-radius': 10,
        },
      });
      newfiberMapbox.map.addLayer({
        id: layerId + '_label',
        type: 'symbol',
        minzoom: minzoom ? minzoom : 0,
        source: layerId + '_label',
        paint: {
          'text-color': 'rgba(255, 255, 255, 1)',
          'text-halo-color': 'rgba(14, 139, 90, 1)',
          'text-halo-width': 2,
        },
        layout: {
          'text-field': '{name}',
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-line-height': 3,
          'text-anchor': 'bottom',
          'text-max-width': 50,
        },
      });
    }
  }

  //添加geojson Symbol
  static addGeojsonSymbol(layerId, geojson, icon) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.loadImage(icon, (error, image) => {
        if (error) throw error;

        // Add the image to the map style.
        newfiberMapbox.map.addImage(layerId, image);

        // Add a data source containing one point feature.
        newfiberMapbox.map.addSource(layerId, {
          type: 'geojson',
          data: geojson,
        });
        newfiberMapbox.map.addLayer({
          id: layerId,
          type: 'symbol',
          source: layerId,
          paint: {
            'text-color': 'rgba(255, 255, 255, 1)',
            'text-halo-color': 'rgba(14, 139, 90, 1)',
            'text-halo-width': 2,
          },
          layout: {
            'icon-image': layerId,
            'text-allow-overlap': true,
            'icon-allow-overlap': true,
            'icon-anchor': 'center',
            'icon-size': 0.8,
            'text-field': '{name}',
            'text-font': ['KlokanTech Noto Sans Regular'],
            'icon-rotate': ['get', 'bearing'],
            'text-size': 16,
            'text-line-height': 3,
            'text-anchor': 'bottom',
            'text-max-width': 50,
            'text-offset': [0, 3],
          },
        });
      });
    }
  }
  //添加geojson线
  static addGeojsonLine(layerId, geojson, lineWidth, lineOpacity, lineBlur) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'line',
        source: layerId,
        paint: {
          'line-color': ['get', 'fillcolor'],
          'line-width': lineWidth ? lineWidth : 3,
          'line-opacity': lineOpacity ? lineOpacity : 1,
          'line-blur': lineBlur ? lineBlur : 0,
        },
      });
    }
  }
  //添加有标注的geojson线
  static addGeojsonLineWithLabel(layerId, geojson, lineWidth, minzoom) {
    let labelGeojson = this.getGeojsonCenterPoint(geojson);
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addSource(layerId + '_label', {
        type: 'geojson',
        data: labelGeojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'line',
        source: layerId,
        paint: {
          'line-color': ['get', 'fillcolor'],
          'line-width': lineWidth ? lineWidth : 3,
        },
      });
      newfiberMapbox.map.addLayer({
        id: layerId + '_label',
        type: 'symbol',
        minzoom: minzoom ? minzoom : 0,
        source: layerId + '_label',
        paint: {
          'text-color': 'rgba(255, 255, 255, 1)',
          'text-halo-color': 'rgba(14, 139, 90, 1)',
          'text-halo-width': 2,
        },
        layout: {
          'text-field': '{name}',
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-line-height': 3,
          'text-anchor': 'bottom',
          'text-max-width': 50,
        },
      });
    }
  }
  //添加geojson面
  static addGeojsonPolygon(layerId, geojson) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });

      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'fill',
        source: layerId,
        paint: {
          'fill-color': ['get', 'fillcolor'] || 'rgba(154,104,171,0.8)',
        },
      });
    }
  }

  //添加有标注的geojson面
  static addGeojsonPolygonWithLabel(layerId, geojson, minzoom) {
    let labelGeojson = this.getGeojsonCenterPoint(geojson);
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addSource(layerId + '_label', {
        type: 'geojson',
        data: labelGeojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'fill',
        source: layerId,
        paint: {
          'fill-color': ['get', 'fillcolor'],
        },
      });
      newfiberMapbox.map.addLayer({
        id: layerId + '_label',
        type: 'symbol',
        source: layerId + '_label',
        minzoom: minzoom ? minzoom : 0,
        paint: {
          'text-color': 'rgba(255, 255, 255, 1)',
          'text-halo-color': 'rgba(14, 139, 90, 1)',
          'text-halo-width': 2,
        },
        layout: {
          'text-field': '{name}',
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-line-height': 3,
          'text-anchor': 'bottom',
          'text-max-width': 50,
        },
      });
    }
  }
  //获取geojson中心点
  static getGeojsonCenterPoint(geojson) {
    let features = [];
    geojson.features.forEach(element => {
      let feature = turf.center(element, element);
      features.push(feature);
    });
    return {
      type: 'FeatureCollection',
      features: features,
    };
  }
  //添加image图层
  static addImageToMap(layerId, coordinates, imageUrl) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'image',
        url: imageUrl,
        coordinates: coordinates,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'raster',
        source: layerId,
        paint: {},
      });
    }
  }
  //添加geoserver图层
  static addWMSLayer(layerName) {
    if (!newfiberMapbox.map.getLayer(layerName)) {
      newfiberMapbox.map.addSource(layerName, {
        type: 'raster',
        // use the tiles option to specify a WMS tile source URL
        // https://docs.mapbox.comhttps://docs.mapbox.com/style-spec/reference/sources/
        tiles: [
          '/geoserver/demo/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&' +
            `layers=${layerName}`,
        ],
        tileSize: 256,
      });
      newfiberMapbox.map.addLayer({
        id: layerName,
        type: 'raster',
        source: layerName,
        paint: {},
      });
    }
  }
  //添加轨迹动态线
  static addDynamicRoute = (layerId, geojson, icon) => {
    window.routeTimer = null;
    window.routeTimer_1 = null;
    this.addGeojsonLine(layerId, geojson, 10);
    let symbolGeojson = turf.featureCollection([
      turf.point(geojson.features[0].geometry.coordinates[0], {
        bearing: turf.bearing(
          turf.point(geojson.features[0].geometry.coordinates[0]),
          turf.point(geojson.features[0].geometry.coordinates[1])
        ),
      }),
    ]);
    let symbolGeojson_1 = turf.featureCollection([
      turf.point(geojson.features[1].geometry.coordinates[0], {
        bearing: turf.bearing(
          turf.point(geojson.features[1].geometry.coordinates[0]),
          turf.point(geojson.features[1].geometry.coordinates[1])
        ),
      }),
    ]);
    this.addGeojsonSymbol(layerId + '_Symbol', symbolGeojson, icon);
    this.addGeojsonSymbol(layerId + '_Symbol_1', symbolGeojson_1, icon);
    const lineDistance = turf.length(geojson.features[0]);
    const lineDistance_1 = turf.length(geojson.features[1]);
    const arc = [];
    const arc_1 = [];
    const steps = 100;
    for (let i = 0; i < lineDistance; i += lineDistance / steps) {
      const segment = turf.along(geojson.features[0], i);
      arc.push(segment.geometry.coordinates);
    }
    for (let i = 0; i < lineDistance_1; i += lineDistance_1 / steps) {
      const segment = turf.along(geojson.features[1], i);
      arc_1.push(segment.geometry.coordinates);
    }
    geojson.features[0].geometry.coordinates = arc;
    geojson.features[1].geometry.coordinates = arc_1;
    let counter = 0;
    let counter_1 = 0;

    const start_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 - 1 : counter_1];
    const end_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 : counter_1 + 1];
    setTimeout(() => {
      window.routeTimer = setInterval(() => {
        const start = geojson.features[0].geometry.coordinates[counter >= steps ? counter - 1 : counter];
        const end = geojson.features[0].geometry.coordinates[counter >= steps ? counter : counter + 1];
        if (!start || !end) {
          return;
        }
        symbolGeojson.features[0].geometry.coordinates = geojson.features[0].geometry.coordinates[counter];
        symbolGeojson.features[0].properties.bearing = turf.bearing(turf.point(start), turf.point(end));

        newfiberMapbox.map.getSource(layerId + '_Symbol').setData(symbolGeojson);
        counter = counter + 1;
        if (counter > steps) {
          clearInterval(window.routeTimer);
        }
      }, 100);
      window.routeTimer_1 = setInterval(() => {
        const start_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 - 1 : counter_1];
        const end_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 : counter_1 + 1];
        if (!start_1 || !end_1) {
          return;
        }
        symbolGeojson_1.features[0].geometry.coordinates = geojson.features[1].geometry.coordinates[counter_1];
        symbolGeojson_1.features[0].properties.bearing = turf.bearing(turf.point(start_1), turf.point(end_1));

        newfiberMapbox.map.getSource(layerId + '_Symbol_1').setData(symbolGeojson_1);
        counter_1 = counter_1 + 1;
        if (counter_1 > steps) {
          clearInterval(window.routeTimer_1);
        }
      }, 100);
    }, 1000);
    // if (!start || !end || !start_1 || !end_1) {
    //   return;
    // }

    // symbolGeojson_1.features[0].geometry.coordinates = geojson.features[1].geometry.coordinates[counter_1];
    // symbolGeojson_1.features[0].properties.bearing = turf.bearing(turf.point(start_1), turf.point(end_1));
  };
  //移除图层
  static removeByIds(layernameList) {
    layernameList.forEach(layerName => {
      if (newfiberMapbox.map.getLayer(layerName)) {
        newfiberMapbox.map.removeLayer(layerName);
        newfiberMapbox.map.removeSource(layerName);
      }
      if (newfiberMapbox.map.getSource(layerName)) {
        newfiberMapbox.map.removeLayer(layerName);
        newfiberMapbox.map.removeSource(layerName);
      }
    });
  }
}