arcgis 利用shpjs 加载shp 文件

常常我们需要上传附件来加载图形，一般常用的有csv geojson 之类的 但是有些奇葩客户就要你加载shp 啊 gdb啊 甚至cad
关于cad 这个 后面我再说 今天我们来讲讲shp 怎么通过arcgis 来加载

首先我们构建geojson转换类

GeoJsonConverter

export class GeoJsonConverter {
/Converts GeoJSON FeatureCollection, Feature, or Geometry to ESRI Rest Featureset, Feature, or Geometry/
constructor(geoJsonObject) {
let outObj, i, gcFeats, esriFeat;
if (geoJsonObject) {
if (geoJsonObject.type === 'FeatureCollection') {
outObj = {
features: []
};
gcFeats = geoJsonObject.features;
for (i = 0; i < gcFeats.length; i++) {
esriFeat = this.gcFeatureToEsriFeature(gcFeats[i]);
if (esriFeat) {
outObj.features.push(esriFeat);
}
}
} else if (geoJsonObject.type === 'Feature') {
outObj = gcFeatureToEsriFeature(geoJsonObject);
} else {
outObj = this.gcGeometryToEsriGeometry(geoJsonObject);
}
}
return outObj;
}
/Converts GeoJSON feature to ESRI REST Feature. Input parameter is a GeoJSON Feature object/
gcFeatureToEsriFeature(gcFeature) {
let esriFeat, prop, esriAttribs;
if (gcFeature) {
esriFeat = {};
if (gcFeature.geometry) {
esriFeat.geometry = this.gcGeometryToEsriGeometry(gcFeature.geometry);
}
if (gcFeature.properties) {
esriAttribs = {};
for (prop in gcFeature.properties) {
esriAttribs[prop] = gcFeature.properties[prop];
}
esriFeat.attributes = esriAttribs;
}
}
return esriFeat;
}
/Converts GeoJSON geometry to ESRI geometry. The ESRI geometry is only allowed to contain one type of geometry, so if the GeoJSON geometry is a GeometryCollection, then only geometries compatible with the first geometry type in the collection are added to the ESRI geometry Input parameter is a GeoJSON geometry object./
gcGeometryToEsriGeometry(gcGeom) {
let esriGeomInfo, gcGeometriesToConvert, i, g, coords;
//if geometry collection, get info about first geometry in collection
if (gcGeom.type === 'GeometryCollection') {
const geomCompare = gcGeom.geometries[0];
gcGeometriesToConvert = [];
esriGeomInfo = this.gcGeomTypeToEsriGeomInfo(geomCompare.type);

//loop through collection and only add compatible geometries to the array
//of geometries that will be converted
for (i = 0; i < gcGeom.geometries.length; i++) {
if (this.isCompatible(esriGeomInfo.type, gcGeom.geometries[i].type)) {
gcGeometriesToConvert.push(gcGeom.geometries[i]);
}
}
} else {
esriGeomInfo = this.gcGeomTypeToEsriGeomInfo(gcGeom.type);
gcGeometriesToConvert = [gcGeom];
}
 
//if a collection contained multiple points, change the ESRI geometry
//type to MultiPointz
if (esriGeomInfo.type === 'esriGeometryPoint' && gcGeometriesToConvert.length > 1) {
esriGeomInfo = this.gcGeomTypeToEsriGeomInfo('MultiPoint');
}
 
//make new empty ESRI geometry object
const esriGeometry = {
//type: esriGeomInfo.type,
spatialReference: {
wkid: 4326
}
};
//perform conversion
if (esriGeomInfo.type === 'esriGeometryPoint') {
esriGeometry['type'] = 'point';
if (
!gcGeometriesToConvert[0] ||
!gcGeometriesToConvert[0].coordinates ||
gcGeometriesToConvert[0].coordinates.length === 0
) {
esriGeometry.x = null;
} else {
esriGeometry.x = gcGeometriesToConvert[0].coordinates[0];
esriGeometry.y = gcGeometriesToConvert[0].coordinates[1];
}
} else {
esriGeometry[esriGeomInfo.geomHolder] = [];
for (i = 0; i < gcGeometriesToConvert.length; i++) {
coords = this.gcCoordinatesToEsriCoordinates(gcGeometriesToConvert[i]);
for (g = 0; g < coords.length; g++) {
esriGeometry[esriGeomInfo.geomHolder].push(coords[g]);
}
}
}
if (esriGeomInfo.type === 'esriGeometryPolygon') {
esriGeometry['type'] = 'polygon';
}
if (esriGeomInfo.type === 'esriGeometryPolyline') {
esriGeometry['type'] = 'polyline';
}
return esriGeometry;
}
/Take a GeoJSON geometry type and make an object that has information about what the ESRI geometry should hold. Includes the ESRI geometry type and the name of the member that holds coordinate information/
gcGeomTypeToEsriGeomInfo(gcType) {
let esriType, geomHolderId;
if (gcType === 'Point') {
esriType = 'esriGeometryPoint';
} else if (gcType === 'MultiPoint') {
esriType = 'esriGeometryMultipoint';
geomHolderId = 'points';
} else if (gcType === 'LineString' || gcType === 'MultiLineString') {
esriType = 'esriGeometryPolyline';
geomHolderId = 'paths';
} else if (gcType === 'Polygon' || gcType === 'MultiPolygon') {
esriType = 'esriGeometryPolygon';
geomHolderId = 'rings';
}
return {
type: esriType,
geomHolder: geomHolderId
};
}
/compares a GeoJSON geometry type and ESRI geometry type to see if they can be safely put together in a single ESRI feature. ESRI features must only have one geometry type, point, line, polygon/
isCompatible(esriGeomType, gcGeomType) {
let compatible = false;
if (
(esriGeomType === 'esriGeometryPoint' || esriGeomType === 'esriGeometryMultipoint') &&
(gcGeomType === 'Point' || gcGeomType === 'MultiPoint')
) {
compatible = true;
} else if (
esriGeomType === 'esriGeometryPolyline' &&
(gcGeomType === 'LineString' || gcGeomType === 'MultiLineString')
) {
compatible = true;
} else if (
esriGeomType === 'esriGeometryPolygon' &&
(gcGeomType === 'Polygon' || gcGeomType === 'MultiPolygon')
) {
compatible = true;
}
return compatible;
}
/*Wraps GeoJSON coordinates in an array if necessary so code can iterate
through array of points, rings, or lines and add them to an ESRI geometry
Input is a GeoJSON geometry object. A GeoJSON GeometryCollection is not a
valid input */
gcCoordinatesToEsriCoordinates(gcGeom) {
let i, len, esriCoords;
if (gcGeom.type === 'MultiPoint' || gcGeom.type === 'MultiLineString') {
esriCoords = gcGeom.coordinates || [];
} else if (gcGeom.type === 'Point' || gcGeom.type === 'LineString') {
esriCoords = gcGeom.coordinates ? [gcGeom.coordinates] : [];
} else if (gcGeom.type === 'Polygon') {
esriCoords = [];
if (gcGeom.coordinates) {
esriCoords = this.gcPolygonCoordinatesToEsriPolygonCoordinates(gcGeom.coordinates);
}
} else if (gcGeom.type === 'MultiPolygon') {
esriCoords = [];
if (gcGeom.coordinates) {
for (i = 0, len = gcGeom.coordinates.length; i < len; i++) {
esriCoords.push(this.gcPolygonCoordinatesToEsriPolygonCoordinates(gcGeom.coordinates[i]));
}
}
}
return esriCoords;
}
/*Convert GeoJSON polygon coordinates to ESRI polygon coordinates.
GeoJSON rings are listed starting with a singular outer ring. ESRI
rings can be listed in any order, but unlike GeoJSON, the ordering of
vertices determines whether it's an outer or inner ring. Clockwise
vertices indicate outer ring and counter-clockwise vertices indicate
inner ring */
gcPolygonCoordinatesToEsriPolygonCoordinates(gcCoords) {
let i,
len,
esriCoords = [],
ring;

 更多参考https://xiaozhuanlan.com/topic/5493802716