mapactions详解

发布时间：2023-05-19

一、简介

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 = [];
        eds.updateFeatures = [];
        edits.deleteFeatures = [];
        //update HTML with edit count
        updateEditCount();
      });
    }
    e.preventDefault();
  }
});

上面的代码演示了如何在地图上添加标注的完整实现，包括增加修改和删除功能。

七、总结

mapactions是一个非常有用的JavaScript模块，提供了许多常见的地图操作和交互功能。在开发ArcGIS API for JavaScript应用程序时，mapactions尤为重要。本文详细介绍了使用mapactions实现平移、缩放、选择和激活元素、绘图和添加和编辑标注的完整实现过程。

推荐文章