# 快速入门

# 准备你的页面

新建了一个 HTML 页面，在页面中继续添加代码以创建地图，如下：

<!DOCTYPE HTML>
<html>
<head>
<title>加载栅格底图</title>
<meta name="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    //在文档的头部包含 Leaflet CSS 文件
    <link rel="stylesheet" href="css/leaflet.css" />
    //在Leaflet 的 CSS之后包含 Leaflet JavaScript 文件
    <script src="js/leaflet/leaflet.js"></script>
    <script src="js/leaflet/CustomWebSDK.min.js"></script>
</head>
<body>
    // 地图显示的div
    <div id="map" class="map" style ="position:absolute;left:0px;right:0px;width:800px;height:500px;"></div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 设置地图

//创建地图，设置中心点和层级
var map = L.map('map',{crs:L.CRS.CustomEPSG4326,center: {lon:121.4302,lat:28.6024},zoom:12});
//添加底图
var layer = new L.GXYZ('http://atlas.geoway.com.cn:31080/mapserver/vmap/osm_china/getMAP?x=${x}&y=${y}&l=${z}&styleId=osm',{tileSize:512});
map.addLayer(layer);
//添加注记
var labelLayer = new L.GWVTAnno({tileSize:512});
var dataSource = new Custom.URLDataSource();
dataSource.url ='http://atlas.geoway.com.cn:31080/mapserver/label/osm/getData?x={x}&y={y}&l={z}&styleId=osm';
labelLayer.addDataSource(dataSource);
map.addLayer(labelLayer);

1
2
3
4
5
6
7
8
9
10
11

运行效果

现在您已经了解了 Leaflet 基础知识，可以立即开始构建地图应用程序了！

← 概述加载栅格底图 →