• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

arcGis引入vue中

开发技术 开发技术 1周前 (05-13) 5次浏览

首先创建vue-cli的脚手架

1.npm i -globa vue-cli

2.vue init webpack

3.选择创建自己的vue项目

4.npm install –save esriloader(very important)

5.在hellowword.vue文件中引入具体代码如下

<template>
<div class=”fx”></div>

</template>

<script>
import { loadModules } from ‘esri-loader’;

export default {
  name: ‘web-map‘,
  mounted() {
    loadModules([‘esri/Map’, ‘esri/views/MapView’], { css: true })
    .then(([ArcGISMap, MapView]) => {
      const map = new ArcGISMap({
        basemap: ‘topo-vector’
      });

      this.view = new MapView({
        container: this.$el,
        mapmap,
        center: [-118, 34],
        zoom: 8
      });
    });
  },
  beforeDestroy() {
    if (this.view) {
      this.view.container = null;
    }
  }
};

</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>
.fx {
  padding: 0;
  margin: 0;
  width: 1920px;
  height: 1080px;
}
</style>

程序员灯塔
转载请注明原文链接:arcGis引入vue中
喜欢 (0)