Arcgis for JavaScript -- goTo，GraphicsLayer，Graphic的使用

本篇文档内容

主要介绍 goTo， GraphicsLayer 及 Graphic的使用。

举例题目

打开3D地球，初始化位置在中国，点击按钮后转动到美国纽约。使用图标标注出美国纽约的位置。如图所示：

主要涉及的Arcgis知识点

1. GraphicsLayer

用于创建图形层

GraphicsLayer包含一个或多个Graphic，GraphicsLayer中的每个图形都在SceneView或MapView内的LayerView中呈现。

创建完图形图层，要添加到map中，否则无法显示。

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

2. Graphic

• 用于创建图形，它可以包含几何图形，符号和属性。图形显示在GraphicsLayer中。
• 常用属性：geometry，symbol

geometry : 描绘图形的位置（坐标），和图形类别（点，线，面）

symbol : 图形的样式，常用属性有图形类型，颜色，外边线的颜色和宽度等。

// 纽约位置
    var point = {
      type:"point",
      x:-74.005,
      y: 40.714,
      z:1010
    };

    // 符号样式
    var markerSymbol = {
      type: "simple-marker",
      color:[ 51,51, 204, 0.3 ],
      outline:{
        color: [255, 255, 255],
        width: 2
      }
    };
 var pointGraphic = new Graphic({
      geometry: point, //集合位置
      symbol: markerSymbol //符号
    });

3. goTo

goTo 方法用于地图位置的跳转，本文中使用了 center 的方法，跳转到给出的经纬度的位置。例如：

view.goTo({
  center: [-74.005,40.714]
})

还有以下方法，用坐标的方式

 view.goTo({
    position: {
      x: _this.tempGraphic.x,
      y: _this.tempGraphic.y,
      z: 2000,
      spatialReference: {
        wkid: 4326
      }
    },
    heading: 0,
    tilt: 0
  })

完整示例代码

<template>
  <div id="sceneView">
    <div id="viewDiv"></div>
    <div id="newYork">
      <span>纽约</span>
    </div>
  </div>
</template>

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

  export default {
    name: "",
    data() {
      return {
        options: {
          url: 'https://js.arcgis.com/4.13/'
        }
      }
    },
    mounted() {
      this.getMap()
    },
    methods: {
      getMap() {
        loadModules([
          "esri/Map",
          "esri/views/SceneView",
          "esri/layers/GraphicsLayer",
          "esri/Graphic",
          "dojo/domReady!"
        ], this.options)
          .then(([Map, SceneView, GraphicsLayer, Graphic]) => {
            const map = new Map({
              basemap:"hybrid",
              ground:"world-elevation"
            })

            // 创建视图
            let view = new SceneView({
              container:"viewDiv",
              map:map,
              center:[116.49, 39.74]
            })

            // 添加图形图层
            var graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer)

            // 纽约位置
            var point = {
              type:"point",
              x:-74.005,
              y: 40.714,
              z:1010
            };

            // 符号样式
            var markerSymbol = {
              type: "simple-marker",
              color:[ 51,51, 204, 0.3 ],
              outline:{
                color: [255, 255, 255],
                width: 2
              }
            };

            // 创建图形
            var pointGraphic = new Graphic({
              geometry: point, //集合位置
              symbol: markerSymbol //符号
            });

            // 添加到图层
            graphicsLayer.add(pointGraphic);

            var newYorkBtn = document.getElementById("newYork")

            // 监听切换按钮
            newYorkBtn.addEventListener("click",function () {
              console.log(newYorkBtn.innerText)
              if(newYorkBtn.innerText === '纽约'){
                view.goTo({
                  center: [-74.005,40.714]
                })
                newYorkBtn.innerText="北京"
              }else {
                view.goTo({
                  center: [116.49, 39.74]
                })
                newYorkBtn.innerText="纽约"
              }
            })

          })
      }
    }
  }
</script>

<style scoped>
  @import url("https://js.arcgis.com/4.13/esri/themes/light/main.css");
  #sceneView {
    width: 100%;
    height: 100%;
  }

  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }

  #newYork{
    position: absolute;
    top: 15px;
    left: 70px;
    background: white;
    opacity: 0.85;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>