vue创建arcgis

<template>
  <!-- <div id='aa'> {{jingDu}}</div> -->
  <div>
    <div><b>经度:</b>{{jingDu}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>纬度:</b>{{weiDu}}
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>地点:</b>{{address}}</div>
    <div id="SceneView"></div>
  </div>
</template>

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

export default {
  data() {
    return {};
  },
  mounted() {
    this.createView();
  },
  created(){
    this.getParam()
  },
  methods: {
    getParam(){

      var  jingDu = this.$route.params.jingDu;
      var  weiDu = this.$route.params.weiDu;
      var  address = this.$route.params.address;
      this.jingDu = jingDu;
      this.weiDu = weiDu;
      this.address = address;
      console.log(Jingdu)
    },


    //创建视图
    createView() {
      let options = {
        url: "https://js.arcgis.com/4.12/dojo/dojo.js",
        css: "https://js.arcgis.com/4.12/esri/css/main.css"
      };

      // loadModules(["esri/config", "esri/Map","esri/views/MapView","esri/Graphic","esri/layers/GraphicsLayer","esri/layers/FeatureLayer","esri/geometry/Point"], options).then(
        // ([esriConfig,Map, MapView, Graphic, GraphicsLayer]) => {


          loadModules([ "esri/config",
       "esri/Map",
       "esri/views/MapView",
       "esri/Graphic",
       "esri/layers/GraphicsLayer",
	    "esri/layers/FeatureLayer",
		"esri/geometry/Point"], options).then(
                  ([esriConfig,Map, MapView, Graphic, GraphicsLayer]) => {
              let map = new Map({
                basemap: "osm",
                ground: "world-elevation"
              });


          let view = new MapView({
            container: "SceneView", // Reference to the DOM node that will contain the view
            map: map ,// References the map object created in step 3
            center: [this.jingDu , this.weiDu],
            zoom: 11 ,
          });

          var graphicsLayer = new GraphicsLayer();
           map.add(graphicsLayer);

           //点
          var point = {
               type: "point",
               longitude: this.jingDu,
               latitude: this.weiDu
           };

     var simpleMarkerSymbol = {
         type: "simple-marker",
         color: [244, 0, 0],  // orange
         outline: {
           color: [255, 255, 255], // white
           width: 1
         }
     };
     // Create attributes
     var attributes = {
         Name: "地理：",  // The name of the
         Location: this.address,  // The owner of the
     		 att:"本科",
     		 start:"1948",
     		 video1:"<video src='https://video.pearvideo.com/mp4/adshort/20211231/cont-1749105-15812263_adpkg-ad_hd.mp4' controls autoplay width='250px' height='200px'> ",
     };
     var popupTemplate = {
         title: "{Name}",
         content: "位置在: <b>{Location}</b> " +
     		 // "<br>学校性质:<b>{att}"+
     		 // "<br>建校时间:<b>{start}" +
     		 "<br>视频介绍:{video1}"
     };

     var pointGraphic = new Graphic({
         geometry: point,
         symbol: simpleMarkerSymbol,
         // "symbol": {
         //            "type": "picture-marker",
         //            "url": "坐标.png",
         //            "width": "30px",
         //            "height": "30px"
         //          },
         attributes: attributes,
         popupTemplate: popupTemplate
     });
         graphicsLayer.add(pointGraphic);




          console.info(view, 111);
        }
      );
    }
  },
  watch:{
    '$route':'getParam'
  }
};
</script>

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