Vue+ ArcGIS JavaScript APi詳解
版本
Vue 2
ArcGIS JavaScript 4.22
注意 ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大
環(huán)境搭建
新建vue
可以使用vue ui創(chuàng)建項目
增加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" },
安裝完依賴后運(yùn)行 copy命令
yarn yarn copy yarn serve ------------------- npm i npm run copy npm run serve
運(yùn)行完copy命令后,會將arcgis相關(guān)資源拷貝到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
到此這篇關(guān)于Vue+ ArcGIS JavaScript APi的文章就介紹到這了,更多相關(guān)Vue+ ArcGIS JavaScript APi內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
如何在Vue3中實現(xiàn)自定義指令(超詳細(xì)!)
除了默認(rèn)設(shè)置的核心指令(v-model和v-show),Vue也允許注冊自定義指令,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實現(xiàn)自定義指令的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06如何隱藏element-ui中tree懶加載葉子節(jié)點(diǎn)checkbox(分頁懶加載效果)
這篇文章主要介紹了如何隱藏element-ui中tree懶加載葉子節(jié)點(diǎn)checkbox(分頁懶加載效果),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07VSCode使React?Vue代碼調(diào)試變得更爽
這篇文章主要為大家介紹了VSCode使React?Vue代碼調(diào)試變得更爽的使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development
這篇文章主要介紹了vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況的相關(guān)資料,我們可以通過合并渲染、數(shù)據(jù)緩存或虛擬化等技術(shù)來減少重復(fù)渲染的次數(shù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12