VUE项目arcgis初探

概述

随着大前端的发展，GIS服务大佬ArcGIS API for JavaScript版本升级到4.0之后AMD和ESM模块化得以支持。

vue项目搭建

搭建空的vue项目请参考vue-cli

接着安装arcgis依赖

// AMD
npm install --save esri-loader

// es module
npm install @arcgis/core

官方链接

演示示例

一图顶千言：

代码：

<template>
  <div>
    <div id="viewDiv"></div>
    <button @click="computerScreen">计算屏幕坐标</button>
  </div>
</template>

<script>
let map = null,
  view = null;
import Map from "@arcgis/core/Map";
// import SceneView from "@arcgis/core/views/SceneView";
import MapView from "@arcgis/core/views/MapView";
import esriConfig from "@arcgis/core/config";
import Graphic from "@arcgis/core/Graphic";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.createView();
    this.drawGeometry();
  },
  beforeDestroy() {
    this.destroyData();
  },
  methods: {
    // 初始化销毁数据
    destroyData() {
      view.destroy();
      map.destroy();
      view = null;
      map = null;
    },
    createView() {
      // key AAPK5fc583c193664d3dbdb664130690793eL3g5sfdLFmSxJthgEYjcR-CQpFHINVJbI43zybAml__Q4Iwrbi1ZGvktbfVH82Uk
      esriConfig.apiKey =
        "AAPK5fc583c193664d3dbdb664130690793eL3g5sfdLFmSxJthgEYjcR-CQpFHINVJbI43zybAml__Q4Iwrbi1ZGvktbfVH82Uk";
      esriConfig.assetsPath = "./assets";
      map = new Map({
        basemap: "topo-vector",
      });
      view = new MapView({
        container: "viewDiv", // Reference to the view div created in step 5
        map: map, // Reference to the map object created before the view
        zoom: 13, // Sets zoom level based on level of detail (LOD)
        center: [-118.805, 34.027],
        logo: false, //不显示Esri的logo
      });
      view.on("click", this.clickInfo);
      console.log(view);
    },
    clickInfo(event) {
      console.log(event);
    },
    // 画图
    drawGeometry() {
      const graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);
      const point = {
        //Create a point
        type: "point",
        longitude: -118.80657463861,
        latitude: 34.0005930608889,
      };
      const simpleMarkerSymbol = {
        type: "simple-marker",
        color: [226, 119, 40], // Orange
        outline: {
          color: [255, 255, 255], // White
          width: 1,
        },
      };
      const pointGraphic = new Graphic({
        geometry: point,
        symbol: simpleMarkerSymbol,
      });
      graphicsLayer.add(pointGraphic);
      // Create a line geometry
      const polyline = {
        type: "polyline",
        paths: [
          [-118.821527826096, 34.0139576938577], //Longitude, latitude
          [-118.814893761649, 34.0080602407843], //Longitude, latitude
          [-118.808878330345, 34.0016642996246], //Longitude, latitude
        ],
      };
      const simpleLineSymbol = {
        type: "simple-line",
        color: [226, 119, 40], // Orange
        width: 2,
      };

      const polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: simpleLineSymbol,
      });
      graphicsLayer.add(polylineGraphic);

      // Create a polygon geometry
      const polygon = {
        type: "polygon",
        rings: [
          [-118.818984489994, 34.0137559967283], //Longitude, latitude
          [-118.806796597377, 34.0215816298725], //Longitude, latitude
          [-118.791432890735, 34.0163883241613], //Longitude, latitude
          [-118.79596686535, 34.008564864635], //Longitude, latitude
          [-118.808558110679, 34.0035027131376], //Longitude, latitude
        ],
      };

      const simpleFillSymbol = {
        type: "simple-fill",
        color: [227, 139, 79, 0.8], // Orange, opacity 80%
        outline: {
          color: [255, 255, 255],
          width: 1,
        },
      };

      const popupTemplate = {
        title: "{Name}",
        content: "{Description}",
      };
      const attributes = {
        Name: "Graphic",
        Description: "I am a polygon",
      };

      const polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: simpleFillSymbol,

        attributes: attributes,
        popupTemplate: popupTemplate,
      });
      graphicsLayer.add(polygonGraphic);
    },
    // 计算坐标 toMap toScreen
    computerScreen() {
      const mapPoint = {
        x: -49.97,
        y: 41.73,
        spatialReference: {
          wkid: 4326,
        },
      };
      const screenPoint = view.toScreen(mapPoint);
      console.log(screenPoint);
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@arcgis/core/assets/esri/themes/dark/main.css";
#viewDiv {
  width: 100%;
  height: 80vh;
}
</style>

示例下载地址

总结

欢迎留言交流