Vue ArcGISJavaScriptAPI如何实现地图交互与数据可视化功能？

本文共计850个文字，预计阅读时间需要4分钟。

目录 + 版本 + 环境搭建 + 新建Vue + 添加ArcGIS JavaScript + 包引入 + 复制资源信息 + 页面测试 + 版本 + Vue + ArcGIS JavaScript 4.22 + 注意 + ArcGIS JavaScript 3.x 与 ArcGIS JavaScript 4.x 差异 + 环境搭建 + 新建Vue + 可使用

目录

• 版本
• 环境搭建
• 新建vue
• 增加ArcGIS JavaScript 包引用
• 拷贝资源信息
• 页面测试

版本

Vue 2

ArcGIS JavaScript 4.22

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

环境搭建

新建vue

可以使用vue ui创建项目

增加ArcGIS JavaScript 包引用

package.json

"dependencies": { "core-js": "^3.8.3", "vue": "^2.6.14", "@arcgis/core":"4.22.2", "ncp":"^2.0.0" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^6.8.0", "eslint-plugin-vue": "^5.2.3", "vue-template-compiler": "^2.6.14" },

ncp: 主要用于拷贝资源信息

@arcgis/core 是arcgis_js仓库

拷贝资源信息

package.json中配置copy命令

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets" },

安装完依赖后运行 copy命令

yarn yarn copy yarn serve ------------------- npm i npm run copy npm run serve

运行完copy命令后,会将arcgis相关资源拷贝到public/assets目录下

全局引入

main.js

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

页面测试

helloworld.vue

<template> <div class="hello"> <div id="map" class="map" v-show="flag == 'map'"> </div> <div id="earth" class="map" v-show="flag == 'earth'"></div> </div> </template> <script> import Map from '@arcgis/core/Map' import MapView from '@arcgis/core/views/MapView' import MapImageLayer from '@arcgis/core/layers/MapImageLayer' import ElevationLayer from '@arcgis/core/layers/ElevationLayer' import BaseElevationLayer from '@arcgis/core/layers/BaseElevationLayer' import SpatialReference from '@arcgis/core/geometry/SpatialReference' import SceneView from '@arcgis/core/views/SceneView' import Basemap from '@arcgis/core/Basemap' import TileLayer from '@arcgis/core/layers/TileLayer' export default { name: 'HelloWorld', data() { return { mapView: null, map: null, map3d: null, flag: 'earth' } }, mounted() { this.initBasemap() }, methods: { initBasemap() { const self = this //二维 const mapImageLayer = new MapImageLayer({ url: "192.168.3.156:6080/arcgis/rest/services/xiangyang/jichang/MapServer" }) this.map = new Map({ // basemap: basemap, layers: [mapImageLayer] }) this.mapView = new MapView({ container: 'map', map: self.map, spatialReference: new SpatialReference({ wkid: 3857 }), rotation: 41.2, zoom: 3 }) // 三维地形 const ExaggeratedElevationLayer = BaseElevationLayer.createSubclass({ properties: { exaggeration: 10 }, load: function () { // TopoBathy3D contains elevation values for both land and ocean ground this._elevation = new ElevationLayer({ url: "elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/TopoBathy3D/ImageServer" }); this.addResolvingPromise( this._elevation.load().then(() => { this.tileInfo = this._elevation.tileInfo; this.spatialReference = this._elevation.spatialReference; this.fullExtent = this._elevation.fullExtent; }) ); return this; }, // Fetches the tile(s) visible in the view fetchTile: function (level, row, col, options) { // calls fetchTile() on the elevationlayer for the tiles // visible in the view return this._elevation.fetchTile(level, row, col, options).then( function (data) { const exaggeration = this.exaggeration; for (let i = 0; i < data.values.length; i++) { // Multiply the given pixel value // by the exaggeration value data.values[i] = data.values[i] * exaggeration; } return data; }.bind(this) ); } }); const basemap = new Basemap({ baseLayers: [ new TileLayer({ url: "services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" }), new TileLayer({ url: "tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/terrain_with_heavy_bathymetry/MapServer" }), ] }); const elevationLayer = new ExaggeratedElevationLayer(); this.map3d = new Map({ basemap: basemap, ground: { layers: [elevationLayer] } }); const view = new SceneView({ container: "earth", map: this.map3d, alphaCompositingEnabled: true, qualityProfile: "high", camera: { position: [-55.039, 14.948, 19921223.3], heading: 2.03, tilt: 0.13 }, environment: { background: { type: "color", color: [255, 252, 244, 0] }, starsEnabled: true, atmosphereEnabled: true, lighting: { type: "virtual" } }, }); this.map3d.ground = { layers: [elevationLayer] }; } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .hello { width: 100%; height: 100%; } .map { width: 100%; height: 100%; } </style>

demo地址

gitee.com/wolf_pro/vue_arcgis4.22.git

到此这篇关于Vue+ ArcGIS JavaScript APi的文章就介绍到这了,更多相关Vue+ ArcGIS JavaScript APi内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！