001 Leaflet 第一个demo 加载天地图

zsslll 2021-08-04 原文

这话要从当年毕业说起了，lz是学软件工程的。毕业后做了大约半年javaweb，是个小公司，技术老大也的技术也不是很吸引我（他比我毕业早两年，公司一共就我两个人干技术）。刚毕业找工作的到处碰壁，让我当时觉得即使有2个人，即使老大就2年工作经验，至少比我强，先去了再说吧。

上班、转正定了定心情，幡然醒悟。觉得要换工作，不然得折在这里。于是裸辞，又踏上找工作之旅。不小心就进了gis这个坑。当时还不知道gis是什么鬼呢，就是觉得还是javaweb不过多个gis。直到今天我还是喜欢java更多些，了解的gis知识还是不多。

不过，总之吧，既然已入坑，以后不论是否出坑，总结下所学到的皮毛总是好事吧。人傻，先这样想着。先来记录下第一个demo，加载天地图（ps:实际上我做过的项目用的还是天地图多）。什么坐标系呀之类的我就不说了吧，免得显现出了我的短板。就直接上demo吧。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  </head>
  <body>
    <div id="map" style="height:500px;width:500px;"></div>
    <script>
        $(function(){
            var map = L.map(\'map\', {
                center: [40, 100],
                zoom: 4
            });
            // 影像
            L.tileLayer("http://t{s}.tianditu.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            }).addTo(map);
            // 地名标注
            L.tileLayer("http://t{s}.tianditu.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            }).addTo(map);
            // 边界
            L.tileLayer("http://t{s}.tianditu.cn/ibo_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {
                subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
            }).addTo(map);
        });
    </script>
  </body>
</html>