zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [POJ 2777]Count Color 线段树+二进制状态压缩
    [git] git push问题 解决 Updates were rejected because the tip of your current branch is behind 和每次输入用户名和密码
    [hdu-5795]A Simple Nim 博弈 尼姆博弈 SG函数打表找规律
    [codeforces1284E]New Year and Castle Construction 几何
    Spring事务相关接口以及实现类
    MyBatis与Spring整合
    实现一个简易RPC
    使用CAS实现一个超时锁
    阻塞队列
    Java中的Lock接口
  • 原文地址:https://www.cnblogs.com/zsslll/p/6644132.html
Copyright © 2011-2022 走看看