代码编写
打开已安装Visual Studio Code，在“文件”中选择“打开文件夹...”，选择您已创建的项目根目录。新建一个文件并命名为FirstMap.html。
在编写功能代码之前首先需要在页面头部<head>中引入所需的CSS文件：
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
引入CSS文件之后，引入iclient-leaflet.js：
<script type="text/javascript" src="http://iclient.supermap.io/dist/iclient9-leaflet.js"></script>
在<body>中设置一个div要素用于放置地图：
<div id="map"></div>
完整文件内容示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<title>Document</title>
<style>
#map { height: 800px }
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
在根目录下新建名为src的文件夹，在src文件夹中继续新建一个FirstMap.js文件，在这个文件中实现添加一个SuperMap发布的世界地图示例。
import L from 'leaflet';
import '@supermap/iclient-leaflet';
var url = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World";
var map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [0, 0],
maxZoom: 18,
zoom: 1
});
L.supermap.tiledMapLayer(url).addTo(map);