Vue arcGIS data on the Internet is relatively little, here to sort out and share the code, I hope the novice can be a good entry. The content achieved: 1. Obtain the image section display base by mapServer 2. Obtain the current browser (PC) by Autonavi to display the current location

steps

1. Install the ARCGIS plug-in ESRI-Loader of Vue

npm install esri-loader

2. Import the ESRI Loader

import { loadModules, loadCss } from "esri-loader";

Initialize the map

Use the image slice interface on the web “map.geoq.cn/ArcGIS/rest…” The specific items can be replaced according to the image slice interface returned from the back end note: the order of the modules in load should be the same as the order of the class names used

  mounted() {
       loadModules([
      "esri/views/MapView"."esri/Map"."esri/layers/TileLayer"."esri/layers/GraphicsLayer"."esri/widgets/Fullscreen"."esri/widgets/Zoom"."esri/widgets/ScaleBar"."esri/widgets/Home"."dojo/domReady!",
    ])
      .then(
        ([
          MapView,
          Map,
          TileLayer,
          GraphicsLayer,
          Fullscreen,
          Zoom,
          ScaleBar,
          Home,
        ]) = > {
          const tilelayer = new TileLayer({
            url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"});this.map = new Map({});
          this.map.add(tilelayer);
          this.graphicsLayer = new GraphicsLayer();
          this.map.add(this.graphicsLayer);
          this.view = new MapView({
            map: this.map,
            container: "viewDiv".zoom: 10.center: [120.619585.31.299379].qualityProfile: "high"});//-- Component configuration
          this.view.ui.empty("top-left"); // Clears the upper-left scaling component
          // 1
          this.view.ui.add(
            new ScaleBar({
              view: this.view,
              unit: "metric".// The scale bar displays both metric and non-metric units.{}),position: "bottom-left"});// 2
          this.view.ui.add(
            new Home({
              view: this.view,
              container: "home",})."top-right"
          );
          // 3
          this.view.ui.add(
            new Fullscreen({
              view: this.view,
            }),
            "top-right"
          );
          // 4
          this.view.ui.add(new Zoom({ view: this.view }), "top-right");
        }
      )
      .catch((err) = > {
        console.error(err);
      });
  }
Copy the code

After initialization, the page is as follows. The current Center coordinate is set to Suzhou

4. Get the current location and click

For a long time, ARCGISG did not obtain the current positioning method according to the information of the current browser or IP, because it borrowed the API of the third party Amap to achieve. Index.html reference Scott js code < script type = “text/javascript” SRC = “https://webapi.amap.com/maps?v=1.4.4&key= own key” > < / script >

methods:{
  async getLocation() {
      this.locationPoint = await getLocationFunction()
  },
  getLocationFunction() {
  return new Promise((resolve, reject) = > {
    window.AMap.plugin('AMap.Geolocation'.() = > {
      var geolocation = new window.AMap.Geolocation({
        enableHighAccuracy: true.// High precision positioning
        timeout: 1000.// The timeout period
      })

      geolocation.getCurrentPosition(
        (status, result) = > {
          if (result && result.position) {
            resolve(result.position)
          }
        },
        () = > reject()
      )
    })
  })
}
}
Copy the code
5, add location point coordinates
   setLocationPoint() {
      loadModules([
        "esri/geometry/Point"."esri/Graphic"."dojo/domReady!",
      ]).then(([Point, Graphic]) = > {
        / / - coordinate points
        const symbol = {
          type: "picture-marker".url: require("@/assets/images/point.png"), // Create a custom image
          width: "20px".height: "25px"};var point = new Point({
          type: "point".longitude: this.locationPoint[0].latitude: this.locationPoint[1]});const pointGraphic = new Graphic({
          geometry: point,
          symbol,
        });
        this.graphicsLayer.add(pointGraphic);
        // Update the center point
        this.view.center = this.locationPoint;
      });
    },
Copy the code

Final display result