Newer
Older
KaiFengPC / src / views / sponeScreen / gisMF / mapboxVectorLayer.js
@jimengfei jimengfei on 14 Aug 3 KB updata
export default class newfiberMapBoxVectorLayer {
  //添加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 addGeojsonPolygonWithLabel(layerId, geojson) {
    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',
        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 removeByIds(layernameList) {
    layernameList.forEach(layerName => {
      if (newfiberMapbox.map.getLayer(layerName)) {
        newfiberMapbox.map.removeLayer(layerName);
        newfiberMapbox.map.removeSource(layerName);
      }
    });
  }
}