001 Leaflet 第一个demo 加载天地图

这话要从当年毕业说起了,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;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>
原文地址:https://www.cnblogs.com/zsslll/p/6644132.html