自从学了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文件。
