vue+arcgis

Posted 2020-10-10

wan网上资料真的太少了  不过好在官网提供了esri-loader  而且有样例  但是这也让我花费了一天来解决  

id的名字和地图的名字相同   懒加载中的两个this不能少  

<template>
<div id="map">     ///这个map和 

</div>
</template>

<script>
    import esriLoader from ‘esri-loader‘
    export default {
        data() {
            return {

            }
        },
        mounted: function() {    
            if(!esriLoader.isLoaded()) {
                // no, lazy load it the ArcGIS API before using its classes
                esriLoader.bootstrap((err) => {
                    if(err) {
                        console.error(err);
                    } else {
                        // once it‘s loaded, create the map
                        this.createMap();    //这两个this不可少
                    }
                }, {
                    // use a specific version instead of latest 4.x
                    url: ‘https://js.arcgis.com/3.20/‘
                });
            } else {
                // ArcGIS API is already loaded, just create the map
                this.createMap();
            }

        },
        methods: {
            createMap: function() {
                // first, we use Dojo‘s loader to require the map class
                esriLoader.dojoRequire([‘esri/map‘], (Map) => {
                    // create map with the given options at a DOM node w/ id ‘mapNode‘
                    let map = new Map(‘map‘, {     //这个map和开头id的必须相同
                        center: [117.10, 39.10],
                        zoom: 10,
                        basemap: ‘osm‘　　　　　　　　　　　　　　　　　　
                    });
                });
            }
        }
    }
</script>

<style>
     @import url(‘https://js.arcgis.com/3.15/dijit/themes/tundra/tundra.css‘);
  @import url(‘https://js.arcgis.com/3.20/esri/css/esri.css‘);
    @import url(‘https://js.arcgis.com/4.5/esri/css/main.css‘);
</style>