文档章节

arcgis jsapi接口入门系列(0):总览

c
 canneljls
发布于 2018/10/17 17:16
字数 2151
阅读 20
收藏 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;

 

© 著作权归作者所有

共有 人打赏支持
c
粉丝 13
博文 50
码字总数 33254
作品 0
广州
程序员
私信 提问
ArcGIS API for Javascript 2.X 离线部署(以2.6为例)

先在官网上ArcGIS API for JavaScript download page(需要有账户)下载最新的API:arcgisjsv26_api.zip( 点击直接下载)和 SDK: arcgisjsv26_sdk.zip(直接下载); 2. 将下载下来的 arcg...

回忆在昨天
2012/10/24
0
0
用Tomcat8.5做Arcgis API for javascript的本地部署

step1:1从arcgis官网上下载Arcgis api for JavaScript 4.3 https://developers.arcgis.com/javascript/latest/guide/release-notes/ ps:前提是你需要有一个esri开发者账户否则不能下载。 st......

duxiuxiu
2017/05/18
0
0
arcgis jsapi接口入门系列(3):各种类型的图层添加

这里说的tomcat切片,是指arcgis server切片后,把切片图片文件用tomcat发布(其他任意web服务器发布都行) arcgis rest图层指用arcgis server发布的地图服务,用rest方式加载...

canneljls
2018/10/17
0
0
ArcGIS for iOS、Android、Windows新产品全线发布

ArcGIS Online的更新带来了云和移动GIS的系列变化,为了支持ArcGISOnline和ArcGIS 10.1新功能,ArcGISfor iOS、Android和Windows Phone的app和Runtime SDK都进行了更新,三大移动平台上的功能...

长平狐
2012/11/28
321
0
ArcGIS for iOS 开发系列(2) – 开发环境配置

我们已经掌握了一些基本知识,在动手编程之前,还需先配置下开发环境: 2.1 iOS 配置 1) Mac电脑(MacBook Air/ Pro、Mac mini和iMac都可以); 2) Snow Leopard(小版本10.6.2以上)、Lio...

长平狐
2012/11/28
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

c++ 定义新的异常

#include <iostream> #include <exception> using namespace std; struct MyException : public exception { const char * what () const throw () { return "C++ Exception"; } }; int main......

天王盖地虎626
58分钟前
3
0
PDMan-2.1.1 发布:用心开源,免费的国产数据库建模工具(春节前最后一个版本)

一、软件介绍 PDMan 是一款开源免费的数据库模型建模工具,是PowerDesigner之外另一种更好的选择。支持Windows,Mac,Linux等操作系统,具有上手容易,使用简单的特点。 2018年获得码云GVP (Gi...

O龙猫O
今天
15
0
OSChina 周二乱弹 —— 以后我偷小鱼干养你

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @庞巴哥 :只有这节奏瞬间变得轻松。。。。。。。。。分享Talking Eyes的单曲《In the sun (Extended Version)》: 《In the sun (Extended Ve...

小小编辑
今天
313
7
多表查询

第1章 多表关系实战 1.1 实战1:省和市  方案1:多张表,一对多  方案2:一张表,自关联一对多 1.2 实战2:用户和角色 (比如演员和扮演人物)  多对多关系 1.3 实战3:角色和权限 (比如...

stars永恒
今天
9
0
求推广,德邦快递坑人!!!!

完全没想好怎么来吐槽自己这次苦逼的德邦物流过程了,只好来记一个流水账。 从寄快递开始: 2019年1月15日从 德邦物流 微信小app上下单,截图如下: 可笑的是什么,我预约的是17号上门收件,...

o0无忧亦无怖
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部