111
This commit is contained in:
parent
287187d01c
commit
e140cb5118
1
src/assets/icons/svg/map.svg
Normal file
1
src/assets/icons/svg/map.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1715418472703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4370" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M528 32C325.056 32 160 196.8 160 399.36c0 75.2 22.656 147.584 65.024 208.48 2.112 3.648 4.256 7.168 6.784 10.592l268.608 353.472c7.296 8.096 17.088 12.576 27.584 12.576 10.368 0 20.224-4.512 28.768-14.08l267.36-352c2.624-3.52 4.896-7.36 6.112-9.6A364.864 364.864 0 0 0 896 399.36C896 196.8 730.912 32 528 32z m0 498.72a131.52 131.52 0 0 1-131.456-131.232 131.488 131.488 0 0 1 262.88 0 131.52 131.52 0 0 1-131.424 131.2z" fill="#bfbfbf" p-id="4371"></path></svg>
|
||||||
|
After Width: | Height: | Size: 795 B |
|
|
@ -3,194 +3,216 @@
|
||||||
<div id="container"></div>
|
<div id="container"></div>
|
||||||
<div class="input-card">
|
<div class="input-card">
|
||||||
<el-button @click="createPolygon()">新建</el-button>
|
<el-button @click="createPolygon()">新建</el-button>
|
||||||
<el-button @click="polyEditor.open()">开始编辑</el-button>
|
<!-- <el-button @click="polyEditor.open()">开始编辑</el-button> -->
|
||||||
<el-button @click="editClose">结束编辑</el-button>
|
<el-button @click="editClose">结束编辑</el-button>
|
||||||
<el-button @click="changeMapStyle()">切换地图</el-button>
|
<el-button @click="changeMapStyle()">切换地图</el-button>
|
||||||
|
<el-button @click="clearPolygon()">清除多边形</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
import globalConfig from '@/utils/config/globalConfig'
|
import globalConfig from '@/utils/config/globalConfig'
|
||||||
var polyEditor = "";
|
var polyEditor = "";
|
||||||
function calculateCenter(mapList) {
|
function calculateCenter(mapList) {
|
||||||
var total = mapList.length;
|
var total = mapList.length;
|
||||||
var X = 0,
|
var X = 0,
|
||||||
Y = 0,
|
Y = 0,
|
||||||
Z = 0;
|
Z = 0;
|
||||||
mapList.map((item) => {
|
mapList.map((item) => {
|
||||||
var lng = (item[0] * Math.PI) / 180;
|
var lng = (item[0] * Math.PI) / 180;
|
||||||
var lat = (item[1] * Math.PI) / 180;
|
var lat = (item[1] * Math.PI) / 180;
|
||||||
var x, y, z;
|
var x, y, z;
|
||||||
x = Math.cos(lat) * Math.cos(lng);
|
x = Math.cos(lat) * Math.cos(lng);
|
||||||
y = Math.cos(lat) * Math.sin(lng);
|
y = Math.cos(lat) * Math.sin(lng);
|
||||||
z = Math.sin(lat);
|
z = Math.sin(lat);
|
||||||
X += x;
|
X += x;
|
||||||
Y += y;
|
Y += y;
|
||||||
Z += z;
|
Z += z;
|
||||||
});
|
});
|
||||||
X = X / total;
|
X = X / total;
|
||||||
Y = Y / total;
|
Y = Y / total;
|
||||||
Z = Z / total;
|
Z = Z / total;
|
||||||
var Lng = Math.atan2(Y, X);
|
var Lng = Math.atan2(Y, X);
|
||||||
var Hyp = Math.sqrt(X * X + Y * Y);
|
var Hyp = Math.sqrt(X * X + Y * Y);
|
||||||
var Lat = Math.atan2(Z, Hyp);
|
var Lat = Math.atan2(Z, Hyp);
|
||||||
let center = new AMap.LngLat((Lng * 180) / Math.PI, (Lat * 180) / Math.PI);
|
let center = new AMap.LngLat((Lng * 180) / Math.PI, (Lat * 180) / Math.PI);
|
||||||
return center;
|
return center;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AreaMap",
|
name: "AreaMap",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
map: null,
|
map: null,
|
||||||
// polyEditor: null,
|
// polyEditor: null,
|
||||||
coordList: "",
|
coordList: "",
|
||||||
timer: "",
|
timer: "",
|
||||||
};
|
status:true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ["pathList", "dataId"],
|
||||||
|
mounted() {
|
||||||
|
if (this.dataId) {
|
||||||
|
this.start();
|
||||||
|
console.log("修改");
|
||||||
|
} else {
|
||||||
|
this.echart();
|
||||||
|
console.log("添加");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clearPolygon() {
|
||||||
|
this.status=false
|
||||||
|
if (polyEditor) {
|
||||||
|
polyEditor.close(); // 关闭多边形编辑器
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移除地图上的所有多边形对象
|
||||||
|
this.map.getAllOverlays('polygon').forEach(polygon => {
|
||||||
|
this.map.remove(polygon);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 如果需要，也可以清空与多边形相关的其他状态或数据
|
||||||
|
this.coordList = '';
|
||||||
|
this.$emit("mapList", '');
|
||||||
|
|
||||||
|
this.$emit("center", '');
|
||||||
},
|
},
|
||||||
props: ["pathList", "dataId"],
|
changeMapStyle() {
|
||||||
mounted() {
|
// 创建一个默认的图层组件
|
||||||
if (this.dataId) {
|
let defaultLayer = new AMap.TileLayer();
|
||||||
this.start();
|
// 创建一个卫星图图层组件
|
||||||
console.log("修改");
|
let satelliteLayer = new AMap.TileLayer.Satellite();
|
||||||
|
let roadNetLayer = new AMap.TileLayer.RoadNet();
|
||||||
|
// 将默认图层添加到地图中
|
||||||
|
this.map.add(defaultLayer);
|
||||||
|
// 获取当前地图显示的图层
|
||||||
|
let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
|
||||||
|
// 切换图层
|
||||||
|
if (this.type == 'default') {
|
||||||
|
// console.log(1111111)
|
||||||
|
//获取地图图层数据
|
||||||
|
this.map.setLayers([defaultLayer]); // 切换回默认图层
|
||||||
|
this.type = 'Satellite';
|
||||||
} else {
|
} else {
|
||||||
this.echart();
|
console.log(222222)
|
||||||
console.log("添加");
|
this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层
|
||||||
|
this.type = 'default';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
start() {
|
||||||
changeMapStyle(){
|
this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
|
||||||
// 创建一个默认的图层组件
|
},
|
||||||
let defaultLayer = new AMap.TileLayer();
|
async echart() {
|
||||||
// 创建一个卫星图图层组件
|
clearInterval(this.timer);
|
||||||
let satelliteLayer = new AMap.TileLayer.Satellite();
|
console.log("接收参数", this.pathList);
|
||||||
let roadNetLayer = new AMap.TileLayer.RoadNet();
|
// console.log(typeof JSON.parse(this.pathList));
|
||||||
// 将默认图层添加到地图中
|
await AMapLoader.load({
|
||||||
this.map.add(defaultLayer);
|
key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
// 获取当前地图显示的图层
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
|
plugins: [
|
||||||
// 切换图层
|
"AMap.ToolBar",
|
||||||
if(this.type=='default'){
|
"AMap.Driving",
|
||||||
console.log(1111111)
|
"AMap.PolygonEditor",
|
||||||
//获取地图图层数据
|
"AMap.PlaceSearch",
|
||||||
this.map.setLayers([defaultLayer]); // 切换回默认图层
|
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
this.type = 'Satellite';
|
}).then((AMap) => {
|
||||||
}else{
|
this.map = new AMap.Map("container", {
|
||||||
console.log(222222)
|
//设置地图容器id
|
||||||
this.map.setLayers([satelliteLayer,roadNetLayer]); // 切换到卫星图图层
|
viewMode: "3D", //是否为3D地图模式
|
||||||
this.type = 'default';
|
zoom: 18, //初始化地图级别
|
||||||
}
|
center: [120.356031, 26.94088], //初始化地图中心点位置--大嵛山岛
|
||||||
},
|
|
||||||
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: globalConfig.aMap.key, // 申请好的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: 18, //初始化地图级别
|
|
||||||
center: [120.356031,26.94088], //初始化地图中心点位置--大嵛山岛
|
|
||||||
});
|
|
||||||
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]);
|
this.map.setFitView();
|
||||||
polyEditor = new AMap.PolygonEditor(this.map);
|
})
|
||||||
console.log(polyEditor);
|
.catch((e) => {
|
||||||
console.dir(polyEditor);
|
console.log(e);
|
||||||
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", () => {
|
this.initEditor();
|
||||||
polyEditor.setTarget(polygon1);
|
|
||||||
|
},
|
||||||
|
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();
|
polyEditor.open();
|
||||||
});
|
});
|
||||||
|
});
|
||||||
return polyEditor;
|
polygon1.on("dblclick", () => {
|
||||||
},
|
polyEditor.setTarget(polygon1);
|
||||||
createPolygon() {
|
|
||||||
polyEditor.close();
|
|
||||||
polyEditor.setTarget();
|
|
||||||
polyEditor.open();
|
polyEditor.open();
|
||||||
},
|
});
|
||||||
editClose: function () {
|
|
||||||
// console.log("this", this);
|
|
||||||
|
|
||||||
let that = this;
|
return polyEditor;
|
||||||
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]);
|
|
||||||
});
|
|
||||||
let center = calculateCenter(mapList);
|
|
||||||
that.$emit("mapList", mapList);
|
|
||||||
console.log("center:", center);
|
|
||||||
that.$emit("center", center);
|
|
||||||
});
|
|
||||||
polyEditor.close();
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
createPolygon() {
|
||||||
clearInterval(this.timer);
|
this.status=true
|
||||||
}
|
polyEditor.close();
|
||||||
};
|
polyEditor.setTarget();
|
||||||
|
polyEditor.open();
|
||||||
|
},
|
||||||
|
editClose: function () {
|
||||||
|
// 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]);
|
||||||
|
});
|
||||||
|
let center = calculateCenter(mapList);
|
||||||
|
console.log(mapList,'mapListmapList');
|
||||||
|
that.$emit("mapList", mapList);
|
||||||
|
|
||||||
|
that.$emit("center", center);
|
||||||
|
|
||||||
|
});
|
||||||
|
polyEditor.close();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#container {
|
#container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid rgb(204, 204, 204);
|
border: 1px solid rgb(204, 204, 204);
|
||||||
|
|
||||||
.input-card {
|
.input-card {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 15px;
|
bottom: 15px;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user