arcgis api for js入门开发系列二十三批量叠加zip压缩SHP图层

最新推荐文章于 2021-08-03 20:06:29 发布

转载最新推荐文章于 2021-08-03 20:06:29 发布 · 328 阅读

文章标签：

#前端 #ViewUI

本文介绍如何使用ArcGIS API for JS批量加载压缩的SHP图层，包括点、线、面要素，并展示了核心代码实现，适用于前端地图应用开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写过一篇前端js叠加shp图层的文章：arcgis api for js入门开发系列十叠加SHP图层

那是一次只能加载一个.shp文件或者.dbf文件，本篇则是js直接加载压缩文件zip形式shp，可以批量加载点、线、面shp图层；下面截图的zip文件，分别是一个点、线、面shp图层压缩而来

前端地图加载展示效果图如下：

实现的核心代码如下：

//叠加压缩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;
            }
});