安裝esri-loader

npm install --save esri-loader

加載線上地圖+小部件 并向地圖添加一個(gè)點(diǎn)

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

<script>
import { loadModules } from "esri-loader";
export default {
  data() {
    return {
      markpic:require('../assets/images/icon/manyouImg.png')
    };
  },
  methods: {
    //創(chuàng)建視圖
    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", //地圖圖層可以使用這個(gè)類來添加
          //"esri/layers/FeatureLayer",//自定義的圖層
          "esri/Graphic", //圖像，點(diǎn)線面等
          "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 = {
          //創(chuàng)建點(diǎn)，并確定點(diǎn)的經(jīng)度和緯度
          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,
        };
        //添加圖片修飾點(diǎn)
        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,
        });
        //將繪制的點(diǎn)加入地圖圖層
        mapview.graphics.addMany([pointGraphic]);
      });
    },
  },
  mounted() {
    this.createView();
  },
};
</script>

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