为了更加清晰的实现对比更能需要对其位置进行标注,所以我分别用点和矩形区域对界面进行了设置。
但是代码中也存在一个问题,因为图层是在map的基础上添加的,所以两个视图都使用了同一个地图即:
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, })View Code
首先是绘制点的情况
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");