arcgis api for js入门开发系列二十三批量叠加zi
2018-12-15 本文已影响2人
gis之家
之前写过一篇前端js叠加shp图层的文章：arcgis api for js入门开发系列十叠加SHP图层
那是一次只能加载一个.shp文件或者.dbf文件，本篇则是js直接加载压缩文件zip形式shp，可以批量加载点、线、面shp图层；下面截图的zip文件，分别是一个点、线、面shp图层压缩而来
image
前端地图加载展示效果图如下：
image
实现的核心代码如下：
//叠加压缩SHP图层，批量加载显示
$("#zipshp").click(function () {
shp("js/main/shpJS/gishome.zip").then(function (data) {
if (data && data.length > 0) {
map.graphics.clear();
for (var i = 0; i < data.length; i++) {
var features = data[i].features;
for (var j = 0; j < features.length; j++) {
feature = features[j];
var graphic = getGraphic(feature);
map.graphics.add(graphic);
}
}
}
});
//根据feature几何类型动态构造对应的要素
function getGraphic(feature) {
var graphic = null;
var symbol = null;
switch (feature.geometry.type) {
case "Point"://构造点要素
symbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/dw1.png", 20, 20);
var mappoint = new esri.geometry.Point(feature.geometry.coordinates[0], feature.geometry.coordinates[1], new esri.SpatialReference(map.spatialReference.wkid));
graphic = new esri.Graphic(mappoint, symbol);
break;
case "LineString"://构造线要素
symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 6);
var polyline = new esri.geometry.Polyline(feature.geometry.coordinates);
graphic = new esri.Graphic(polyline, symbol);
break;
case "Polygon"://构造面要素
symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 3),
new esri.Color([125, 125, 125, 0.35]));
var polygon = new esri.geometry.Polygon(feature.geometry.coordinates);
graphic = new esri.Graphic(polygon, symbol);
break;
}
return graphic;
}
});
