import AMapLoader from '@amap/amap-jsapi-loader'
|
|
var mapInitDone = false
|
var onMapMountedEvents = []
|
|
var AMap
|
// 地图对象
|
var map
|
// 卫星图层
|
var satellite
|
// 鼠标绘图
|
var mouseTool
|
// 3D图层
|
var object3Dlayer
|
// 地图拖动状态
|
var isDragging = false
|
|
// 地图加载完成触发
|
function onMapMounted(...events) {
|
if (mapInitDone) {
|
events.forEach((e) => {
|
e()
|
})
|
} else {
|
onMapMountedEvents = onMapMountedEvents.concat(events)
|
}
|
}
|
|
function createMap(id) {
|
AMapLoader.load({
|
key: '520c5e5cf44c7793104e500cbf0ed711', // 申请好的Web端开发者Key，首次调用 load 时必填
|
version: '2.0', // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
|
// 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
plugins: [
|
'AMap.ElasticMarker',
|
'AMap.ControlBar',
|
'AMap.ToolBar',
|
'AMap.Scale',
|
'AMap.DistrictSearch',
|
// 'AMap.DragRoute',
|
// 'AMap.MouseTool',
|
// 'AMap.PolygonEditor'
|
],
|
})
|
.then((_AMap) => {
|
AMap = _AMap
|
_initMap(id)
|
mapInitDone = true
|
onMapMountedEvents.forEach((e) => {
|
e()
|
})
|
onMapMountedEvents = []
|
console.log('-------------------map init done')
|
})
|
.catch((e) => {
|
console.log(e)
|
})
|
}
|
|
function destroyMap() {
|
map?.destroy()
|
map = null
|
mapInitDone = false
|
}
|
|
function _initMap(elementId) {
|
map = new AMap.Map(elementId, {
|
// mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
|
features: ['bg', 'road'],
|
pitch: 30, // 地图俯仰角度，有效范围 0 度- 83 度
|
viewMode: '3D', // 地图模式
|
resizeEnable: true,
|
center: [121.6039283, 31.25295567],
|
zooms: [2, 26],
|
zoom: 14,
|
})
|
// map = new AMap.Map(elementId);
|
|
// 添加卫星地图
|
satellite = new AMap.TileLayer.Satellite()
|
const roadNet = new AMap.TileLayer.RoadNet()
|
// satellite.hide()
|
map.add([satellite, roadNet])
|
|
// _initMouseTool();
|
// _init3DLayer();
|
// _initDragEvent();
|
}
|
|
// 鼠标绘图初始化
|
function _initMouseTool() {
|
mouseTool = new AMap.MouseTool(map)
|
}
|
|
// 3D图层初始化
|
function _init3DLayer() {
|
object3Dlayer = new AMap.Object3DLayer()
|
map.add(object3Dlayer)
|
}
|
|
// 设置地图拖拽监听事件
|
function _initDragEvent() {
|
let dragEndEvent
|
map.on('dragstart', () => {
|
clearTimeout(dragEndEvent)
|
isDragging = true
|
})
|
map.on('dragend', function () {
|
dragEndEvent = setTimeout(() => {
|
isDragging = false
|
}, 8000)
|
})
|
}
|
|
export { createMap, destroyMap, onMapMounted, map, AMap, mouseTool, object3Dlayer, isDragging }
|
