vue 调用arcgis pro 实现地图的实现
<template>
<div>
<!-- 地图主题组件 -->
<div class=
"main">
<div id=
"viewDiv"></div>
</div>
</div>
</template>
<script
>
import { loadModules
} from 'esri-loader';
import ToolBar
from "@/components/ToolBar.vue";
import Measurement
from "@/components/Measurement.vue";
export default {
name
: 'web-map',
data() {
return { };
},
components
: {
ToolBar
,
Measurement
,
},
mounted() {
loadModules([
'esri/Map',
'esri/views/MapView',
'esri/WebScene',
'esri/views/SceneView',
"dojo/domReady!",
], { css
: true })
.then(
([
ArcGISMap
, MapView
,
WebScene
,SceneView
,
]) => {
var scene
= new WebScene({
portalItem
: {
id
:
"d30a699e1d0a4f0780bc80373911e86e"
},
});
this.view
= new SceneView({
container
: "viewDiv",
map
: scene
,
});
}
)
.catch(err
=> {
console
.error(err
);
});
;
},
};
<style lang="less" scoped>// html,// body {//
padding: 0
;//
margin: 0
;//
width: 80%
;//
height: 100%
;//
}
.main { position: absolute
; top: 90px
; bottom: 0
; width: 87%
; #viewDiv { width: 100%
; height: 95%
; }}</style>