gmap-ol/dist/PointUtil/PointUtil.js

A set of helper classes for working with openLayers.

import { Vector as VectorLayer } from 'ol/layer';
import { Cluster, Vector as VectorSource } from 'ol/source';
import GeoJSON from 'ol/format/GeoJSON';
import { getOptionsStyle } from '../MapUtil/MapUtil';

/**
 * Adds a new vector layer from a geojson file.
 * @param {import("ol/Map").default} map the map to add the layer to
 * @param {File} file the file to read the geojson from
 */
export function addPointLayer(olmap, pointGeoJSON, pointOptions) {
  if (olmap === null || olmap === undefined) {
    return; // 终止函数执行
  }
  // 设置站点样式
  const getFeatureStyles = (feature) => {
    const properties = feature.getProperties();
    const textFieldName = pointOptions.textFieldName ? properties[pointOptions.textFieldName] : '';
    const styles = {
      image: {
        src: '',
        anchor: [0.5, 0.5],
        scale: 1,
        ...pointOptions.styles?.image,
      },
      text: {
        font: '11px Microsoft YaHei',
        textAlign: 'center',
        textBaseline: 'middle',
        fill: { color: 'rgba(0, 0, 0, 0.85)' },
        stroke: {
          color: 'rgba(255, 255, 255, 0.75)',
          width: 2,
        },
        offsetY: 16,
        text: '',
        ...pointOptions.styles?.text,
      },
    };
    if (pointOptions.styles.circle) {
      styles.image = { circle: pointOptions.styles.circle };
    }
    if (pointOptions.icon) {
      styles.image.src = pointOptions.icon;
    }
    if (pointOptions.textColor) {
      styles.text.fill.color = pointOptions.textColor;
    }
    if (textFieldName !== '') {
      styles.text.text = textFieldName;
    }
    return getOptionsStyle(styles);
  };

  const vectorLayer = new VectorLayer({
    className: `${pointOptions.className ? pointOptions.className : ''}`,
    source: new VectorSource({
      features: new GeoJSON().readFeatures(pointGeoJSON),
    }),
    style: getFeatureStyles,
    zIndex: pointOptions.zIndex ? pointOptions.zIndex : 5,
    visible: pointOptions?.visible !== undefined && !pointOptions?.visible ? false : true,
  });
  vectorLayer.set('layerName', `${pointOptions.layerName ? pointOptions.layerName : ''}`);
  vectorLayer.set('pickLayerName', `Point${pointOptions.layerName ? pointOptions.layerName : ''}`);
  if (pointOptions.hoverStyle) {
    vectorLayer.set('tipsLayerName', `tipsLayerName${pointOptions.layerName ? pointOptions.layerName : ''}Point`);
    vectorLayer.set('hoverLayerName', `hoverLayerName${pointOptions.layerName ? pointOptions.layerName : ''}Point`);
  }
  olmap.addLayer(vectorLayer);
}

/**
 * Adds a new vector layer from a geojson file.
 * @param {import("ol/Map").default} map the map to add the layer to
 * @param {File} file the file to read the geojson from
 */
