arcgis api for 4.x + vue 开发笔记

安装esri-loader

npm install --save esri-loader

加载线上地图+小部件 并向地图添加一个点

<template>
  <div id="SceneView"></div>
</template>

<script>
import { loadModules } from "esri-loader";
export default {
  data() {
    return {
      markpic:require('../assets/images/icon/manyouImg.png')
    };
  },
  methods: {
    //创建视图
    createView() {
      let options = {
        url: "https://js.arcgis.com/4.15/",
        css: "https://js.arcgis.com/4.15/esri/themes/light/main.css",
      };
      //  "esri/views/SceneView" 3d  2d是MapView
      loadModules(
        [
          "esri/Map",
          "esri/views/SceneView",
          "esri/layers/TileLayer", //地图图层可以使用这个类来添加
          //"esri/layers/FeatureLayer",//自定义的图层
          "esri/Graphic", //图像，点线面等
          "esri/widgets/Fullscreen", //全屏小部件
          "esri/widgets/Zoom", //放大缩小部件
          "dojo/domReady!",
        ],
        options
      ).then(([Map, SceneView, TileLayer, Graphic, Fullscreen, Zoom]) => {
        let map = new Map({
          basemap: "streets",
          ground: "world-elevation",
        });

        let mapview = new SceneView({
          container: "SceneView", // Reference to the DOM node that will contain the view
          map: map, // References the map object created in step 3
          zoom: 5,
          center: [120.7346125, 25.0563901],
        });
        //在右上角添加全屏组件
        mapview.ui.add(
          new Fullscreen({
            view: mapview,
          }),
          "top-right"
        );
        // mapview.ui.add(new Zoom({ view: mapview }), "top-right"); //在右上角添加缩放组件
        var point = {
          //创建点，并确定点的经度和纬度
          type: "point", // autocasts as new Polyline()
          x: 120.3,
          y: 30.68,
        };
        var point2 = {
          type: "point", // autocasts as new Polyline()
          x: 115.3,
          y: 27.68,
        };
        //添加图片修饰点
        var lineSymbol = {
          type: "picture-marker", // autocasts as new PictureMarkerSymbol()
          url: this.markpic,
          //   width: "64px",
          //   height: "64px"
        };
        var pointGraphic = new Graphic({
          geometry: point2,
          symbol: lineSymbol,
          // attributes: lineAtt,
          // popupTemplate: template,
        });
        //将绘制的点加入地图图层
        mapview.graphics.addMany([pointGraphic]);
      });
    },
  },
  mounted() {
    this.createView();
  },
};
</script>

<style scoped>
#SceneView {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>