leaflet实现游戏地图

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