序文
以前作ったGaodeマップポリゴンエディタの吸着機能が最近編集できなくなりました。変更プロセス中にそれをメモしておいてください。
効果を達成する
インストール
npm i @amap/amap-jsapi-loader --save
コアコード
<template>
<div class="container">
<div id="container"></div>
<div class="input-card">
<el-button @click="createPolygon()">新建</el-button>
<el-button @click="polyEditor.open()">开始编辑</el-button>
<el-button @click="editClose">结束编辑</el-button>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
var polyEditor = "";
export default {
name: "AreaMap",
data() {
return {
map: null,
// polyEditor: null,
coordList: "",
timer: "",
};
},
props: ["pathList", "dataId"],
mounted() {
if (this.dataId) {
this.start();
console.log("修改");
} else {
this.echart();
console.log("添加");
}
},
methods: {
start() {
this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
},
async echart() {
clearInterval(this.timer);
console.log("接收参数", this.pathList);
// console.log(typeof JSON.parse(this.pathList));
await AMapLoader.load({
key: "申请好的Web端开发者Keyxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
"AMap.ToolBar",
"AMap.Driving",
"AMap.PolygonEditor",
"AMap.PlaceSearch",
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
this.map = new AMap.Map("container", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 10, //初始化地图级别
center: [113.08, 34.94], //初始化地图中心点位置
});
this.map.setFitView();
})
.catch((e) => {
console.log(e);
});
this.initEditor();
},
initEditor() {
var path1 = []
if (this.dataId) {
path1 = JSON.parse(this.pathList) || [];
}
var polygon1 = new AMap.Polygon({
path: path1,
});
this.map.add([polygon1]);
polyEditor = new AMap.PolygonEditor(this.map);
console.log(polyEditor);
console.dir(polyEditor);
polyEditor.on("add", (data) => {
console.log(data);
this.coordList = data.lnglat;
var polygon = data.target;
polygon.on("dblclick", () => {
polyEditor.setTarget(polygon);
polyEditor.open();
});
});
polygon1.on("dblclick", () => {
polyEditor.setTarget(polygon1);
polyEditor.open();
});
return polyEditor;
},
createPolygon() {
polyEditor.close();
polyEditor.setTarget();
polyEditor.open();
},
editClose() {
// console.log("this", this);
let that = this;
polyEditor.on("end", function (event) {
// event.target 即为编辑后的多边形对象
//多边形的坐标
this.coordList = event.target.getPath();
// console.log("coordList", this.coordList);
let mapList = [];
this.coordList.forEach((v) => {
console.log("v", v.lng, "--", v.lat);
mapList.push([v.lng, v.lat]);
});
that.$emit("mapList", mapList);
});
polyEditor.close();
},
},
beforeDestroy() {
clearInterval(this.timer);
},
};
</script>
<style lang="scss" scoped>
#container {
width: 100%;
height: 500px;
}
.container {
position: relative;
border: 1px solid rgb(204, 204, 204);
.input-card {
position: absolute;
bottom: 15px;
right: 15px;
}
}
</style>
ポリゴン座標の送信
「編集終了」をクリックして、編集したポリゴン座標を処理します。以下の通り
[[112.782253,35.045745],[112.916836,34.972633],[112.871517,34.875799],[112.665524,34.991761]]
editClose() {
// console.log("this", this);
let that = this;
polyEditor.on("end", function (event) {
// event.target 即为编辑后的多边形对象
//多边形的坐标
this.coordList = event.target.getPath();
// console.log("coordList", this.coordList);
let mapList = [];
this.coordList.forEach((v) => {
console.log("v", v.lng, "--", v.lat);
mapList.push([v.lng, v.lat]);
});
that.$emit("mapList", mapList);
});
polyEditor.close();
},
編集中にエコーが発生しました
pathList パラメータを受け取り、それを表示のために Polygon1 に配置します。
要約する
分別包装して使用する場合に使用する方法です。データ送信は親子パラメータの受け渡しにより行われます。最後にデータベースに保存されました。