任务一:浏览器页面--左边显示片区列表,右边显示地图
方法:准备三个<div>容器,第一个为总容器,覆盖整个页面;第二个和第三个为第一个容器的子容器,各自占据页面左右两边。
任务二:
1.点击列表的新增按钮后,可以在地图上绘制新片区;
2.片区绘制完毕时,左边片区列表处弹出新增卡片,卡片中可以填写新增的片区名和备注信息,同时显示不可编辑的片区坐标数组;
3.点击确认创建后,提示创建信息,如果创建成功,刷新片区列表,显示新增片区后的列表。
关键方法:在创建地图的方法中,设置“新增”按钮的监听事件,在监听事件中,调用地图绘图控件sketch;然后再为sketch设置监听事件,返回片区坐标数组。
// 监听事件
document.getElementById('addArea').addEventListener("click", ()=> {
document.getElementById("viewDiv").focus();
areaSketch.create("polygon", { mode: "click" });
// 监听 sketch widget's create 事件.
areaSketch.on("create", (event)=> {
// check if the create event's state has changed to complete indicating
// 当图形(graphic)创建完成(complete)时.
if (event.state === "complete") {
// 将画出来的多边形从绘图layer上移除
// the completed graphic to the layer by default.
graphicsLayer.remove(event.graphic);
// 获取画出来的多边形的坐标数组
this.rings = event.graphic.geometry.rings[0];
// 新增表单的参数里 添加坐标数组
this.form.rings = this.rings;
console.log('graphic geometry', this.rings);
// 该参数控制右边列表中的 新增片区卡片 是否弹出
this.open = true;
}
});
});