vue使用地图（Vue+ArcGISJavaScriptAPi详解）
导读：版本 Vue 2...
版本
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>
demo地址
https://gitee.com/wolf_pro/vue_arcgis4.22.git
到此这篇关于Vue+ ArcGIS JavaScript APi的文章就介绍到这了,更多相关Vue+ ArcGIS JavaScript APi内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！