001 Leaflet 第一個demo 加載天地圖

時間 2020-05-19

標籤 leaflet 第一個 demo 加載地圖简体版

原文原文鏈接

這話要從當年畢業提及了，lz是學軟件工程的。畢業後作了大約半年javaweb，是個小公司，技術老大也的技術也不是很吸引我（他比我畢業早兩年，公司一共就我兩我的幹技術）。剛畢業找工做的處處碰壁，讓我當時以爲即便有2我的，即便老大就2年工做經驗，至少比我強，先去了再說吧。css

上班、轉正定了定心情，幡然醒悟。以爲要換工做，否則得折在這裏。因而裸辭，又踏上找工做之旅。不當心就進了gis這個坑。當時還不知道gis是什麼鬼呢，就是以爲仍是javaweb不過多個gis。直到今天我仍是喜歡java更多些，瞭解的gis知識仍是很少。html

不過，總之吧，既然已入坑，之後不管是否出坑，總結下所學到的皮毛老是好事吧。人傻，先這樣想着。先來記錄下第一個demo，加載天地圖（ps:實際上我作過的項目用的仍是天地圖多）。什麼座標系呀之類的我就不說了吧，省得顯現出了個人短板。就直接上demo吧。java

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。