利用arcgis api在分屏界面下绘制点、以及拉框选择

为了更加清晰的实现对比更能需要对其位置进行标注，所以我分别用点和矩形区域对界面进行了设置。

但是代码中也存在一个问题，因为图层是在map的基础上添加的，所以两个视图都使用了同一个地图即：

需要引入的类：

import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"
import Point from "@arcgis/core/geometry/Point";
import Graphic from "@arcgis/core/Graphic";
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel";

 

const map = new Map({
                 basemap: "satellite",
             });

             const map2 = new Map({
                 basemap: "satellite",
             });
             
            //  let imageLayer = new MapImageLayer({
            //      url:''
            //  })
            //  Map.add(imageLayer);
             const view1 = new MapView({
                    container:"view1Div",
                    map: map,
                    center:[111.670801,40.818311],
                    snapToZoom: false,
                    zoom:10
             })

             const view2 = new MapView({
                    container:"view2Div",
                    map: map2,
                    center:[111.670801,40.818311],
                    zoom:10,
                    snapToZoom: false,
             })

首先是绘制点的情况

var graphicsLayer = new GraphicsLayer();


        // 点的样式
        var pointSymbol = {
        type: "simple-marker",
        style: "circle",
        size: 12,
        color: "blue"
    }
         view1.on("click", (event) => {
            
           //打印输出点击位置的坐标
            console.log(event.mapPoint.x);
            console.log(event.mapPoint.y);

            map.add(graphicsLayer);  
        var point = new Point({
            x: event.mapPoint.x,
            y: event.mapPoint.y,
            spatialReference: view1.spatialReference
        });
        var pointGraphic = new Graphic({
            geometry: point,
            symbol: pointSymbol
        });
                
        graphicsLayer.add(pointGraphic);    

矩形框的绘制：产生的效果就是，在左侧的地图界面进行点击，在界面进行拖动，在两个不同的界面相同位置产生两个矩形框。

const polygonGraphicsLayer = new GraphicsLayer();
        map.add(polygonGraphicsLayer);

        // create a new sketch view model set its layer
       
         const sketchViewModel = new SketchViewModel({
          view: view1,
          layer: polygonGraphicsLayer
        });

    sketchViewModel.create("rectangle");

 

如果仅仅使用一个map的形式的话，在切换地图时就会出现两侧地图全部切换的情况，所以为了能够进行地图的切换，我又改进了一下，效果是在左侧画框，在右侧的相同位置显示框选的结果

其实也比较简单，就是再定义一个map对象，将绘制的图层添加到右侧的map中

    var polygonGraphicsLayer = new GraphicsLayer();
  
         view1.on("click", () => {

        map2.add(polygonGraphicsLayer);
        polygonGraphicsLayer.removeAll();

         const sketchViewModel = new SketchViewModel({
          view: view1,
          layer: polygonGraphicsLayer
          
        });

    sketchViewModel.create("rectangle");
    
});

可能还是存在一定的问题，最佳的效果还是两侧都能够出现矩形框。第一次做，只能实现到这种程度了