leafletjs是一个轻量级的开源地图插件,PC以及移动端都适用,使用简单,性能优越。
下面是自己做的一个网格游戏地图,有问题大家一起探讨
- 安装
npm方式引入
import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
或者html直接引入
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.2.0/leaflet.css">
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
- 设置地图背景
这里有两种方式,一种是直接使用tileLayer
设置通用素材链接,一种是根据getTileUrl
方法里提供的x、y、z坐标系自定义自己的素材链接。x是平铺横向位置,y是平铺纵向位置,z是放大倍数
1、通用素材链接提供
L.tileLayer('https://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'?{foo}', {foo: 'bar'}).addTo(map);
2、tileLayer
自定义图片路径
L.TileLayer.Kitten = L.TileLayer.extend({
getTileUrl: function({x,y,z}:any) {
const r = Math.pow(2, z)
const psize = 512 * Math.pow(2, z)
if (r + x > -1 && r + y > -1 && y < r && x < r) {
//采用阿里图片裁剪,或者自己准备不同放大倍数下的对应图片素材
return `https://www.baidu.com/test.jpg?x-oss-process=image/resize,w_${psize},h_${psize}/crop,x_${(r + x) * 256},y_${(r + y) * 256},w_256,h_256/format,jpg`
} else {
//处理边界
return 'https://www.baidu.com/test.jpg?x-oss-process=image/resize,p_25/crop,x_0,y_0,w_64,h_64/format,jpg'
}
},
options: {
minZoom: 0,
maxZoom: 3
}
})
- 配置地图边界等信息
const bounds = new L.LatLngBounds(new L.LatLng(0, 0), new L.LatLng(256, 256))
const maxBounds = new L.LatLngBounds(new L.LatLng(-300, -300), new L.LatLng(300, 300))
const map = L.map('map', {//'map'是地图渲染的dom id,请给该dom设置宽高
crs: L.CRS.Simple,//网格地图
attributionControl: false,
maxBounds: maxBounds,//地图边界
bounds: bounds,//地图坐标尺寸
maxBoundsViscosity: 0,//超出边界的表现
noWrap: true
}).setView([0, 0], 1) //居中展示,初始倍数为1倍图
- 设置地图坐标点,以及坐标点上的图标大小、样式等信息。并绑定点击事件,自定义扩展点击之后的弹窗展示信息。
const points = originPoints.map((ele: any) => {
return [ele.x, ele.y]
})
for (let i = 0; i < points.length; i++) {
L.marker(points[i], {
title: originPoints[i].name,
icon: L.divIcon({ //自定义标点的图标样式
className: `hero-map-gis type${typeList.indexOf(originPoints[i].categoryId)}`,
iconSize: [28, 41],
iconAnchor: [14, 34],
popupAnchor: [0, -10],
html: `<div class="hero-map-gis-cover"><img src="${originPoints[i].icon}" alt="" /></div>`
})
// 自定义点击坐标点之后的弹窗
}).addTo(map).bindPopup(`<div class="hero-map-popup">
<p class="title">(${originPoints[i].x},${originPoints[i].y})</p>
<p class="description">${originPoints[i].name}</p>
</div>`)
}
- 地图初始化
L.tileLayer.kitten = function () {
return new L.TileLayer.Kitten()
}
L.tileLayer.kitten().addTo(map)
地图效果:
参考更多api