Vue+ArcGISJavaScriptAPi详解

 "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"
},

 "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"
},

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

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

<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>