1
0
forked from dyf/dyf-vue-ui
Files
dyf-vue-ui/src/api/FenceManager/mapOpt.ts

239 lines
5.6 KiB
TypeScript
Raw Normal View History

2025-09-12 16:50:18 +08:00
var map = null;
var circle = null;
var polygon = null;
function initMap() {
// let key = '90bc158992feb8ccd0145e168cab1307';
let init = function () {
map = new AMap.Map("map", {
viewMode: '2D', //默认使用 2D 模式
zoom: 11, //地图级别
center: [114.420739, 30.487514], //地图中心点
});
map.on('click',function(evt){
alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
});
}
return new Promise((resolve, reject) => {
if(map){
resolve(200);
return;
}
if (window.AMap) {
init();
resolve(200);
return;
}
reject({code:500,msg:'高德地图未能初始化成功'});
});
}
//添加一个点
function AddPoint(point, index, dragEnd, click) {
return new Promise((resolve, reject) => {
try {
let center = point ? new AMap.LngLat(point.lng, point.lat) : map.getCenter();
let marker = new AMap.Text({
icon: "http://wdxm.ztzhtech.com:8111/Script/Home/img/welComeImg/mapLocation.png",
position: center,
offset: new AMap.Pixel(-15, -24),
draggable: true,
cursor: 'point',
title: '点击删除',
text: index,
class: 'point',
extData: { type: 'point', txt: index }
});
marker.setMap(map);
let lays = map.getAllOverlays('text');
for (let i = 0; i < lays.length; i++) {
const element = lays[i];
let cls = element.getOptions();
if (cls.class) {
element.dom.classList.add(cls.class);
}
}
marker.on('dragend', dragEnd);
marker.on('mouseover', function (evt) {
marker.setText('X');
});
marker.on('mouseout', function (evt) {
marker.setText(marker.getExtData().txt);
});
marker.on('click', function (evt) {
click(evt, marker);
});
resolve(center);
} catch (ex) {
reject(ex)
}
});
}
function getCenter() {
var center = map.getCenter().toJSON();
return center;
}
function setCenter(lon, lat) {
var position = new AMap.LngLat(lon, lat); //传入经纬度
map.setCenter(position); //简写 设置地图中心点
}
//画多边形
function DrawPoy(points) {
if(!map){
return;
}
if (!points) {
return;
}
let path = [];
if (polygon) {
map.remove(polygon);
polygon = null;
}
setTimeout(() => {
points.filter(v => {
path.push(new AMap.LngLat(v.lng, v.lat));
return true;
});
polygon = new AMap.Polygon({
path: path,
fillColor: '#ccebc5',
strokeOpacity: 1,
fillOpacity: 0.5,
strokeColor: '#FF0000',
strokeWeight: 5,
strokeStyle: 'solid',
strokeDasharray: [5, 5],
});
map.add(polygon);
// map.setFitView();
}, 0);
}
//画圆形
function DrawCicle(points, raduis, dragEnd) {
if(!map){
return;
}
if (circle) {
map.remove(circle);
}
circle = new AMap.Circle({
center: [points[0].lng, points[0].lat],
radius: raduis ? raduis : 1000, //半径
borderWeight: 3,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'solid',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50,
})
// var circleEditor = new AMap.CircleEditor(map, circle,{
// editOptions: {
// moveable: false, // 禁止拖拽圆心
// // 可以同时配置其他编辑选项
// // scalable: true // 允许缩放(默认开启)
// }
// });
// circleEditor.open();
// circleEditor.on('move', function (event) {
// console.log('触发事件move')
// })
// circleEditor.on('adjust', function (event) {
// console.log('触发事件adjust');
// dragEnd(event.radius);
// })
// circleEditor.on('end', function (event) {
// console.log('触发事件: end')
// // event.target 即为编辑后的圆形对象
// })
map.add(circle);
// 缩放地图到合适的视野级别
map.setFitView([circle])
}
//清除所有
function clearOverLays() {
map && map.clearMap();
}
function removeOverLay(lay) {
map && map.remove(lay);
}
function removePoy() {
if(!map){
return;
}
if (polygon) {
map.remove(polygon);
polygon = null;
}
}
function removeCircle() {
if(!map){
return;
}
if (circle) {
map.remove(circle);
circle = null;
}
}
function setFitView() {
if(map){map.setFitView();}
}
export default {
gdMap: map,
initMap: initMap,
AddPoint: AddPoint,
getCenter: getCenter,
DrawPoy: DrawPoy,
DrawCicle: DrawCicle,
clearOverLays: clearOverLays,
removeOverLay: removeOverLay,
removePoy: removePoy,
removeCircle: removeCircle,
setFitView: setFitView
}