leaflet 集成十三种地图

Leaflet 使用地图瓦片

1. 在我们平常开发过程中，对接地图功能是比较繁琐，因为每一家地图的api都不一样，特殊性的功能函数使用方式也不同，比如: 比例尺功能
2. 对于只使用地图功能，地图要求不高的可以使用 leaflet.
3. 我整理了十三种地图瓦片的调用方式，提供给大家使用。

const tileLayer = {
    // 高德 地图
    "amap": {
        "template": "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        "options": {
            "attribution": "",
            "subdomains": ["1", "2", "3", "4"],
        }
    },
    // openStreet 地图
    "openStreet": {
        "template": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        "options": {
            "attribution": "",
        }
    },
    // google 地图
    "google": {
        "template": "http://mt{s}.google.com/vt/lyrs=m@167000000&hl=en-US&gl=en&x={x}&y={y}&z={z}",
        "options": {
            "attribution": "",
            "subdomains": ["0", "1", "2", "3"],
        }
    },
    // yandex 地图
    "yandex": {
        "template": "https://core-renderer-tiles.maps.yandex.net/tiles?l=map&v=22.11.04-0&x={x}&y={y}&z={z}&scale=1&lang=ru_RU",
        "options": {
        }
    },
    // 腾讯地图
    "txmap": {
        "template": "http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0",
        "options": {
            "subdomains": "0123",
            "tms": true,
        }
    },
    // 天地图
    "tianditu": {
        "template": "https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=申请密钥",
        "options": {
            "subdomains": ['0', '1', '2', '3', '4', '5', '6', '7']
        }
    },
    // 搜狗
    "sougou": {
        "template": "https://p{s}.map.sogou.com/maps?layers=0&z={z}&x={x}&y={y}&p=1",
        "options": {
            "subdomains": ['0', '1', '2', '3'],
            "tms": true,
        }
    },
    // ArcGIS 地图
    "arcgis": {
        "template": "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/WMTS/tile/1.0.0/Canvas_World_Light_Gray_Base/default/default028mm/{z}/{y}/{x}/",
        "options": {
            "subdomains": ['0', '1', '2', '3', '4', '5', '6', '7'],
        }
    },
    // 360 地图
    "360": {
        "template": "http://map4.qhimg.com/sotile/ver12/2/{z}/?x={x}&y={-y}",
        "options": {
            "subdomains": ['0', '1', '2', '3', '4', '5', '6', '7'],
        }
    },
    // 10m等高线 --- [ zoom = 18 获取不到图片，不建议使用 ]
    "opentopo": {
        "template": "https://c.tile.opentopomap.org/{z}/{x}/{y}.png",
        "options": {
        }
    },
    // OpenCycle 地形图
    "opencycle": {
        "template": "http://a.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=申请密钥",
        "options": {
        }
    },
    // OSM 冬日地图
    "osm": {
        "template": "https://w3.outdooractive.com/map/v1/png/osm_winter/{z}/{x}/{y}/t.png?project=api-dev-oa",
        "options": {
        }
    },
    "baidu": {
        "template": "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&udt=20180403&scaler=1&p=1",
        "options": {
        }
    }
}

import L from "leaflet";
let mapOption = tileLayer["amap"];

this.AMapObj = L.noConflict() as any;
this.Map = this.AMapObj.map("leaflet" + this.random, {
    zoom: 4,
    minZoom: 4,
    center: [center.lat, center.lng],
 });
this.tileLayerMap = L.tileLayer(
   mapOption.template,
   mapOption.options
).addTo(that.Map);