[Vuejs]-Unable to run arcgis getting started scripts in vue app

by

0👍

✅

you can use “esri-loader” in your vue app

npm install "esri-loader"

then, in your Vue-Single-Page file

<template>
    <div id="map"></div>
</template>
<style scoped>
    #map{
        width:100%;
        height:300px;
    }
</style>
<script>
import { loadModules } from 'esri-loader';
export default{
    mounted(){

        // lazy load modules
        loadModules([
            'esri/layers/WebTileLayer',
            'esri/Map',
            'esri/views/SceneView',
        ], { css: true })
        .then(([WebTileLayer,Map,SceneView]) => {

            let map = new Map();

            // use Google Map Web tile
            let tiled_layer = new WebTileLayer({
                urlTemplate: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{level}!2i{col}!3i{row}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0',
            });
            map.add(tiled_layer);

            let map_view = new SceneView({
                map:map,
                container:"map",          
                scale:110329633.40563367, 
                center:[105.578034,34.062071]
            });

        });
    }
}
</script>

here is a simplest example for 2D map

<template>
    <div id="map" style="height:300px;width:300px;"></div>
</template>
<script>
import { loadModules } from 'esri-loader';
export default{
    mounted(){
        loadModules([
            "esri/Map",
            "esri/views/MapView"
        ], { css: true })
        .then(([Map,MapView]) => {
             let map = new Map({
                 basemap: "streets"
             });
             let view = new MapView({
                 container: "map",
                 map: map,
                 zoom: 4,
                 center: [15, 65]
             });
        });
    }
}
</script>

0👍

You could try the below. This will wait until mapScript has finished loading before calling the dependent code.

mounted() {
  let mapScript = document.createElement('script')
  mapScript.setAttribute('src', 'https://js.arcgis.com/4.15/')
  document.head.appendChild(mapScript);
  mapScript.addEventListener('load', () => {
      //run your code that is dependent on https://js.arcgis.com/4.15/
  });
}

Leave a comment