Vue+ ArcGIS JavaScript APi详解
版本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:
})
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 = data.values * 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:
}
});
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:
},
starsEnabled: true,
atmosphereEnabled: true,
lighting: {
type: "virtual"
}
},
});
this.map3d.ground = {
layers:
};
}
}
}
</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地址
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】 我们会及时删除侵权内容，谢谢合作！
页:
[1]