标签: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>
标签:specific options vue div arc gis class blog 而且
原文地址:http://www.cnblogs.com/shaotang/p/7648824.html