vue 调用arcgis pro 实现地图的实现

vue 调用arcgis pro 实现地图的实现

<template> <div> <!-- 地图主题组件 --> <div class="main"> <div id="viewDiv"></div> </div> </div> </template> <script> //引用esri-loader 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() { //延迟加载JavaScript模块和CSS所需的ArcGIS API //使用Dojo的加载器要求类 loadModules([ 'esri/Map',//加载特定于创建地图的代码 'esri/views/MapView',//2D地图引入 'esri/WebScene', 'esri/views/SceneView',//3D地图引入，加载允许以3D模式查看地图的代码 "dojo/domReady!", ], { css: true }) .then( ([ ArcGISMap, MapView, WebScene,SceneView, ]) => { var scene = new WebScene({ portalItem: {//发布服务的portal id: "d30a699e1d0a4f0780bc80373911e86e" }, }); //创建地图 this.view = new SceneView({ container: "viewDiv",//视图的容器 map: scene,//引用创建的映射对象,实例放入视图中 }); } ) .catch(err => { // handle any script or module loading errors 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>