Vue+ ArcGIS JavaScript APi详解

但愿海波平

版本

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>
   
8. 
   
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'
    
19. 
    
20. export default {
    
21.   name: 'HelloWorld',
    
22.   data() {
    
23.     return {
    
24.       mapView: null,
    
25.       map: null,
    
26.       map3d: null,
    
27.       flag: 'earth'
    
28.     }
    
29.   },
    
30. 
    
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.       })
    
41. 
    
42.       this.map = new Map({
    
43.         // basemap: basemap,
    
44.         layers: [mapImageLayer]
    
45.       })
    
46. 
    
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.       })
    
56. 
    
57. 
    
58.       // 三维地形
    
59.       const ExaggeratedElevationLayer = BaseElevationLayer.createSubclass({      
    
60.         properties: {
    
61.           exaggeration: 10
    
62.         },
    
63.         load: function () {
    
64.           // TopoBathy3D contains elevation values for both land and ocean ground
    
65.           this._elevation = new ElevationLayer({
    
66.             url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/TopoBathy3D/ImageServer"
    
67.           });
    
68. 
    
69.          
    
70.           this.addResolvingPromise(
    
71.             this._elevation.load().then(() => {
    
72.             
    
73.               this.tileInfo = this._elevation.tileInfo;
    
74.               this.spatialReference = this._elevation.spatialReference;
    
75.               this.fullExtent = this._elevation.fullExtent;
    
76.             })
    
77.           );
    
78. 
    
79.           return this;
    
80.         },
    
81. 
    
82.         // Fetches the tile(s) visible in the view
    
83.         fetchTile: function (level, row, col, options) {
    
84.           // calls fetchTile() on the elevationlayer for the tiles
    
85.           // visible in the view
    
86.           return this._elevation.fetchTile(level, row, col, options).then(
    
87.             function (data) {
    
88.               const exaggeration = this.exaggeration;
    
89. 
    
90.               for (let i = 0; i < data.values.length; i++) {
    
91.                 // Multiply the given pixel value
    
92.                 // by the exaggeration value
    
93.                 data.values[i] = data.values[i] * exaggeration;
    
94.               }
    
95.               return data;
    
96.             }.bind(this)
    
97.           );
    
98.         }
    
99.       });
    
100. 
     
101. 
     
102.       const basemap = new Basemap({
     
103.         baseLayers: [
     
104.           new TileLayer({
     
105.             url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
     
106.           }),
     
107.           new TileLayer({
     
108.             url:
     
109.               "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/terrain_with_heavy_bathymetry/MapServer"
     
110.           }),
     
111. 
     
112.         ]
     
113.       });
     
114. 
     
115.       const elevationLayer = new ExaggeratedElevationLayer();
     
116. 
     
117.       
     
118.       this.map3d = new Map({
     
119.         basemap: basemap,
     
120.         ground: {
     
121.           layers: [elevationLayer]
     
122.         }
     
123.       });
     
124. 
     
125.       const view = new SceneView({
     
126.         container: "earth",
     
127.         map: this.map3d,
     
128.         alphaCompositingEnabled: true,
     
129.         qualityProfile: "high",
     
130.         camera: {
     
131.           position: [-55.039, 14.948, 19921223.3],
     
132.           heading: 2.03,
     
133.           tilt: 0.13
     
134.         },
     
135.         environment: {
     
136.           background: {
     
137.             type: "color",
     
138.             color: [255, 252, 244, 0]
     
139.           },
     
140.           starsEnabled: true,
     
141.           atmosphereEnabled: true,
     
142.           lighting: {
     
143.             type: "virtual"
     
144.           }
     
145.         },
     
146. 
     
147. 
     
148.       });
     
149. 
     
150. 
     
151.       this.map3d.ground = {
     
152.         layers: [elevationLayer]
     
153.       };
     
154. 
     
155.     }
     
156.   }
     
157. }
     
158. </script>
     
159. 
     
160. <!-- Add "scoped" attribute to limit CSS to this component only -->
     
161. <style scoped>
     
162. .hello {
     
163.   width: 100%;
     
164.   height: 100%;
     
165. }
     
166. 
     
167. .map {
     
168.   width: 100%;
     
169.   height: 100%;
     
170. }
     
171. </style>

复制代码

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

来源:https://www.jb51.net/article/266733.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！