arcgis模块化开发之vue.js

前端JavaScript前端开发

说明 :

项目环境是用 vue-cli 搭建的vue项目;在项目中使用vue 配合 arcgis开发;加载的地图为天地图

1.项目环境搭建 :

  • 1.1 这里不在废话,如果会用vue;就会用vue-cli;直接用命令vue init webpack 生成就好了.
  • 1.2 安装 esri-loader;这个也是arcgis官方开发的,用命令npm install --save esri-loader安装就行了;详细文档参考这里

  • 1.3 在vue的script标签中用import的方式引入esri-loader :

    1
    import esriLoader from 'esri-loader';

  • 1.4 然后加载 css js 等资源:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    esriLoader.loadScript ({ // 加载js
         url: 'http://jsapi.thinkgis.cn/dojo/dojo.js'
    });
         // 加载css
    esriLoader.loadCss ('http://jsapi.thinkgis.cn/esri/css/esri.css');
         // 加载模块
    esriLoader.loadModules ([
          'esri/map',
          'esri/layers/TiledMapServiceLayer',
          'esri/SpatialReference',
          'esri/geometry/Extent',
          'esri/layers/TileInfo',
          'esri/geometry/Point',
          'esri/symbols/PictureMarkerSymbol',
          'esri/layers/FeatureLayer',
          'esri/tasks/LengthsParameters',
          'esri/tasks/AreasAndLengthsParameters',
          'esri/tasks/GeometryService',
          'esri/toolbars/draw',
          'esri/InfoTemplate',
          'esri/graphic',
          'esri/layers/GraphicsLayer'
     ])
    .then (this.loading)
    .then (obj => {
        this.initMap (obj);
    })
    .catch ((err) => {
        console.log (err.message);
    });

    esri-loader支持Promise;所以可以直接使用then方法;这里使用了Promise的链式调用;模块加载完了,就要加载天地图了,官方的地图不是天地图;所以只能自己加载: 就是上面this.loading方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    loading ([
                     Map,
                     TiledMapServiceLayer,
                     SpatialReference,
                     Extent,
                     TileInfo,
                     Point,
                     PictureMarkerSymbol,
                     FeatureLayer,
                     LengthsParameters,
                     AreasAndLengthsParameters,
                     GeometryService,
                     Draw,
                     InfoTemplate,
                     Graphic,
                     GraphicsLayer
                 ]) {
            console.log ('loading');
            dojo.declare ('TDT', TiledMapServiceLayer, {

                constructor (maptype) {
                    this._maptype = maptype;
                    this.spatialReference = new SpatialReference ({ wkid: 4326 });
                    // this.initialExtent = (this.fullExtent = new Extent (97.83, 21.48, 105.60, 29,
                    //     this.spatialReference));
                    this.initialExtent = (this.fullExtent = new Extent (-180, -90, 180, 90,
                        this.spatialReference));

                    this.tileInfo = new TileInfo ({
    		            'rows': 256,
    		            'cols': 256,
    		            'dpi': 300,
    		            'format': 'PNG32',
    		            'compressionQuality': 0,
    		            'origin': {
    		                'x': -180,
    		                'y': 90
    		            },
    		            'spatialReference': {
    		                '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
    		            } ]
    		        });
                    this.loaded = true;
                    this.onLoad (this);
                },

                getTileUrl (level, row, col) {
                    return 'http://t' + col % 8 + '.tianditu.cn/' + this._maptype + '_c/wmts?' +
                        'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' + this._maptype +
                        '&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=' +
                        level + '&TILEROW=' + row + '&TILECOL=' + col + '&FORMAT=tiles';
                }
            });
            return {
                Map,
                TiledMapServiceLayer,
                SpatialReference,
                Extent,
                TileInfo,
                Point,
                PictureMarkerSymbol,
                FeatureLayer,
                LengthsParameters,
                AreasAndLengthsParameters,
                GeometryService,
                Draw,
                TDT,
                InfoTemplate,
                Graphic,
                GraphicsLayer,
            };
        }

    同样,到这里,天地图的加载就出来了,然后就是初始化地图了,就是initMap方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    initMap(obj){
    	this.mapObj = obj;// 将对象保存到vue data 的maoObj中,方便调用;
        let map = new this.mapObj.Map ('map', { logo: false });// 创建地图实例
        this.mapObj.map = map;
        // 调用地图类型切换
        this.mapType ();
        // this.switchers('hotSpot',true);
        var pt = new this.mapObj.Point (this.mapCenter.lon, this.mapCenter.lat); // 设置中心点
        this.mapObj.map.centerAndZoom (pt, this.mapCenter.zoom); // 设置中心点和缩放级别;
    }

    这里,天地图就加载完成了.应该就能看见地图了.如果有问题,就是初始值没设置,换成相应的地理坐标就行了,等有空了我自己在写个详细的demo.

如果看的懵懂,直接看demo:demo地址

  • 关于windows 本地部署API:
    • 1 首先下载API 压缩包:下载地址;账号注册不了,我是用谷歌账户登录的,需要科学上网才行;
    • 2 版本选择: 我下载的是3.24版本的; 4.7 版本的使用vue 加载天地图的时候会报错.一直没找到解决办法,所以尝试了 3.24 的版本;
    • 3 本地服务 : tomcat;下载好tomcat之后,删除webapps下面的所有文件;解压下载好的zip文件;一次打开目录 ~/arcgis_js_v324_api\arcgis_js_api\library\3.24\3.24,把所有的文件复制到~tomcat/webapps/arcgis目录下;
    • 4 修改 init.js和dojo.js.修改方式参考 API 压缩包中的 install_api_windows.html 如果是按照上面的操作,修改后是这样的baseUrl:"http://localhost:8080/arcgis/dojo";
    • 5 启动 tomcat,浏览器地址栏输入 http://localhost:8080/arcgis/init.js能够正常显示,则说明正常.

本文标题:arcgis模块化开发之vue.js

文章作者:WestLonely

发布时间:2018年07月01日 - 19时00分

最后更新:2020年01月01日 - 21时24分

原始链接:https://biubu.cn/arcgis/

文章目录
  1. 1. 说明 :
  2. 2. 1.项目环境搭建 :