在 vue中使用 Arcgis for javascript

最新推荐文章于 2024-09-10 16:58:00 发布

小野猫子

最新推荐文章于 2024-09-10 16:58:00 发布

阅读量1.4k

点赞数 1

分类专栏： arcgis for javascript

本文链接：https://blog.youkuaiyun.com/Anything2207294253/article/details/113744241

版权

arcgis for javascript 专栏收录该内容

8 篇文章

订阅专栏

安装依赖

npm i esri-loader -S

页面中使用

<body>
  <div id="viewDiv"></div>
</body>

#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

import {loadModules} from "esri-loader";

创建2D视图

MapView通过将对象传递给构造函数来创建一个新的并设置其属性，包括center和zoom，这些属性用于定义视图的初始范围

MapView用于查看2D地图，SceneView用于查看3D地图

mounted() {
     let options = {
        url: "https://js.arcgis.com/4.17/",
        css: "https://js.arcgis.com/4.17/esri/themes/light/main.css"
     };
     loadModules([
        "esri/Map",
        "esri/views/MapView",
     ],options).then(([Map,MapView])=>{
        let map = new Map({
           basemap: "topo-vector"
        })
        let view = new MapView({
           container: "viewDiv",
           map: map,
           zoom: 7,
           center: [108.17377929686404, 35.69178936670419]
         })
     })
}

最终代码：复制后，即可使用

<template>
  <div id="viewDiv"></div>
</template>

<script>
  import {loadModules} from "esri-loader";
    export default {
     name: "demo",
      mounted() {
        let options = {
          url: "https://js.arcgis.com/4.17/",
          css: "https://js.arcgis.com/4.17/esri/themes/light/main.css"
        };
        loadModules([
          "esri/Map",
          "esri/views/MapView",
        ],options).then(([Map,MapView])=>{
          let map = new Map({
            basemap: "topo-vector"
          })
          let view = new MapView({
            container: "viewDiv",
            map: map,
            zoom: 7,
            center: [108.17377929686404, 35.69178936670419]
          })
        })
      }
    }
</script>

<style scoped>
  #viewDiv {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 95vh;
  }
</style>

最终结果图：