export function addPointDataLayer(olmap, pointData, pointOptions) {
  if (olmap === null || olmap === undefined) {
    return; // 终止函数执行
  }
  // 地图站点级别
  const level = [2, 4, 6, 8];
  const pointLevelData = { 2: [], 4: [], 6: [], 8: [] };

  if (pointData && pointData.length === 0) return {};
  for (let i = 0; i < pointData.length; i++) {
    for (let j = 0; j < level.length; j++) {
      let levelNum = 2;
      if (pointOptions.zoomFieldName) {
        levelNum = pointData[i][pointOptions.zoomFieldName];
      }
      if (levelNum === level[j]) {
        pointLevelData[`${level[j]}`].push(pointData[i]);
      }
    }
  }
  const formatDataToLayerByStationType = (pointData, levelKey) => {
    const temp = {};
    function formatFeature(data) {
      const LGTD = data.LGTD ? data.LGTD : data.lgtd;
      const LTTD = data.LTTD ? data.LTTD : data.lttd;
      return {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [Number(LGTD), Number(LTTD)],
        },
        properties: data,
      };
    }
    // 将数据按站点类型分类，并转为GeoJSON<FeatureCollection>格式
    pointData.forEach((item) => {
      const stationType = 'Point';
      if (Object.prototype.hasOwnProperty.call(temp, stationType)) {
        temp[stationType].features.push(formatFeature(item));
      } else {
        temp[stationType] = {
          type: 'FeatureCollection',
          features: [formatFeature(item)],
        };
      }
    });

    // 将分类数据转为地图控件所需图层数据
    const layers = [];
    Object.keys(temp).forEach((key) => {
      layers.push({
        type: key,
        zoom: levelKey,
        data: temp[key],
      });
    });
    return layers;
  };

  // 获取按站点类型分类的图层
  const layers = [];
  for (const key in pointLevelData) {
    const pointData = pointLevelData[key];
    if (pointData.length > 0) {
      const layer = formatDataToLayerByStationType(pointData, key);
      layers.push(...layer);
    }
  }

  // 地图添加图层数据
  layers.forEach((layer) => {
    // 设置站点样式
    const getFeatureStyles = (feature) => {
      const properties = feature.getProperties();
      const textFieldName = pointOptions.textFieldName ? properties[pointOptions.textFieldName] : '';
      const styles = {
        image: {
          src: '',
          anchor: [0.5, 0.5],
          scale: 1,
          ...pointOptions.styles?.image,
        },
        text: {
          font: '11px Microsoft YaHei',
          textAlign: 'center',
          textBaseline: 'middle',
          fill: { color: 'rgba(0, 0, 0, 0.85)' },
          stroke: {
            color: 'rgba(255, 255, 255, 0.75)',
            width: 2,
          },
          offsetY: 16,
          text: '',
          ...pointOptions.styles?.text,
        },
      };
      if (pointOptions.icon) {
        styles.image.src = pointOptions.icon;
      }
      if (pointOptions.textColor) {
        styles.text.fill.color = pointOptions.textColor;
      }
      if (textFieldName !== '') {
        styles.text.text = textFieldName;
      }
      feature.set('NAME', textFieldName);
      return getOptionsStyle(styles);
    };

    // 创建矢量源
    let vectorSourceData = new VectorSource({
      features: new GeoJSON().readFeatures(layer.data),
    });

    // 是否创建聚合源，默认设置聚合距离为30像素
    if (pointOptions.cluster) {
      const clusterSource = new Cluster({
        distance: pointOptions.distance ? pointOptions.distance : 30,
        source: vectorSourceData,
      });
      vectorSourceData = clusterSource;
    }

    const vectorLayer = new VectorLayer({
      className: `${pointOptions.className ? pointOptions.className : ''}`,
      source: vectorSourceData,
      zIndex: pointOptions.zIndex ? pointOptions.zIndex : 5,
      minZoom: parseInt(layer.zoom) + Number(`${pointOptions.zoomNumber ? pointOptions.zoomNumber : 5.5}`),
      visible: pointOptions?.visible !== undefined && !pointOptions?.visible ? false : true,
      style: getFeatureStyles,
    });
    vectorLayer.set('layerName', `${pointOptions.layerName ? pointOptions.layerName : ''}`);
    vectorLayer.set('pickLayerName', `Point${pointOptions.layerName ? pointOptions.layerName : ''}`);
    const hoverStyle = pointOptions?.hoverStyle !== undefined && !pointOptions?.hoverStyle ? false : true;
    if (hoverStyle) {
      vectorLayer.set('tipsLayerName', `tipsLayerName${pointOptions.layerName ? pointOptions.layerName : ''}_Point`);
      vectorLayer.set('hoverLayerName', `hoverLayerName${pointOptions.layerName ? pointOptions.layerName : ''}_Point`);
    }
    olmap.addLayer(vectorLayer);
  });
}