vue+arcgis 4.x 开发展示底图

爱被打了一巴掌 2021-07-31 14:32 476阅读 0赞

1.安装依赖包

npm install esri-loader

2.在入口函数中 main.js 配置加载 js 和css 文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70][]

3.地图展示页面 ,map.vue

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70 1][]

4.完整代码

<template>
        <div>
            <div id="viewDiv">
            </div>      
        </div>    
        </template>
        <script>
       import  { loadModules } from 'esri-loader'
        export default {
            name: 'mymap',
            data() {
                return {}
            },
            methods: {
              createMap: function () {
                loadModules(['esri/views/MapView', 'esri/WebMap','esri/Map'])
                .then(([MapView, WebMap,Map]) => {
                    var map = new Map({
                        basemap: "streets"
                    });
                    var view = new MapView({
                    map: map,
                    container: 'viewDiv'
                    });
                })
                .catch(err => {
                    console.error(err);
                })           
              }
            },
            mounted() {
             this.createMap();
            } 
        }
        </script>
        <style lang="stylus" rel="stylesheet/stylus">
     @import '../../common/stylus/mixin';   
        #viewDiv
          padding: 0
          margin: 0
          min-height: 200px
          min-width: 200px
        </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70]: /images/20210731/e50c778836ae41aab69b618895a6e915.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70 1]: /images/20210731/1c3ebded2cbc42f291d8029a60dee340.png