mapactions詳解

一、簡介

mapactions是ArcGIS API for JavaScript中最重要的模塊之一，提供了基本的地圖操作和交互，使得用戶能夠在應用中使用地圖進行可視化分析和呈現。

mapactions是一個包含一系列函數的JavaScript模塊，這些函數被用於創建和操作地圖。該模塊可以幫助開發者實現地圖的基本功能，如縮放和平移、地圖導航和標註等。

在ArcGIS API for JavaScript中，開發者經常需要使用mapactions模塊編寫地圖應用程序。因此，了解mapactions的特性和功能很重要。

二、支持的操作

mapactions支持多種常見的地圖操作，包括：

• 平移和縮放地圖
• 選擇和激活地圖元素
• 繪製圖形，如點，線和面
• 添加和編輯標註

下面就針對這些操作來詳細說明。

三、平移和縮放地圖

在地圖應用中，用戶經常需要通過平移和縮放來瀏覽地圖。mapactions模塊提供的一些函數可以幫助實現這些操作。例如，可以使用panLeft()、panRight()、panUp()和panDown()函數來實現平移地圖，使用zoomIn()和zoomOut()函數來實現縮放地圖。

view.on("drag", function(event) {
  view.navigation.pan({
    dx: event.delta.x,
    dy: event.delta.y
  });
});
view.on("mouse-wheel", function(event) {
  event.stopPropagation();
  event.preventDefault();
  var factor = event.deltaY > 0 ? 0.9 : 1.1;
  view.navigation.zoomBy(factor, {anchor: event.native}, true);
});

上面的代碼演示了如何使用ArcGIS API的視圖模塊中的函數來實現平移和縮放地圖。

四、選擇和激活地圖元素

使用mapactions，可以選擇和激活特定的地圖元素，從而使它們突出顯示或交互可用。例如，可以使用activateTool(“pan”)函數來激活平移工具，使用selectFeatures()函數來選擇地圖上的特定要素。

view.on("click", function(event) {
  view.hitTest(event).then(function(response){
    var graphic = response.results.filter(function(result){
      return result.graphic.layer === featureLayer;
    })[0].graphic;
    view.popup.open({
      features: [graphic],
      location: event.mapPoint
    });
  });
});

上面代碼演示了如何使用ArcGIS API的視圖模塊中的函數來在地圖上選擇和激活元素。

五、繪製圖形

mapactions模塊還支持在地圖上繪製圖形的功能。可以使用draw()函數來實現這個功能，並且該函數可以選擇在地圖上繪製點、線或多邊形。繪圖事件可以通過on()函數來註冊。

var draw = new Draw({
  view: view
});
var action = "draw-polygon";
draw.on("draw-complete", function(event) {
  createFeature(event.geometry);
});
view.ui.add("text-div", "top-right");
function createFeature(geometry){
  view.graphics.add(new Graphic({
    geometry: geometry,
    symbol: {
      type: "simple-fill",
      color: [51, 51, 204, 0.5],
      outline: {
        color: "white",
        width: 1
      }
    }
  }));
}
document.getElementById('btn-polygon').onclick = function(){
  draw.reset();
  view.graphics.removeAll();
  draw.activate(Draw[action]);
}

上面的代碼演示了如何使用ArcGIS API的繪圖模塊和視圖模塊來繪製多邊形並在地圖上顯示。

六、添加和編輯標註

使用mapactions模塊，可以添加和編輯地圖上的標註。可以使用add()函數在地圖上添加標註，還可以使用selectFeatures()函數選擇標註並激活編輯操作。在編輯完成後，可以使用update()函數來更新標註。

const edits = {
  addFeatures: [],
  updateFeatures: [],
  deleteFeatures: []
};

let sketchViewModel, activeView;

view.when().then(function() {
  activeView = view;
  let config = {
    layerInfos: [{
      layer: featureLayer,
      enableEditing: true,
      enableAttribInspector: true,
      enablePopup: false
    }]
  };

  const editor = new Editor({
    view: view,
    layerInfos: config.layerInfos
  }, 'editorDiv');

  //listen for editor's apply button click event
  on(editor, 'apply', function(e) {
    applyEdits(e);
  });

  on(editor, 'delete', function(e) {
    removeFeature(e);
  });

  editor.on('load', function() {
    const layers = editor.layerInfos.map(function(layerInfo) {
      return layerInfo.layer;
    });

    //set up sketchViewModel
    sketchViewModel = new SketchViewModel({
      view: view,
      layer: layers[0]
    });

    //set up create button click event
    let createPoint = document.getElementById('create-point');
    createPoint.addEventListener('click', function() {
      activeView.graphics.removeAll();
      sketchViewModel.create('point', {tool: 'default'});
    });
  });

  //listen for sketchViewModel sketch-complete event
  sketchViewModel.on('create', function(event) {
    createFeature(event);
  });

  function createFeature(event) {
    var point = event.geometry;
    var attributes = {
      ObjectID: Date.now(),
      Tag: "",
      Description: "",
      Creator: ""
    };
    var feature = new Feature({
      geometry: point,
      attributes: attributes
    });
    edits.addFeatures.push(feature);

    //store edits in localStorage
    saveEditsToLocalStorage();

    //clear created graphic from map
    activeView.graphics.removeAll();
    view.popup.open({
      title: "Create New Feature: " + feature.attributes.ObjectID,
      location: feature.geometry
    });

    //update HTML with edit count
    updateEditCount();
  }

  function applyEdits(e) {
    let promise = null;
    if (edits.addFeatures.length > 0) {
      promise = featureLayer.applyEdits({
        addFeatures: edits.addFeatures,
        updateFeatures: null,
        deleteFeatures: null
      });
    } else if (edits.updateFeatures.length > 0) {
      promise = featureLayer.applyEdits({
        addFeatures: null,
        updateFeatures: edits.updateFeatures,
        deleteFeatures: null
      });
    } else if (edits.deleteFeatures.length > 0) {
      promise = featureLayer.applyEdits({
        addFeatures: null,
        updateFeatures: null,
        deleteFeatures: edits.deleteFeatures
      });
    }
    if (promise) {
      promise.then(function(response) {
        //clear edits array
        edits.addFeatures = [];
        edits.updateFeatures = [];
        edits.deleteFeatures = [];

        //update HTML with edit count
        updateEditCount();
      });
    }
    e.preventDefault();
  }

});

上面的代碼演示了如何在地圖上添加標註的完整實現，包括增加修改和刪除功能。

七、總結

mapactions是一個非常有用的JavaScript模塊，提供了許多常見的地圖操作和交互功能。在開發ArcGIS API for JavaScript應用程序時，mapactions尤為重要。本文詳細介紹了使用mapactions實現平移、縮放、選擇和激活元素、繪圖和添加和編輯標註的完整實現過程。