leaflet + webpack + typescript

自从学了typescript后，就想将以后的项目全部换成typescript来开发了，首先从leaflet开始，在官网的例子中，都是用UMD的方式来引入leaflet的，为了以后能更快速的创建leaflet项目，项目中主要使用leaflet与webpack，typescript来集成。之前介绍webpack的博文有好几篇了，webpack就简单带过了，主要以集成typescript为主。

webpack

对于初始化的webpack工程项目，可以直接使用我github上的工程，该工程已经配置好了相关的插件和loaders，并且也引入了typescript。直接直接下来就可以了。

leaflet安装

要使用leaflet，首先需要对其进行安装。命令如下所示：

npm i leaflet

由于项目中是使用typescript进行开发，所以需要引入leaflet的声明文件。如下所示：

npm install @types/leaflet --save-d

创建地图

安装好leaflet相关的依赖文件后，就要开始进行编码了，首先创建一个LMap的文件，用于编写地图相关的代码。如下所示：

import {Map,TileLayer} from 'leaflet'
export default class LMap {
    constructor(target:string){
        //创建地图
        var map:Map = new Map(target);
        map.setView([51.505, -0.09], 13);
        var accessToken:string = '自已申请accessToken';
        var url:string = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + accessToken;
        //创建切片图层
        var titleLayer:TileLayer = new TileLayer(url,{
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken:accessToken
        })
        //添加切片图层
        map.addLayer(titleLayer)
    }
}

将需要使用的类通过import来引入，如import {Map,TileLayer} from 'leaflet'。这里主要是引入了Map和TileLayer类。然后再创建具体的对象来添加创建地图和添加对象。
然后在入口文件index.js文件中引入LMap。如下所示：

import './../css/index.css'
import 'leaflet/dist/leaflet.css'
import LMap from './map/map'
(function (){
    let map:LMap = new LMap('map')
})()

注意：需要引入 leaflet的css文件。