Vue+ ArcGIS JavaScript APi详解

目录

版本环境搭建

新建vue增加ArcGIS JavaScript 包引用拷贝资源信息

页面测试

版本

Vue 2
ArcGIS JavaScript 4.22
注意 ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差异较大

环境搭建


新建vue

可以使用vue ui创建项目

增加ArcGIS JavaScript 包引用

package.json

1. "dependencies": {
2.     "core-js": "^3.8.3",
3.     "vue": "^2.6.14",   
4.     "@arcgis/core":"4.22.2",
5.     "ncp":"^2.0.0"
6.   },
7.   "devDependencies": {
8.     "@babel/core": "^7.12.16",
9.     "@babel/eslint-parser": "^7.12.16",
10.     "@vue/cli-plugin-babel": "~5.0.0",
11.     "@vue/cli-plugin-eslint": "~5.0.0",
12.     "@vue/cli-service": "~5.0.0",
13.     "eslint": "^6.8.0",
14.     "eslint-plugin-vue": "^5.2.3",   
15.     "vue-template-compiler": "^2.6.14"  
16.   },

复制代码

ncp: 主要用于拷贝资源信息
@arcgis/core 是arcgis_js仓库

拷贝资源信息

package.json中配置copy命令

1. "scripts": {
2.     "serve": "vue-cli-service serve",
3.     "build": "vue-cli-service build",
4.     "lint": "vue-cli-service lint",
5.     "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
6.   },

复制代码

安装完依赖后运行 copy命令

1. yarn
2. yarn copy
3. yarn serve
4. -------------------
5. npm i
6. npm run copy
7. npm run serve

复制代码

运行完copy命令后,会将arcgis相关资源拷贝到public/assets目录下
全局引入
main.js

1. import '@arcgis/core/assets/esri/themes/light/main.css'
2. import esriConfig from '@arcgis/core/config.js'
3. esriConfig.assetsPath = './assets'

复制代码

页面测试

helloworld.vue

1. <template>
2.   <div class="hello">
3.     <div id="map" class="map" v-show="flag == 'map'">
4.     </div>
5.     <div id="earth" class="map" v-show="flag == 'earth'"></div>
6.   </div>
7. </template>
9. <script>
10. import Map from '@arcgis/core/Map'
11. import MapView from '@arcgis/core/views/MapView'
12. import MapImageLayer from '@arcgis/core/layers/MapImageLayer'
13. import ElevationLayer from '@arcgis/core/layers/ElevationLayer'
14. import BaseElevationLayer from '@arcgis/core/layers/BaseElevationLayer'
15. import SpatialReference from '@arcgis/core/geometry/SpatialReference'
16. import SceneView from '@arcgis/core/views/SceneView'
17. import Basemap from '@arcgis/core/Basemap'
18. import TileLayer from '@arcgis/core/layers/TileLayer'
20. export default {
21.   name: 'HelloWorld',
22.   data() {
23.     return {
24.       mapView: null,
25.       map: null,
26.       map3d: null,
27.       flag: 'earth'
28.     }
29.   },
31.   mounted() {
32.     this.initBasemap()
33.   },
34.   methods: {
35.     initBasemap() {
36.       const self = this
37.       //二维
38.       const mapImageLayer = new MapImageLayer({
39.         url: "http://192.168.3.156:6080/arcgis/rest/services/xiangyang/jichang/MapServer"
40.       })
42.       this.map = new Map({
43.         // basemap: basemap,
44.         layers: [mapImageLayer]
45.       })
47.       this.mapView = new MapView({
48.         container: 'map',
49.         map: self.map,
50.         spatialReference: new SpatialReference({
51.           wkid: 3857
52.         }),
53.         rotation: 41.2,
54.         zoom: 3
55.       })
57.       // 三维地形
58.       const ExaggeratedElevationLayer = BaseElevationLayer.createSubclass({      
59.         properties: {
60.           exaggeration: 10
61.         },
62.         load: function () {
63.           // TopoBathy3D contains elevation values for both land and ocean ground
64.           this._elevation = new ElevationLayer({
65.             url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/TopoBathy3D/ImageServer"
66.           });
68.           this.addResolvingPromise(
69.             this._elevation.load().then(() => {
71.               this.tileInfo = this._elevation.tileInfo;
72.               this.spatialReference = this._elevation.spatialReference;
73.               this.fullExtent = this._elevation.fullExtent;
74.             })
75.           );
77.           return this;
78.         },
80.         // Fetches the tile(s) visible in the view
81.         fetchTile: function (level, row, col, options) {
82.           // calls fetchTile() on the elevationlayer for the tiles
83.           // visible in the view
84.           return this._elevation.fetchTile(level, row, col, options).then(
85.             function (data) {
86.               const exaggeration = this.exaggeration;
88.               for (let i = 0; i < data.values.length; i++) {
89.                 // Multiply the given pixel value
90.                 // by the exaggeration value
91.                 data.values[i] = data.values[i] * exaggeration;
92.               }
93.               return data;
94.             }.bind(this)
95.           );
96.         }
97.       });
99.       const basemap = new Basemap({
100.         baseLayers: [
101.           new TileLayer({
102.             url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
103.           }),
104.           new TileLayer({
105.             url:
106.               "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/terrain_with_heavy_bathymetry/MapServer"
107.           }),
109.         ]
110.       });
112.       const elevationLayer = new ExaggeratedElevationLayer();
114.       this.map3d = new Map({
115.         basemap: basemap,
116.         ground: {
117.           layers: [elevationLayer]
118.         }
119.       });
121.       const view = new SceneView({
122.         container: "earth",
123.         map: this.map3d,
124.         alphaCompositingEnabled: true,
125.         qualityProfile: "high",
126.         camera: {
127.           position: [-55.039, 14.948, 19921223.3],
128.           heading: 2.03,
129.           tilt: 0.13
130.         },
131.         environment: {
132.           background: {
133.             type: "color",
134.             color: [255, 252, 244, 0]
135.           },
136.           starsEnabled: true,
137.           atmosphereEnabled: true,
138.           lighting: {
139.             type: "virtual"
140.           }
141.         },
143.       });
145.       this.map3d.ground = {
146.         layers: [elevationLayer]
147.       };
149.     }
150.   }
151. }
152. </script>
154. <!-- Add "scoped" attribute to limit CSS to this component only -->
155. <style scoped>
156. .hello {
157.   width: 100%;
158.   height: 100%;
159. }
161. .map {
162.   width: 100%;
163.   height: 100%;
164. }
165. </style>

复制代码

demo地址
https://gitee.com/wolf_pro/vue_arcgis4.22.git
到此这篇关于Vue+ ArcGIS JavaScript APi的文章就介绍到这了,更多相关Vue+ ArcGIS JavaScript APi内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！