forked from dyf/dyf-vue-ui
239 lines
5.6 KiB
TypeScript
239 lines
5.6 KiB
TypeScript
|
|
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
|
|||
|
|
}
|