ArcGIS API for JavaScript

This is the first day of my participation in the First Challenge 2022.

Recently in my work, I need to use ArcGIS in VUE to realize the map and carry out a series of operations on it. Because I was also the first time contact to this thing, also not very good, just like on the Internet access to information, but rarely to check the information, and a description of the website is basically for native js sample, so I want to work for their own things in these days, for a record here, also facilitate subsequent view.

What is ArcGIS?

ArcGIS is a comprehensive and scalable GIS platform, providing complete solutions for users to build a complete GIS system. — quote from the official website

It can collect geographic information for data visualization, but also can carry out such as: geographic coding and search, demographic data, spatial analysis and other operations.

To put it simply, I personally think ArcGIS is a software that can draw maps, and then we developers can visualize these data through the API provided by the official, and build them in our own applications. Go to 😂.

The preparatory work

Vue – CLI Creates a VUE project
Arcgis API for javascript 3.x version

I’m just going to take you through the door, do some examples, get a feel for the API.

Create and load the map

Let’s take a look at the current directory structure (focusing only on those in the SRC folder) :

| - SRC | - components | | - Map / / used to write a Map component - App. Vue | - main. JsCopy the code

After looking at the directory structure, let’s move on to the example of creating and loading a map.

We enter thesrc/components/Map/index.vueTo write code:

<template>
  // This div acts as a container for the map
  <div id="Map"></div>
</template>

