• 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>
  • 相关阅读:
    快速整理sql表结构到wiki
    mac subline批量处理行
    iphone7忘记手机屏幕密码
    docker 常用命令
    初窥响应式布局
    用jquery写的一个图片轮播插件
    javascript中的对象和创建对象的主要模式
    用户注册界面(带js特效)
    用javascript实现简易留言板
    用javascript实现的购物车实例
  • 原文地址:https://www.cnblogs.com/maycpou/p/14792857.html
Copyright © 2020-2023  润新知