arcgis jsapi接口入门系列（0）：总览

开发环境：

arcgis jsapi版本4.9

由于我们这套代码是基于vue，webpack开发的，会有少数vue代码，但总体不影响

里面还有些我们公司的js库和html css，给出的代码不能百分百直接运行，主要还是接口的总体介绍

 

代码中常见且不知来源的变量说明：

this.map和this.mapView：就是地图的map和mapView

this.apiInstance：这是公司框架封装的用于实例化arcgis jsapi对象的，不是必须的，例如new this.apiInstance.Extent，用原版jsapi就改成new Extent

 

以下是所有文章代码引用到的一个通用js文件，在此统一贴出代码

//地图通用操作


let comm = {
    //图层
    layer: {
        /**
         * 创建天地图图层
         * 只支持经纬度坐标（需要平面的麦卡托坐标可以自行修改）
         * @param tdtLayerType 天地图图层类型，支持以下值：img=影像——经纬度，cia=影像注记——经纬度，vec=矢量——经纬度，cva=矢量注记——经纬度
         * ter=地形图——经纬度，cta=地形图注记——经纬度
         */
        createTdtLayer: function (apiInstance, tdtLayerType, layerConfig) {
            //切片配置
            //PS：加载天地图图层本质上是用自定义切片图层
            var tileInfo = new apiInstance.TileInfo({
                "rows": 256,
                "cols": 256,
                "compressionQuality": 0,
                //切片原点
                "origin": {
                    "x": -180,
                    "y": 90
                },
                //坐标系
                "spatialReference": {
                    //本方法只支持经纬度坐标，坐标系为wgs84
                    "wkid": 4326
                },
                "lods": [
                    //天地图固定的切片级别
                    {"level": 2, "resolution": 0.3515625, "scale": 147748796.52937502},
                    {"level": 3, "resolution": 0.17578125, "scale": 73874398.264687508},
                    {"level": 4, "resolution": 0.087890625, "scale": 36937199.132343754},
                    {"level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877},
                    {"level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385},
                    {"level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693},
                    {"level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846},
                    {"level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423},
                    {"level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116},
                    {"level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558},
                    {"level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779},
                    {"level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895},
                    {"level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447},
                    {"level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724},
                    {"level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619},
                    {"level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309},
                    {"level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655},
                    {"level": 19, "resolution": 2.68220901489257815e-006, "scale": 1127.23386023998275},
                    {"level": 20, "resolution": 1.341104507446289075e-006, "scale": 563.616930119991375},
                    {"level": 21, "resolution": 6.705522537231445375e-007, "scale": 281.8084650599956875},
                    {"level": 22, "resolution": 3.3527612686157226875e-007, "scale": 140.90423252999784375},
                    {"level": 23, "resolution": 1.67638063430786134375e-007, "scale": 70.452116264998921875},
                    {"level": 24, "resolution": 8.38190317153930671875e-008, "scale": 35.2260581324994609375}
                ]
            });
            //设置图层全图范围
            let spatialReference = new apiInstance.SpatialReference({wkid: 4326});
            let fullExtent = new apiInstance.Extent(-180.0, -90.0, 180.0, 90.0, spatialReference);

            //图层配置
            layerConfig = layerConfig || {};
            $.extend(layerConfig, {
                //天地图切片的url模板
                urlTemplate: "http://{subDomain}.tianditu.cn/" + tdtLayerType + "_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=" + tdtLayerType + "&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&FORMAT=tiles",
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                copyright: "",
                spatialReference: spatialReference,
                fullExtent: fullExtent,
                tileInfo: tileInfo,
            });

            //根据图层配置新建图层
            let layer = new apiInstance.WebTileLayer(layerConfig);

            return layer;
        },
        /**
         * 创建图形图层并添加到地图
         * @param apiInstance
         * @param map 地图
         * @param layerConfig 图层配置
         */
        createGraphicsLayerAndAddToMap: function (apiInstance, map, layerConfig) {
            let layer = new apiInstance.GraphicsLayer(layerConfig);
            //图层添加到地图
            map.add(layer);

            return layer;
        },
    },
    //几何
    geometry: {
        /**
         * wkt转点的图形（Graphic）
         * @param apiInstance api
         * @param wkt wkt
         * @param style 样式
         * @param sr 空间参考
         * @param attributes 属性字段值（可空）
         */
        wktToPointGraphic: function (apiInstance, wkt, style, sr, attributes) {
            //wkt转点的几何对象
            let point = comm.geometry.wktToPoint(apiInstance, wkt, sr);

            //生成点样式
            let markerSymbol = new apiInstance.SimpleMarkerSymbol(
                style,
            );

            //生成图形
            let graphic = new apiInstance.Graphic({
                //几何对象
                geometry: point,
                //样式
                symbol: markerSymbol,
                //属性字段
                attributes: attributes,
            });

            return graphic;
        },
        /**
         * wkt转点的文字的图形（Graphic）
         * @param apiInstance api
         * @param wkt wkt
         * @param style 样式
         * @param sr 空间参考
         * @param attributes 属性字段值（可空）
         */
        wktToTextGraphic: function (apiInstance, wkt, style, sr, attributes) {
            //wkt转点的几何对象
            let point = comm.geometry.wktToPoint(apiInstance, wkt, sr);

            //生成点样式，TextSymbol=文字样式
            let markerSymbol = new apiInstance.TextSymbol(
                style,
            );

            //生成图形
            let graphic = new apiInstance.Graphic({
                //几何对象
                geometry: point,
                //样式
                symbol: markerSymbol,
                //属性字段
                attributes: attributes,
            });

            return graphic;
        },
        /**
         * wkt转点的图片的图形（Graphic）
         * @param apiInstance api
         * @param wkt wkt
         * @param style 样式
         * @param sr 空间参考
         * @param attributes 属性字段值（可空）
         */
        wktToPicGraphic: function (apiInstance, wkt, style, sr, attributes) {
            //wkt转点的几何对象
            let point = comm.geometry.wktToPoint(apiInstance, wkt, sr);

            //生成点样式，PictureMarkerSymbol=图片点样式
            let pictureMarkerSymbol = new apiInstance.PictureMarkerSymbol(
                style,
            );

            //生成图形
            let graphic = new apiInstance.Graphic({
                //几何对象
                geometry: point,
                //样式
                symbol: pictureMarkerSymbol,
                //属性字段
                attributes: attributes,
            });

            return graphic;
        },
        /**
         * wkt转点几何对象
         * @param apiInstance api
         * @param wkt wkt
         * @param sr 空间参考
         * @returns {apiInstance.Polyline}
         */
        wktToPoint: function (apiInstance, wkt, sr) {
            //wkt转坐标对象
            let points = comm.geometry.wktToCoords(wkt);

            //生成线
            let point = new apiInstance.Point({
                //坐标
                x: points[0],
                y: points[1],
                //空间参考
                spatialReference: sr
            });

            return point;
        },
        /**
         * 坐标集合转点几何对象
         * @param apiInstance api
         * @param wkt wkt
         * @param sr 空间参考
         * @returns {apiInstance.Polyline}
         */
        coordToPoint: function (apiInstance, coord, sr) {
            //生成线
            let point = new apiInstance.Point({
                //坐标
                x: coord[0],
                y: coord[1],
                //空间参考
                spatialReference: sr
            });

            return point;
        },
        /**
         * 根据x y新建点几何对象
         * @param apiInstance api
         * @param wkt wkt
         * @param sr 空间参考
         * @returns {apiInstance.Polyline}
         */
        xyToPoint: function (apiInstance, x, y, sr) {
            //生成线
            let point = new apiInstance.Point({
                //坐标
                x: x,
                y: y,
                //空间参考
                spatialReference: sr
            });

            return point;
        },
        /**
         * 点转wkt
         * @param geometry
         * @returns {string}
         */
        pointToWkt: function (geometry) {
            return "POINT (" + geometry.x + " " + geometry.y + ")";
        },
        /**
         * 线几何对象转线的图形（Graphic）
         * @param apiInstance api
         * @param wkt wkt
         * @param style 样式
         * @param sr 空间参考
         * @param attributes 属性字段值（可空）
         */
        polylineToPolylineGraphic: function (apiInstance, geometry, style, sr, attributes) {
            //生成线样式
            let lineSymbol = new apiInstance.SimpleLineSymbol(
                style,
            );

            //生成图形
            let graphic = new apiInstance.Graphic({
                //几何对象
                geometry: geometry,
                //样式
                symbol: lineSymbol,
                //属性字段
                attributes: attributes,
            });

            return graphic;
        },
        /**
         * wkt转线的图形（Graphic）
         * @param apiInstance api
         * @param wkt wkt
         * @param style 样式
         * @param sr 空间参考
         * @param attributes 属性字段值（可空）
         */
        wktToPolylineGraphic: function (apiInstance, wkt, style, sr, attributes) {
            //wkt转线的几何对象
            let polyline = comm.geometry.wktToPolyline(apiInstance, wkt, sr);

            //生成线样式
            let lineSymbol = new apiInstance.SimpleLineSymbol(
                style,
            );

            //生成图形
            let graphic = new apiInstance.Graphic({
                //几何对象
                geometry: polyline,
                //样式
                symbol: lineSymbol,
                //属性字段
                attributes: attributes,
            });

            return graphic;
        },
        /**
         * wkt转线几何对象
         * @param apiInstance api
         * @param wkt wkt
         * @param sr 空间参考
         * @returns {apiInstance.Polyline}
         */
        wktToPolyline: function (apiInstance, wkt, sr) {
            //wkt转坐标对象
            let points = comm.geometry.wktToCoords(wkt);

            //生成线
            let polyline = new apiInstance.Polyline({
                //坐标
                paths: points,
                //空间参考
                spatialReference: sr
            });

            return polyline;
        },
        /**
         * 坐标转线几何对象
         * @param apiInstance api
         * @param coord 坐标对象，格式如：[[[113.545949, 22.24015749], [113.56989, 22.24916], [113.55324, 22.220588]]]
         * @param sr 空间参考
         * @returns {apiInstance.Polyline}
         */
        coordToPolyline: function (apiInstance, coord, sr) {
            //生成线
            let polyline = new apiInstance.Polyline({
                //坐标
                paths: coord,
                //空间参考
                spatialReference: sr
            });

            return polyline;
        },
        /**
         * 线转wkt
         * @param geometry
         * @returns {string}
         */
        polylineToWkt: function (geometry) {
            var wkt = [];
            var paths = geometry.paths;
            for (var i in paths) {
                var path = paths[i];
                for (var j in path) {
                    var p = path[j];
                    wkt.push(p.join(" "));
                }
            }
            return "LINESTRING (" + wkt.join(",") + ")";
        },
        /**
         * wkt转面的图形（Graphic）
         * @param apiInstance api
         * @param wkt wkt
         * @param style 样式
         * @param sr 空间参考
         * @param attributes 属性字段值（可空）
         */
        wktToPolygonGraphic: function (apiInstance, wkt, style, sr, attributes) {
            //wkt转面的几何对象
            let polygon = comm.geometry.wktToPolygon(apiInstance, wkt, sr);

            //生成面样式
            let fillSymbol = new apiInstance.SimpleFillSymbol(
                style,
            );

            //生成图形
            let graphic = new apiInstance.Graphic({
                //几何对象
                geometry: polygon,
                //样式
                symbol: fillSymbol,
                //属性字段
                attributes: attributes,
            });

            return graphic;
        },
        /**
         * 面几何对象转面的图形（Graphic）
         * @param apiInstance api
         * @param wkt wkt
         * @param style 样式
         * @param sr 空间参考
         * @param attributes 属性字段值（可空）
         */
        polygonToPolygonGraphic: function (apiInstance, geometry, style, sr, attributes) {
            //生成面样式
            let fillSymbol = new apiInstance.SimpleFillSymbol(
                style,
            );

            //生成图形
            let graphic = new apiInstance.Graphic({
                //几何对象
                geometry: geometry,
                //样式
                symbol: fillSymbol,
                //属性字段
                attributes: attributes,
            });

            return graphic;
        },
        /**
         * wkt转面几何对象
         * @param apiInstance api
         * @param wkt wkt
         * @param sr 空间参考
         * @returns {apiInstance.Polygon}
         */
        wktToPolygon: function (apiInstance, wkt, sr) {
            //wkt转坐标对象
            let points = comm.geometry.wktToCoords(wkt);

            //生成面
            let polygon = new apiInstance.Polygon({
                //坐标
                rings: points,
                //空间参考
                spatialReference: sr
            });

            return polygon;
        },
        /**
         * 坐标对象转面几何对象
         * @param apiInstance api
         * @param coord 坐标对象 格式是arcgis jsapi标准，例如：[[[113.527839, 22.27028], [113.527238, 22.2557786], [113.5437178, 22.2597268], [113.54423, 22.2730306], [113.527839, 22.27028]]]
         * @param sr 空间参考
         * @returns {apiInstance.Polygon}
         */
        coordToPolygon: function (apiInstance, coord, sr) {
            //生成面
            let polygon = new apiInstance.Polygon({
                //坐标
                rings: coord,
                //空间参考
                spatialReference: sr
            });

            return polygon;
        },
        /**
         * 面转wkt
         * @param geometry
         * @returns {string}
         */
        polygonToWkt: function (geometry) {
            let wkt = [];
            let rings = geometry.rings;
            for (let i in rings) {
                let ring = rings[i];
                for (let j in ring) {
                    let p = ring[j];
                    wkt.push(p.join(" "));
                }
            }
            return "POLYGON ((" + wkt.join(",") + "))";
        },
        /**
         * wkt转坐标对象
         * PS：坐标对象是arcgis jsapi格式
         * @param wkt
         * @returns {*}
         */
        wktToCoords: function (wkt) {
            var features, type, str;
            wkt = wkt.replace(/[\n\r]/g, " ");
            var matches = comm.geometry.regExes.typeStr.exec(wkt);
            if (matches) {
                type = matches[1].toLowerCase();
                str = matches[2];
                if (comm.geometry.parse[type]) {
                    features = comm.geometry.parse[type].apply(this, [str]);
                }
            }
            return features;
        },
        /**
         *  wkt转坐标对象的正则表单式
         */
        regExes: {
            'typeStr': /^\s*(\w+)\s*\(\s*(.*)\s*\)\s*$/,
            'spaces': /\s+/,
            'parenComma': /\)\s*,\s*\(/,
            'doubleParenComma': /\)\s*\)\s*,\s*\(\s*\(/,  // can't use {2} here
            'trimParens': /^\s*\(?(.*?)\)?\s*$/
        },
        /**
         * wkt转坐标对象
         */
        parse: {
            'point': function (str) {
                var coords = comm.util.trim(str).split(comm.geometry.regExes.spaces);
                for (var i in coords)
                    coords[i] = Number(coords[i]);
                return coords;//new esri.geometry.Point(coords[0], coords[1]);
            },
            'pointzm': function (str) {
                var coords = comm.util.trim(str).split(comm.geometry.regExes.spaces);
                for (var i in coords)
                    coords[i] = Number(coords[i]);
                return coords.slice(0, 2);//new esri.geometry.Point(coords[0], coords[1]);
            },
            'linestring': function (str) {
                var points = comm.util.trim(str).split(',');

                var components = [];
                for (var i = 0, len = points.length; i < len; ++i) {
                    components.push(comm.geometry.parse.point.apply(this, [points[i]]));
                }
                return components//new esri.geometry.Polyline(components);
            },
            'linestringzm': function (str) {
                var points = comm.util.trim(str).split(',');

                var components = [];
                for (var i = 0, len = points.length; i < len; ++i) {
                    components.push(comm.geometry.parse.pointzm.apply(this, [points[i]]));
                }
                return components//new esri.geometry.Polyline(components);
            },
            'multilinestring': function (str) {
                var line;
                var lines = comm.util.trim(str).split(comm.geometry.regExes.parenComma);
                var components = [];
                for (var i = 0, len = lines.length; i < len; ++i) {
                    line = lines[i].replace(comm.geometry.regExes.trimParens, '$1');
                    components.push(comm.geometry.parse.linestring.apply(this, [line]));
                }
                return components;
            },
            'polygon': function (str) {
                var ring, linestring, linearring;
                var rings = comm.util.trim(str).split(comm.geometry.regExes.parenComma);

                var components = [];
                for (var i = 0, len = rings.length; i < len; ++i) {
                    ring = rings[i].replace(comm.geometry.regExes.trimParens, '$1');
                    linestring = comm.geometry.parse.linestring.apply(this, [ring]);
                    components.push(linestring);
                }
                return components;
            }
        },
    },
    //通用
    util: {
        trim: function (str) {
            return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        }
    }
};

module.exports = comm;