164 lines
4.5 KiB
JavaScript
164 lines
4.5 KiB
JavaScript
/*
|
|
* @Descripttion : 百度地图
|
|
* @Versions : 0.1
|
|
* @Author : foxcms team
|
|
* @Date : 2022-05-09 21:29:15
|
|
* @LastEditors : Please set LastEditors
|
|
* @LastEditTime : 2023-01-30 15:02:48
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
var bmap = (function () {
|
|
let rotAngle = -30,
|
|
tiltAngle = 65,
|
|
minZoom = 18,
|
|
maxZoom = 20,
|
|
zoom = 18,
|
|
skyColors = ['rgba(23, 23, 23, 0)', 'rgba(23, 23, 23, 0.2)'],
|
|
markerWidth = 160,
|
|
markerHeight = 160;
|
|
let map = null,
|
|
styleId = null;
|
|
let mapData = {
|
|
lng: '',
|
|
lat: '',
|
|
};
|
|
|
|
/**
|
|
* @description: 重置数据
|
|
* @param {*}
|
|
* @return {*}
|
|
* @Date: 2021-09-15 15:27:17
|
|
*/
|
|
function _restMapData() {
|
|
// 清空经纬度
|
|
mapData.lng = '';
|
|
mapData.lat = '';
|
|
}
|
|
|
|
/**
|
|
* @description: 添加地图控件、配置
|
|
* @param {*}
|
|
* @return {*}
|
|
* @Date: 2021-09-15 13:40:46
|
|
*/
|
|
function _setOption() {
|
|
// 是否开启鼠标滚轮缩放
|
|
map.enableScrollWheelZoom();
|
|
// 设置地图旋转角度
|
|
map.setHeading(rotAngle);
|
|
// 设置地图的倾斜角度
|
|
map.setTilt(tiltAngle);
|
|
// 设置地图样式 id
|
|
map.setMapStyleV2({
|
|
styleId,
|
|
});
|
|
// 设置最小级别
|
|
map.setMinZoom(minZoom);
|
|
// 设置最大级别
|
|
map.setMaxZoom(maxZoom);
|
|
// 设置天空的颜色
|
|
map.setDisplayOptions({
|
|
skyColors,
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @description: 进入地图后的动画效果
|
|
* @param {*} lng
|
|
* @param {*} lat
|
|
* @return {*}
|
|
* @Date: 2022-05-13 11:03:30
|
|
*/
|
|
function startAnimation({ lng, lat }) {
|
|
// 定义关键帧 及 配置
|
|
let keyFrames = [
|
|
{
|
|
center: new BMapGL.Point(lng, lat),
|
|
zoom,
|
|
tilt: 0,
|
|
heading: 120,
|
|
percentage: 0,
|
|
},
|
|
{
|
|
center: new BMapGL.Point(lng, lat),
|
|
zoom: zoom + 2,
|
|
tilt: tiltAngle,
|
|
heading: rotAngle,
|
|
percentage: 0.6,
|
|
},
|
|
{
|
|
center: new BMapGL.Point(lng, lat),
|
|
zoom,
|
|
tilt: tiltAngle,
|
|
heading: rotAngle,
|
|
percentage: 1,
|
|
},
|
|
],
|
|
opts = {
|
|
duration: 4000,
|
|
delay: 500,
|
|
interation: 1,
|
|
};
|
|
// 声明动画对象
|
|
let animation = new BMapGL.ViewAnimation(keyFrames, opts);
|
|
// 开始播放动画
|
|
map.startViewAnimation(animation);
|
|
}
|
|
|
|
/**
|
|
* @description: 开始绘制地图
|
|
* @param {*} id
|
|
* @param {*} lng
|
|
* @param {*} lat
|
|
* @param {*} zoom
|
|
* @return {*}
|
|
* @Date: 2021-09-15 13:40:06
|
|
*/
|
|
function drawMap(id, { lng, lat, zoom: initZoom, styleId: initStyleId, title, content }) {
|
|
// 保存数据
|
|
zoom = parseInt(initZoom) ? parseInt(initZoom) : 18;
|
|
styleId = initStyleId || '';
|
|
// 重置数据
|
|
_restMapData();
|
|
// 创建Map实例
|
|
map = new BMapGL.Map(id);
|
|
// 初始化地图,设置中心点坐标和地图级别
|
|
map.centerAndZoom(new BMapGL.Point(lng, lat), zoom);
|
|
// 设置地图配置
|
|
_setOption();
|
|
// 添加富文本内容
|
|
drawRichMarker({ lng, lat, title, content });
|
|
// 添加进入动画
|
|
startAnimation({ lng, lat });
|
|
}
|
|
|
|
/**
|
|
* @description: 添加富文本内容
|
|
* @param {*} lng
|
|
* @param {*} lat
|
|
* @param {*} html
|
|
* @param {*} offX
|
|
* @param {*} offY
|
|
* @return {*}
|
|
* @Date: 2022-05-11 09:47:18
|
|
*/
|
|
function drawRichMarker({ lng, lat, html, offX, offY, title, content }) {
|
|
html = html || '<div class="map-scale-circle"></div>';
|
|
offX = offX || -markerWidth / 2;
|
|
offY = offY || -markerHeight / 2;
|
|
let point = new BMapGL.Point(lng, lat);
|
|
let richMarker = new BMapGLLib.RichMarker(html, point, {
|
|
anchor: new BMapGL.Size(offX, offY),
|
|
enableDragging: false,
|
|
});
|
|
richMarker.addEventListener('click', function () {
|
|
window.open(`http://api.map.baidu.com/marker?location=${lat},${lng}&title=${title || ''}&content=${content || ''}&output=html`);
|
|
});
|
|
map.addOverlay(richMarker);
|
|
}
|
|
|
|
return { drawMap };
|
|
})();
|