版本
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: "http://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: "https://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: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" }), new TileLayer({ url: "https://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>
https://gitee.com/wolf_pro/vue_arcgis4.22.git
到此这篇关于Vue+ ArcGIS JavaScript APi的文章就介绍到这了,更多相关Vue+ ArcGIS JavaScript APi内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具!