zoukankan      html  css  js  c++  java
  • vue中使用esri-loader加载Arcgisapi for js 4.x版本显示地图的简单demo

    4的版本和3的版本差异在于:
    (1)3的版本中之需要引入一个map创建一个map对象即可,4的版本必须要一个MapView来配合map才能正常显示效果
    (2)用loadModules加载esri/Map,在4的版本中Map为大写,3为小写
     
    在使用loadModules加载arcgisapi for js中的模块的时候如果不传入第二个option参数则会去官网找最新的js和css包,当然可以添加opetion参数让esload去自己指定的地址加载arcgisapi for js的包和css文件等。
    <template>
      <div class="wrapper">
        <div id="map" class="map"></div>
      </div>
    </template>
     
    <script>
    import esriLoader from "esri-loader";
    export default {
      name: "",
      components: {},
      props: {},
      data() {
        return {};
      },
      created() {},
      mounted() {
        esriLoader.loadModules(["esri/Map","esri/views/MapView"]).then(([Map,MapView]) => {
          const map = new Map({
            basemap: "topo-vector",
          });
          const view = new MapView({
            container: "map",
            map: map,
            zoom: 4,
            center: [15, 65], 
          });
        });
      },
      computed: {},
      methods: {},
    };
    </script>
    <style scoped>
    .map {
       100%;
      height: 100vh;
    }
    </style>
  • 相关阅读:
    01 mybatis框架整体概况(2018.7.10)-
    第一课(2018.7.10)
    JavaEE 企业级分布式高级架构师课程_汇总贴
    5-1条件运算符 & 5-2
    5-3运算符的优先级
    4-3逻辑非运算符及案例 & 4-4
    4-1逻辑与运算符介绍 & 4-2逻辑或运算符介绍
    3-3if-else条件结构 & 3-4 & 3-5
    3-2if条件结构
    3-1关系运算符
  • 原文地址:https://www.cnblogs.com/maycpou/p/14792857.html
Copyright © 2011-2022 走看看