码迷,mamicode.com
首页 > 其他好文 > 详细

vue+arcgis

时间:2017-10-11 11:15:39      阅读:955      评论:0      收藏:0      [点我收藏+]

标签:specific   options   vue   div   arc   gis   class   blog   而且   

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>

 

vue+arcgis

标签:specific   options   vue   div   arc   gis   class   blog   而且   

原文地址:http://www.cnblogs.com/shaotang/p/7648824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!