TrackOffical/utils/map/leafletHelper.js

// leaflet 地图组件
// author: wzx
// version: 1.0

import L from 'leaflet'
// import 'leaflet.motion/dist/leaflet.motion.min.js'

import patch from '@/utils/map/sub/patch'
import config from '@/utils/map/sub/config'
import global from '@/utils/map/sub/global'
import player from '@/utils/map/sub/player'
import checkPoint from '@/utils/map/sub/checkPoint'
import route from '@/utils/map/sub/route'

export default {
	global: global,
	config: config,
	player: player,
	checkPoint: checkPoint,
	route: route,
	
	// 地图初始化
	// mapid <string> 地图容器的id
	// centPoint <array> 地图的初始地理中心坐标
	// zoomNum <int> 初始地图缩放级别
	init(caller, mapid, centPoint, zoomNum = 17) {
		patch.run()
		
		global.setCaller(caller)

		global.map = L.map(mapid, {
			center: centPoint,
			zoom: zoomNum,
			zoomControl: true,
			attributionControl: false
		});
		// global.map = L.map(mapid, {
		// 	attributionControl: false
		// }).setView(centPoint, zoomNum);

		L.control.attribution({
			// prefix: '&copy; 小飞龙定向', // 地图右下角属性文本的前缀内容
			prefix: false	// 地图右下角属性文本的前缀内容
		}).addTo(global.map);

		L.control.scale({
			maxWidth: 120, // 控件的最大宽度，单位是像素
			metric: true, // 是否显示公制比例线（米/公里）
			imperial: false, // 是否显示英制比例线（英里/英尺）
			position: 'topright' // 控件的位置（地图的一个角）。可能的值是 ‘topleft’、 ‘topright’、 ‘bottomleft’ 或 ‘bottomright’
		}).addTo(global.map)

		this.extendControl()

		// 添加地图点击弹窗
		global.map.on('click', (e) => {
			console.log("坐标", e.latlng.toString())
			// L.popup().setLatLng(e.latlng)
			// 	.setContent("坐标：" + e.latlng.toString())
			// 	.openOn(global.map);
		});

		global.map.on('zoomstart', (e) => {
			// console.log("[zoomstart] 即将开始地图缩放", e)
			player.onZoomStart(e)
			checkPoint.onZoomStart(e)
			route.onZoomStart(e)
		});

		global.map.on('zoom', (e) => {
			// console.log("[zoom] 地图缩放", e)
			player.onZoom(e)
			checkPoint.onZoom(e)
			route.onZoom(e)
		});

		global.map.on('zoomend', (e) => {
			// console.log("[zoomend] 地图缩放结束", e)
			player.onZoomEnd(e)
			checkPoint.onZoomEnd(e)
			route.onZoomEnd(e)
		});

		// global.map.on('zoomanim', (e) => {
		// 	console.log("地图缩放中...", e)
		// 	// player.onZoomEnd(e)
		// 	// checkPoint.onZoomEnd(e)
		// 	// route.onZoomEnd(e)
		// });

		player.init()
		checkPoint.init()
		route.init()
	},

	addMapLayer(mapurl, minZoom = 15, maxZoom = 20) {
		// console.log('[addMapLayer] mapurl', mapurl)
		// var mapurl = 'static/map/' + mapid + '/{z}/{x}/{y}.png'
		global.map_layer = L.tileLayer(mapurl, {
			minZoom: minZoom,
			maxZoom: maxZoom,
			errorTileUrl: '/static/image/tileMiss.png',
			tms: false, // 是否反转Y轴坐标,
			keepBuffer: 20, // 平移地图时，在卸载切片之前，请保留这么多行和几列的切片
			// attribution: '版权所有'
		}).addTo(global.map);
	},

	extendControl() {
		var that = this
		
		L.Control.Search = L.Control.extend({
			options: {
				position: 'topleft' //初始位置
			},
			// _container: null,
			// elCheckPoint: null,
			// elTrail: null,
			
			initialize: function(options) {
				L.Util.extend(this.options, options)
			},
			onAdd: function(map) {
				// console.log('onAdd', map)
				var caller = global._caller
				//创建Dom元素 L.DomUtil.create('元素类型', 'class类名')
				// this._container = L.DomUtil.create('div', 'leaflet-control-container')
				this._container = L.DomUtil.create('div', 'leaflet-bar')
				
				// var inp = L.DomUtil.create('div', 'leaflet-control-input')
				// var btn = L.DomUtil.create('button', 'leaflet-control-button')
				//设置Dom元素的内容
				// inp.id='inp' //可以为元素设置id
				// inp.innerHTML =
				// 	' <input placeholder="天安门" ref="a" id="boox" style="width:150px;margin-right:20px;" /> '
				// btn.innerText = '搜索'
				
				// this.elCheckPoint = L.DomUtil.create('a', 'leaflet-control-common')
				// this.elCheckPoint.innerHTML = '<span>点位</span>'
				
				this.elRoute = L.DomUtil.create('a', 'leaflet-control-common')
				this.elRoute.innerHTML = '<span>路线</span>'
				
				this.elPlayer = L.DomUtil.create('a', 'leaflet-control-common')
				this.elPlayer.innerHTML = '<span>玩家</span>'
				
				this.elPlayerTooltip = L.DomUtil.create('a', 'leaflet-control-common')
				this.elPlayerTooltip.innerHTML = '<span>提示</span>'
				
				this.elPlayerTrail = L.DomUtil.create('a', 'leaflet-control-common')
				this.elPlayerTrail.innerHTML = '<span>轨迹</span>'
				
				this.elList = L.DomUtil.create('a', 'leaflet-control-common')
				this.elList.innerHTML = '<span>列表</span>'
				
				// this._container.style.display = 'flex'
				// this._container.appendChild(this.elCheckPoint)
				this._container.appendChild(this.elRoute)
				this._container.appendChild(this.elPlayer)
				this._container.appendChild(this.elPlayerTooltip)
				this._container.appendChild(this.elPlayerTrail)
				this._container.appendChild(this.elList)
				
				//注册事件
				// L.DomEvent.addListener(this.elCheckPoint, 'click', function (ev) {
				//     L.DomEvent.stopPropagation(ev)
				// 	L.DomEvent.preventDefault(ev)
				// 	that.checkPoint.toggle()
				// }, that.checkPoint)
				
				L.DomEvent.addListener(this.elRoute, 'click dblclick', function (ev) {
				    L.DomEvent.stopPropagation(ev)
					L.DomEvent.preventDefault(ev)
					that.route.toggle()
				}, that.checkPoint)
				
				L.DomEvent.addListener(this.elPlayer, 'click dblclick', function (ev) {
				    L.DomEvent.stopPropagation(ev)
					L.DomEvent.preventDefault(ev)
					that.player.togglePlayer()
				}, that.player)
				
				L.DomEvent.addListener(this.elPlayerTooltip, 'click dblclick', function (ev) {
				    L.DomEvent.stopPropagation(ev)
					L.DomEvent.preventDefault(ev)
					that.player.toggleTooltip()
				}, that.player)
				
				L.DomEvent.addListener(this.elPlayerTrail, 'click dblclick', function (ev) {
				    L.DomEvent.stopPropagation(ev)
					L.DomEvent.preventDefault(ev)
					that.player.toggleTrail()
				}, that.player)
				
				L.DomEvent.addListener(this.elList, 'click dblclick', function (ev) {
				    L.DomEvent.stopPropagation(ev)
					L.DomEvent.preventDefault(ev)
					global._caller.popupToggle()
					// global._caller.popup('bottom')
				}, this)
				
				//返回这个主元素
				return this._container
			},
			onRemove: function(map) {
				// Clean up the DOM
			}
		})

		//在L.control上添加一个search（封装好的函数）
		L.control.Search = function(options) {
			return new L.Control.Search(options)
		}
		//将自定义控件添加到地图上
		L.control.Search().addTo(global.map)
	},
	
	test() {
		console.log("test ok")
	},

	free() {
		player.free()
		checkPoint.free()
		route.free()
	}
}