<style scoped>
    /* Version 3.39 map style */
    @import url(https://js.arcgis.com/3.39/esri/css/esri.css);
    
    .map {
      width: 100%;
      height: 100%;
    }
</style>
Copy the code

The introduction ofesri-loaderIt can be used to help vUEArcGIS API for JavaScript:

// Install first
npm i esri-loader

// Do the import
import * as esriLoader from "esri-loader"; 
Copy the code

Complete the first two steps, we can start to build arcGIS map, is not very exciting 😁

Write the initialization function:

function init() {

    const options = {
      url: "https://js.arcgis.com/3.39/".// ArcGIS version resources, I introduced the 3.39 version
    };
    
    esriLoader.loadModules(["esri/map"."dojo/domReady!"], options).then(([Map]) = > {
        this.map = new Map({
              basemap: "topo-vector".// Map style
              center: [19.82.41.33].// The center of the map
              zoom: 3.// The number of levels to zoom in on the map})})}Copy the code

And finally, let’s takeMapComponent introduction toAppAnd you can see it on our pagearcgisMap, as follows:

Add markers to the map

Please hold that excited heart, now we will find a location on the map, and add a marker to it, so that we can find it better.

We’re going to build on that and introduce something elseAPI:

  "esri/map",
+ "esri/geometry/Point",
+ "esri/graphic",
+ "dojo/_base/array","dojo/domReady!" .Copy the code

After the map is loaded, let’s add marker points

esriLoader.loadModules(["esri/map"."esri/geometry/Point"."esri/graphic"."dojo/_base/array"."dojo/domReady!",], options).then(([Map, Point, Graphic, arrayUtils]) = > {
   this.map = new Map({
       basemap: "topo-vector".// Map style
       center: [19.82.41.33].// The center of the map
       zoom: 3.// The number of levels to zoom in on the map
   });
   
   // After the local diagram is loaded, execute the mapLoaded function
   this.map.on("load", mapLoaded);
   
   function mapLoaded() {
       
       let self = this; // Store this here
   
       // Mark the latitude and longitude coordinates of a point, can be a single or multiple, or an empty array
       let point = [
             [19.82.41.33],
             [16.37.48.21]];// Here is a processing of the array of coordinates, and the corresponding coordinates to create a marker point, add to the map.
       // new Graphic: Create a new Graphic object
       // New Point: create a Point based on latitude and longitude
       arrayUtils.forEach(point, function (point) {
          var graphic = new Graphic(
                new Point(point),
                createSymbol(iconpath, fill_color)
          );
          self.map.graphics.add(graphic);
       });
   }
   
   function createSymbol(path, color) {
      / / new esri. Symbol. SimpleMarkerSymbol: plot points in the layer
      var markerSymbol = newesri.symbol.SimpleMarkerSymbol(); Markersymbol.setpath (sets the point's style); markerSymbol.setColor(newDojo. Color(sets the dot's fill Color); Markersymbol.setoutline (set point outline);returnmarkerSymbol; }})Copy the code

When we execute this function, two markers appear on the map, as shown below:

The end is just for a better beginning 🥰

Seeing this, I believe that you should not be as helpless as I used to be to use ArcGIS in VUE.

The source code

Create and load the map

// src/components/Map/index
<template>
  <div class="map" id="Map"></div>
</template>

<script>
import * as esriLoader from "esri-loader"; / / introduction of esri - loader
export default {
  name: "Map".created() {
    this.init(); // Initialize the map
  },
  methods: {
    init() {
      // ArcGIS configuration
      const options = {
        url: "https://js.arcgis.com/3.39/"}; esriLoader.loadModules(["esri/map"."dojo/domReady!"], options).then(([Map]) = > {
        this.map = new Map("Map", {
          basemap: "topo-vector".center: [19.82.41.33].zoom: 3}); }); ,}}};</script>


<style scoped>
/* Version 3.39 map style */
@import url(https://js.arcgis.com/3.39/esri/css/esri.css);
.map {
  width: 100%;
  height: 100%;
}
</style>
Copy the code

// src/App.vue
<template>
  <div id="app">
    <Map/>
  </div>
</template>

<script>
import Map from './components/Map'

export default {
  name: 'App'.components: {
    Map}}</script>
Copy the code

Add markers to the map

// src/components/Map/index
<template>
  <div class="map" id="Map"></div>
</template>

<script>
import * as esriLoader from "esri-loader"; / / introduction of esri - loader
export default {
  name: "Map".data() {
    return {
      map: null}; },created() {
    this.init(); // Initialize the map
  },
  methods: {
    init() {
      // ArcGIS configuration
      const options = {
        url: "https://js.arcgis.com/3.39/"}; esriLoader .loadModules( ["esri/map"."esri/geometry/Point"."esri/graphic"."dojo/_base/array"."dojo/domReady!",
          ],
          options
        )
        .then(([Map, Point, Graphic, arrayUtils]) = > {
          let self = this; // Store the current this pointer

          / / arcgis configuration
          this.map = new Map("Map", {
            basemap: "topo-vector".center: [19.82.41.33].zoom: 3});// After the local diagram is loaded, execute the mapLoaded function
          this.map.on("load", mapLoaded);

          function mapLoaded() {
            // Mark the latitude and longitude coordinates of the point
            let point = [
              [19.82.41.33],
              [16.37.48.21]];// The image of the mark point (SVG)
            let iconpath =
              "M528 32c325.056 32 160 196.8 160 399.36c0 75.2 22.656 147.584 65.024 208.48 2.112 3.648 4.256 7.168 6.784 10.592l268.608 353.472c7.296 8.096 17.088 12.576 27.584 12.576 10.368 0 20.224-4.512 28.768-14.08l267.36-352c2.624-3.52 4.896-7.36 6.112-9.6A364.864 364.864 0 0 896 399.36C896 196.8 730.912 32 528 32z m0 498.72a131.52 131.52 0 0 1-131.456-131.232 131.488 131.488 0 0 1 262.88 0 131.52 131.52 0 0 1-131.424 131.2z";
            let fill_color = "#80B7F9";

            arrayUtils.forEach(point, function (point) {
              var graphic = new Graphic(
                new Point(point),
                createSymbol(iconpath, fill_color)
              );
              self.map.graphics.add(graphic);
            });
          }

          function createSymbol(path, color) {
            var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
            markerSymbol.setPath(path);
            markerSymbol.setColor(new dojo.Color(color));
            markerSymbol.setOutline(null);
            returnmarkerSymbol; }}); ,}}};</script>
Copy the code

I will also be updated for you and this kind of related articles, but also ask you to leave a small praise 😁

What is ArcGIS?

The preparatory work

Create and load the map

Add markers to the map

The end is just for a better beginning 🥰

The source code

Create and load the map

Add markers to the map

Related Posts

Get a peek at browser rendering from the Chromium source

【 UNI-APP 】 Optimization methods and suggestions for UNIAPP project

How to Use Canvas to draw a funny picture