superMap 常用方法整理

创建 VectorLayer

// 图层样式
export const VECTOR_LAYER_STYLE = {
  // 对比 - 选中高亮样式
  draw: {
    strokeColor: "rgba(0,255, 255)",
    strokeWidth: 3,
    fillColor: "rgba(0,255, 255, 0.1)",
  },
  // 查询返回结果渲染样式
  result: {
    strokeColor: "rgba(214, 28, 242)",
    strokeWidth: 3,
    fillColor: "rgba(214, 28, 242, 0.2)",
  },
  // 项目
  project: {
    strokeColor: "rgba(84, 179, 249)",
    strokeWidth: 3,
    fillColor: "rgba(84, 179, 249, 0.2)",
  },
  // test
  test: {
    strokeColor: "rgba(213 ,60 ,0)",
    strokeWidth: 3,
    fillColor: "rgba(213 ,60 ,0, 0.2)",
  },
}

// 创建 VectorLayer
export const createVectorLayer = (source, type) => {
  let sty = VECTOR_LAYER_STYLE[type]
  return new VectorLayer({
    source: source,
    style: new style.Style({
      stroke: new style.Stroke({
        color: sty.strokeColor,
        width: sty.strokeWidth,
      }),
      fill: new style.Fill({
        color: sty.fillColor,
      }),
    }),
  });
}

调用

this.resultLayer = createVectorLayer(
  new VectorSource({ wrapX: false }),
  "result"
);
this.map.addLayer(this.resultLayer);

// ...

// newLandFeatures 为 调用 getFeaturesByGeometry(...) 返回的数据
var vectorSource = new VectorSource({
  features: new GeoJSON().readFeatures(newLandFeatures),
  wrapX: false,
});
this.resultLayer.setSource(vectorSource);

两个geometry的相关操作

/**
 * 两个geometry的相关操作
 * @param {String}      params.serviceUrl    服务地址
 * @param {Array}       params.datasetNames  服务名称
 * @param {Geometry}    geometry             
 * @param {Geometry}    returnType           类型：CONTAIN包含关系，INTERSECT相交关系，WITHIN被包含关系 
 */
export const getFeaturesByGeometry = ({
  serviceUrl,
  datasetNames
}, geometry, returnType = 'INTERSECT') => {
  return new Promise((resolve, reject) => {
    var geometryParam = new GetFeaturesByGeometryParameters({
      datasetNames,
      geometry,
      spatialQueryMode: SpatialQueryMode[returnType], // INTERSECT
      toIndex: 30000,
      fields: ['SMID']
    });

    new FeatureService(serviceUrl).getFeaturesByGeometry(
      geometryParam,
      function(serviceResult) {
        if (serviceResult.result && serviceResult.result.features) {
          let features = serviceResult.result.features
          resolve(features)
        }
        reject(serviceResult)
      }, DataItemType.GEOJSON);
  })

}

调用

let projectParamsAll = {
  serviceUrl:
    this.superRef.host + "data-2019-2022gbzntxmjx-3/rest/data",
  datasetNames: ["2019-2022gbzntxmjx:HEJI"],
};
let projectFeatures = await getFeaturesByGeometry(
  projectParamsAll,
  geometry,
  "INTERSECT"
);

说明： geometry 为裁切面数据

对指定的某两个几何对象做叠加分析

/**
 * 两个 geometries 相交，对指定的某两个几何对象做叠加分析
 * @param {Object} params
 * @param {Object} params.serviceUrl    服务地址
 * @param {Object} params.returns       返回数据模式，area返回面积
 * @param {Object} params.geometries1   geometries1
 * @param {Object} params.geometries2   geometries2
 * @param {Object} param                传入参数，不做处理
 */
export const getAreaByTwoGeometry = ({
  serviceUrl,
  returns,
  geometries1,
  geometries2,
}, param = {}) => {
  return new Promise((resolve, reject) => {
    let overlayParameter = new GeometryOverlayAnalystParameters({
      sourceGeometries: geometries1,
      operateGeometries: geometries2,
      tolerance: 0,
      operation: OverlayOperationType.INTERSECT,
    });
    new SpatialAnalystService(serviceUrl).overlayAnalysis(
      overlayParameter,
      function(serviceResult) {
        if (
          serviceResult.type == "processCompleted" &&
          serviceResult.result.succeed
        ) {
          if (returns == 'area') {
            let totalArea = getAreaByFeatures({
              features: serviceResult.result || [],
              path: 'resultGeometry.geometry'
            })
            resolve({
              totalArea,
              ...param
            })
          } else {
            resolve(serviceResult)
          }

        }
      },
      DataItemType.GEOJSON
    );
  })
}

调用

let serviceUrl =
  this.superRef.host +
  "spatialAnalysis-TuZuoQiXiangZhenJieXian/restjsr/spatialanalyst";
let list = projectGeometryArr.map((it) => {
  return getAreaByTwoGeometry(
    {
      serviceUrl,
      returns: "area",
      geometries1: it.geometries,
      geometries2: landGeometries,
    },
    {
      XMMC: it.XMMC,
    }
  );
});

计算面积框选区域内面积

/**
 * 计算面积框选区域内面积
 * @param params
 * @param {String}    params.serviceUrl
 * @param {Array}     params.datasetNames
 * @param {Geometry}  geometry
 */
export const getAreaByGeometries = (params, geometry) => {
  return new Promise(async (resolve, reject) => {
    try {
      let features = await getFeaturesByGeometry(
        params,
        geometry,
        "INTERSECT"
      );
      let totalArea = getAreaByFeatures({
        features: features.features || []
      })
      resolve({
        features,
        totalArea
      })
    } catch (err) {}
  })
}

geometry 转 屏幕坐标

// geometry 转 屏幕坐标
export const geometryToBox = (geometry, map) => {
  let geoExtent = geometry.getExtent()
  let minXY = map.getPixelFromCoordinate([geoExtent[0], geoExtent[1]]);
  let maxXY = map.getPixelFromCoordinate([geoExtent[2], geoExtent[3]]);
  return [...minXY, ...maxXY]
}

通过feature获取geojson字符串

/**
 * 通过feature获取geojson字符串
 * @param map
 * @param feature
 * @param code
 * @param sourceCode
 * @returns {null|*}
 */
export const getGeoJsonByFeature = (map, feature, sourceCode, targetCode) => {

  if (!feature) {
    return null;
  }

  let view = map.getView();

  let geojson;

  if (feature instanceof Array) {

    geojson = (new GeoJSON()).writeFeatures(feature, {
      dataProjection: sourceCode || view.getProjection(), // 设定JSON数据使用的坐标系
      featureProjection: targetCode || view.getProjection() // 设定当前地图使用的feature的坐标系
    });

  } else {

    geojson = (new GeoJSON()).writeFeature(feature, {
      dataProjection: sourceCode || view.getProjection(), // 设定JSON数据使用的坐标系
      featureProjection: targetCode || view.getProjection() // 设定当前地图使用的feature的坐标系
    });
  }

  return geojson;
}

调用

getGeoJsonByFeature(this.map, feature)