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;