Leaflet 加载纠偏后必应地图在线瓦片，必应地图最新最全在线瓦片地址

已于 2023-03-28 10:09:19 修改
阅读量2.2k 收藏 5
点赞数 3
分类专栏： WebGIS 文章标签： web
于 2022-12-15 15:47:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingjing_n/article/details/128236744
版权

必应地图地址

首先了解

必应地图的在线瓦片 url 地址的获取方法和国内图商不太一样，需要从影像元数据 API 请求得到，详细的官方使用教程在获取影像元数据和影像元数据，API 地址如下：

https://dev.ditu.live.com/REST/V1/Imagery/Metadata/{imagerySet}?mapLayer={mapLayer}&o=json&c=zh-cn&key={BingMapsKey}
  • {imagerySet} 参数：元数据的影像类型，相关可用的值如下表
值说明
Aerial航拍图像
AerialWithLabelsOnDemand叠加道路的航空影像
CanvasDark黑色版本的世界电子地图
CanvasLight轻量版本的世界电子地图
CanvasGray灰色版本的世界电子地图
RoadOnDemand常规版本的中国电子地图
RoadVibrantDark黑色版本的中国电子地图

官网说，中国地区影像获取元数据的 url 的 imagerySet 参数仅支持 RoadOnDemand 和 RoadVibrantDark，但经过测试，上表中其他值传入也能得到对于的在线瓦片地址

  • {mapLayer} 参数：获取的切片类型，可以组合赋值，如 mapLayer=Basemap,Buildings，相关可用的值如下表
值说明
Basemap常规地图切片，默认
Background仅地图背景（区域面）
Foreground仅地图前景（路网和注记层）
TrafficFlow实时路况信息
Buildings建筑立体图形

并不是任意组合都是有效的，下文会测试出那些组合是有效的。

  • {BingMapsKey} 参数：微软必应地图密钥，可以在这里申请。

API 响应结果会包括 在线瓦片地址模板、子域列表、瓦片宽高、最大最小可见层级等。这里不多做介绍，可查阅官方教程。

地址获取

通过以下代码对影像元数据 API 进行遍历请求，

async function getAllUrl () {
  let l = "https://dev.ditu.live.com/REST/V1/Imagery/Metadata/{imagerySet}?{mapLayer}o=json&c=zh-cn&key={BingMapsKey}"
  let a = ["Aerial", "AerialWithLabelsOnDemand", "CanvasDark", "CanvasLight", "CanvasGray", "RoadOnDemand", "RoadVibrantDark"]
  let b = ["", "Basemap", "Background", "Foreground", "TrafficFlow", "Buildings", "Basemap,Background", "Background,Foreground", "Foreground,TrafficFlow", "TrafficFlow,Buildings", "Basemap,Foreground", "Basemap,TrafficFlow", "Basemap,Buildings", "Background,TrafficFlow", "Background,Buildings", "Foreground,Buildings"]
  let map = ["Basemap", "Background", "Foreground", "TrafficFlow", "Buildings"]
  let ttt = []
  function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time)) }
  async function pp (imagerySet, mapLayer) {
    let metaData = await fetch(L.Util.template(l, { imagerySet: imagerySet, mapLayer: mapLayer === "" ? "" : "mapLayer=" + mapLayer + "&", BingMapsKey: "AmLYMlFcLiYKOL_0K304vMOqq18dTfeBlja7GoB_-2KJltJXDmIBU7vaHG-xyEm2" })).then(res => res.json())
    if (metaData.statusCode === 200) {
      var resource = metaData.resourceSets[0].resources[0]
      let no = true
      let fli = ttt.forEach(e => {
        if (e.url === resource.imageUrl) {
          no = false
          e.imagerySet = e.imagerySet === imagerySet ? e.imagerySet : (e.imagerySet + " 或 " + imagerySet)
          e.mapLayer = e.mapLayer + " 或 " + (mapLayer === "" ? "无" : mapLayer)
        }
      })
      if (no) { ttt.push({ imagerySet: imagerySet, mapLayer: mapLayer === "" ? "不传" : mapLayer, url: resource.imageUrl }) }
      console.dir(resource.imageUrl)
    } else {
      console.dir("请求元数据出错: " + metaData.statusCode + "：" + metaData.statusDescription)
    }
  }
  for (let i = 0; i < a.length; i++) {
    let imagerySet = a[i]
    for (let j = 0; j < b.length; j++) {
      await pp(imagerySet, b[j])
      await sleep(10)
      await pp(imagerySet, map.filter((e) => { return b[j].indexOf(e) < 0 }).join(",")) // 五个取 5 个种类 = 五个取 0 个种类，五个取 4 个种类 = 五个取 2 个种类，五个取 3 个种类 = 五个取 2 个种类
    }
  }
  console.dir(ttt.map((e) => { return "|" + e.imagerySet + "|" + e.mapLayer + "|" + e.url + "|" }).join("\r\n"))
}

测试得出了45个地址不重复的瓦片地址。

imagerySet 参数mapLayer 参数在线瓦片地址备注
AerialBasemap//{subdomain}.ssl.ak.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=13184
AerialWithLabelsOnDemandBasemap//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=A,G,L&og=767&n=z
AerialWithLabelsOnDemandForeground//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,L&og=767&n=z
AerialWithLabelsOnDemandBackground//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB,L&og=767&n=z
AerialWithLabelsOnDemandTrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=A,G,TF,L&og=767&n=z
AerialWithLabelsOnDemandForeground,TrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,TF,L&og=767&n=z
AerialWithLabelsOnDemandBackground,TrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB,TF,L&og=767&n=z
CanvasDarkBasemap//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,L&cstl=WD&og=767&n=z
CanvasDarkForeground//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,L&cstl=WD&og=767&n=z
CanvasDarkBackground//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB&cstl=WD&og=767&n=z
CanvasDarkTrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,TF,L&cstl=WD&og=767&n=z
CanvasDarkForeground,TrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,TF,L&cstl=WD&og=767&n=z
CanvasDarkBackground,TrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB,TF&cstl=WD&og=767&n=z
CanvasLightBasemap//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,L&cstl=WL&og=767&n=z
CanvasLightForeground//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,L&cstl=WL&og=767&n=z
CanvasLightBackground//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB&cstl=WL&og=767&n=z
CanvasLightTrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,TF,L&cstl=WL&og=767&n=z
CanvasLightForeground,TrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,TF,L&cstl=WL&og=767&n=z
CanvasLightBackground,TrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB,TF&cstl=WL&og=767&n=z
CanvasGrayBasemap//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,L&cstl=CG&og=767&n=z
CanvasGrayForeground//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,L&cstl=CG&og=767&n=z
CanvasGrayBackground//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB&cstl=CG&og=767&n=z
CanvasGrayTrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,TF,L&cstl=CG&og=767&n=z
CanvasGrayForeground,TrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,TF,L&cstl=CG&og=767&n=z
CanvasGrayBackground,TrafficFlow//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB,TF&cstl=CG&og=767&n=z
RoadOnDemandBasemap//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,L&og=767&n=z
RoadOnDemandForeground//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,L&og=767&n=z
RoadOnDemandBackground//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB&og=767&n=z
RoadOnDemandTrafficFlow//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,TF,L&og=767&n=z
RoadOnDemandForeground,TrafficFlow//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,TF,L&og=767&n=z
RoadOnDemandBackground,TrafficFlow//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB,TF&og=767&n=z
RoadOnDemandBasemap,Buildings//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,BX,L&og=767&n=z
RoadOnDemandForeground,Buildings//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,BX,L&og=767&n=z
RoadOnDemandBasemap,TrafficFlow,Buildings//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,BX,TF,L&og=767&n=z
RoadOnDemandForeground,TrafficFlow,Buildings//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,BX,TF,L&og=767&n=z
RoadVibrantDarkBasemap//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,L&cstl=VBD&og=767&n=z
RoadVibrantDarkForeground//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,L&cstl=VBD&og=767&n=z
RoadVibrantDarkBackground//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB&cstl=VBD&og=767&n=z
RoadVibrantDarkTrafficFlow//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,TF,L&cstl=VBD&og=767&n=z
RoadVibrantDarkForeground,TrafficFlow//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,TF,L&cstl=VBD&og=767&n=z
RoadVibrantDarkBackground,TrafficFlow//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=GB,TF&cstl=VBD&og=767&n=z
RoadVibrantDarkBasemap,Buildings//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,BX,L&cstl=VBD&og=767&n=z
RoadVibrantDarkForeground,Buildings//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,BX,L&cstl=VBD&og=767&n=z
RoadVibrantDarkBasemap,TrafficFlow,Buildings//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=G,BX,TF,L&cstl=VBD&og=767&n=z
RoadVibrantDarkForeground,TrafficFlow,Buildings//dynamic.{subdomain}.tiles.ditu.live.com/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&it=Z,GF,BX,TF,L&cstl=VBD&og=767&n=z

官方说在线瓦片地址可能发生变化，所以每次使用时尽量通过请求元数据 API 来得到。

除开 Aerial 卫片影像地址，通过对请求参数和得到的电子地图地址进行规律摸索，得出以下结论：

  • imagerySet 影响 cstl 参数。
    RoadVibrantDark => cstl=VBD、CanvasGray => cstl=CG、CanvasLight => cstl=WL、CanvasDark => cstl=WD、AerialWithLabelsOnDemand 和 RoadOnDemand 没有 cstl 参数。
  • mapLayer 影响 it 参数。
    it 是一个组合值，it 符合 (G|GB)[,BX][,TF][,L|,LA] 或者 (Z)([,GF]|[,BX]|[,TF]|[,L|,LA]) 模板，
    即 (路网+区域面|区域面)[,立体建筑][,实时路况][,注记|,注记+POI] 或者 (开头符号表示无区域面)([,立体建筑][,实时路况][,注记|,注记+POI]) 。
  • 整理后的整个模版地址：(//{subdomain}.ssl.ak.dynamic.tiles.virtualearth.net|//dynamic.{subdomain}.tiles.ditu.live.com)/comp/ch/{quadkey}?mkt=zh-CN&ur=CN&og=767&n=z&it=((G|GB)[,BX][,TF][,L|,LA]|(Z)([,GF]|[,BX]|[,TF]|[,L|,LA]))[&cstl=(VBD|CG|WL|WD)]，其中()内必填，[]内选填，|或关系。

Leaflet 添加代码

将 {imagerySet} 和 {mapLayer} 参数，用 | 隔开， 或 在线瓦片 url，即可将相关在线瓦片添加至 leaflet 预览
在线运行

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
      body { padding: 0; margin: 0; }
      html, body, #map { height: 100%; }
      #param-test { position: absolute; z-index: 999; left: 10px; top: 10px; background: white; padding: 0 3px; line-height: 28px; font-size: 14px }
      #url-input {  width: 450px; height: 18px; margin-bottom: 3px; }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"></script>
    <script src="https://unpkg.com/gcoord@0.3.2/dist/gcoord.js"></script>
  </head>
  <body>
    <div id="param-test">
      测试参数：<input id="url-input" type="text" placeholder="输入元数据参数 {imagerySet}|{mapLayer} 或 在线瓦片 url , 并回车" onkeydown="loadTile(this.value)" />
    </div>
    <div id="map" />
  </body>
  <script type="text/javascript">
    L.TileLayer.BingTileLayer = L.TileLayer.extend({ // 拓展必应地图瓦片图层
      initialize: function (options) {
        function getTileUrl (coords) { // 提供的根据 xyz 计算瓦片 url 的方法，输入位置索引 {x: Number, y: Number, z: Number } ,输出对应的 url切片地址
          var code = '' //必应地图切片规则，参考 https://learn.microsoft.com/en-us/bingmaps/articles/bing-maps-tile-system
          for (var i = coords.z; i > 0; i--) {
            var b = 0, mask = 1 << (i - 1)
            if ((coords.x & mask) !== 0) { b += 1 }
            if ((coords.y & mask) !== 0) { b += 2 }
            code += b.toString()
          }
          return L.Util.template(this._url, L.extend({ subdomain: this._getSubdomain(coords), quadkey: code, culture: "zh-Hans" }))
        }

        if (options.url) { // 从在线瓦片 url 请求
          options = L.extend({ subdomains: ["t0", "t1", "t2", "t3"], minZoom: 0, maxZoom: 23, minNativeZoom: 3, maxNativeZoom: 18 }, options, { getTileUrl: getTileUrl }) // getTileUrl 放最后不被覆盖
          L.TileLayer.prototype.initialize.call(this, options.url, options)
        }
        else { // 从元数据 url 请求
          L.Util.setOptions(this, options) // 当异步获取图层 url 时，可能会先执行图层的其他方法，先 setOptions 一下能够让其他方法获取到 this.options
          options.metaDataUrl = L.Util.template("https://dev.ditu.live.com/REST/V1/Imagery/Metadata/{imagerySet}?{mapLayer}include=ImageryProviders&suppressStatus=true&uriScheme=https&o=json&ur=cn&c=zh-cn&key={BingMapsKey}",
            { imagerySet: options.imagerySet, mapLayer: options.mapLayer === "" ? "" : "mapLayer=" + options.mapLayer + "&", BingMapsKey: "AmLYMlFcLiYKOL_0K304vMOqq18dTfeBlja7GoB_-2KJltJXDmIBU7vaHG-xyEm2" })
          this._metaDataFetch = fetch(options.metaDataUrl).then(res => res.json()).then((metaData) => {
            if (metaData.statusCode === 200) {
              var mata = metaData.resourceSets[0].resources[0]
              options.url = mata.imageUrl
              options = L.extend({ subdomains: mata.imageUrlSubdomains, minZoom: 0, maxZoom: 23, minNativeZoom: mata.zoomMin < 3 ? 3 : mata.zoomMin, maxNativeZoom: mata.zoomMax > 18 ? 18 : mata.zoomMax }, options, { getTileUrl: getTileUrl })
              L.TileLayer.prototype.initialize.call(this, options.url, options)
              console.dir(options.url)
            } else {
              console.dir("请求元数据出错: " + metaData.statusCode + "：" + metaData.statusDescription)
            }
          })
        }
      },
      createTile: function (coords, done) {
        const tile = document.createElement('img')
        L.DomEvent.on(tile, 'load', this._tileOnLoad.bind(this, done, tile))
        L.DomEvent.on(tile, 'error', this._tileOnError.bind(this, done, tile))
        if (this.options.crossOrigin || this.options.crossOrigin === '') { tile.crossOrigin = this.options.crossOrigin === true ? '' : this.options.crossOrigin }
        if (typeof this.options.referrerPolicy === 'string') { tile.referrerPolicy = this.options.referrerPolicy }
        tile.alt = ''
        if (this._metaDataFetch) { this._metaDataFetch.then(function () { tile.src = this.getTileUrl(coords) }.bind(this)) } // 从元数据异步请求
        else { tile.src = this.getTileUrl(coords) }
        return tile
      },
      getTileUrl: function (coords) {
        if (this.options.getTileUrl) { // 存在自定义获取瓦片 url 方法
          return this.options.getTileUrl.bind(this)(coords)
        } else {
          return L.TileLayer.prototype.getTileUrl.call(this, coords)
        }
      },
      _setZoomTransform: function (level, center, zoom) {
        if (this.options.getCorrect) { center = this.options.getCorrect(center) } // 存在纠偏方法，则进行纠偏计算
        L.TileLayer.prototype._setZoomTransform.call(this, level, center, zoom)
      },
      _getTiledPixelBounds: function (center) {
        if (this.options.getCorrect) { center = this.options.getCorrect(center) } // 存在纠偏方法，则进行纠偏计算
        return L.TileLayer.prototype._getTiledPixelBounds.call(this, center)
      }
    })
    L.tileLayer.bingTileLayer = function (options) { return new L.TileLayer.BingTileLayer(options) }

    var map = L.map("map", { center: [29.708050, 118.321499], zoom: 15, zoomControl: false, attributionControl: false, doubleClickZoom: false })
    L.marker([29.708050, 118.321499]).addTo(map) // 添加点用于纠偏测试
    // map.on('dblclick', function (e) { console.dir(e.latlng.lng + "," + e.latlng.lat) })

    var test_Layer = null
    function loadTile (param) {
      if (!window.event || window.event.keyCode === 13) { // keyCode ===13 表示按下回车
        if (test_Layer !== null) { map.removeLayer(test_Layer), test_Layer = null }
        if (!param) return
        // bingTileLayer 在 tileLayer 的基础上增加了四个参数，从在线瓦片 url 请求 设置 url，从元数据请求设置 imagerySet 和 mapLayer；需要纠偏设置 getCorrect
        if (param.split("|").length > 1) {
          test_Layer = L.tileLayer.bingTileLayer({
            imagerySet: param.split("|")[0], mapLayer: param.split("|")[1], getCorrect: (o) => { // 坐标系纠偏方法，输入输出都是 L.latLng 对象
              return L.latLng(gcoord.transform([o.lng, o.lat], gcoord.WGS84, gcoord.GCJ02).reverse())
            }
          })
        }
        else {
          test_Layer = L.tileLayer.bingTileLayer({
            url: param, getCorrect: (o) => { // 坐标系纠偏方法，输入输出都是 L.latLng 对象
              return L.latLng(gcoord.transform([o.lng, o.lat], gcoord.WGS84, gcoord.GCJ02).reverse())
            }
          })
        }
        map.addLayer(test_Layer)
      }
    }
    var param = "Aerial|"
    document.getElementById("url-input").value = param
    loadTile(param)
  </script>
</html>

参考链接

微软必应地图官网教程：https://learn.microsoft.com/en-us/bingmaps/rest-services/

XGJ一九
关注
专栏目录
Vue+Proj4Leaflet实现地图瓦片(Nginx代理本地地图瓦片为网络url)加载并实现CRS投影转换(附资源下载)
BADAO_LIUMANG_QIZHI的博客
06-28 1083
结合上面的文章，如果要在Vue中使用leaflet加proj4实现加载瓦片地图并且可以设置/转换投影。并且这个瓦片地图文件不再是本地磁盘路径的url，而是使用Nginx将图片png代理成网络url的形式。切割的OSM的地图瓦片文件为EPSG3857,文件路径如下将地图瓦片png文件使用nginx代理成网络服务。
3.（leaflet篇）leaflet加载接入高德、openstreetmap、google地图
GIS之家家长
04-11 848
听老人家说：多看美女会长寿 地图之家总目录（建议先查看该内容） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='viewpo
Leaflet加载百度瓦片到WGS84坐标系下
吴道简的博客
04-13 1598
Leaflet加载百度瓦片到WGS84坐标系下 百度技术真的很好，但还是忍不住吐槽，bd09坐标系、bd09mc投影、百度地图瓦片，真是诡异的存在。 下面的代码能实现，将leaflet中加载的百度地图瓦片纠正到WGS84坐标系下。 <!DOCTYPE html> <html> <head> <title>加载百度地图-WGS84坐标系</title> <meta charset="utf-8"> ...
无需翻墙的Google瓦片地图地址
github_31946551的博客
05-12 3533
Google地图自2020年初从中国互联网下线之后，近日又可以再次访问呢。经过测试，不需要梯子，就可以直接访问Google瓦片地图数据了。经查看，Google严格按照中国法律的规定对中文注记、边界进行了修正（尤其是藏南地区）。目前，虽然还没有网站可以直接访问地图，但是可以通过QGIS或者各种webigs框架去加载瓦片地图。当然，还可以访问其他类型的瓦片地图，只需要修改lyrs参数就可以了。带中文地名标注的卫星图片地图：（gcj02坐标系）卫星图片地图：（wgs84坐标系）街道地图：（gcj02坐标系）
5个在线地图瓦片URL分享
最新发布
07-10 711
数据是GIS的血液，现在为你分享5个在线的瓦片地图URL图源！ 该在线地图瓦片URL支持在GIS软件或开发平台进行调用，比如ArcGIS、QGIS、GlobalMapper、Openlayer或leaflet等。 5个在线瓦片地图URL 现在为你分享5个在线地图瓦片的URL，并为你展示它们在水经微图（简称“微图”）中的加载效果。 （1）高德卫星影像URL https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&
leaflet加载接入百度地图（leaflet篇.2）
地图之家
05-14 7607
完整代码文件在文章末尾处提供 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <!-- L
Leaflet调用谷歌地图、天地图、智图地图、高德题图一键搞定
热门推荐
做GIS梦的人
08-26 2万+
Leaflet调用各种地图的功能十分复杂，幸好有leaflet.ChineseTmsProviders这个插件，这四种地图直接就可以加载进来，十分方便。 下面是我做的例子：
Bing Maps必应地图
weixin_30244889的博客
01-25 265
必应地图支持中英文地图的切换。 英文：<script charset="UTF-8" type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"> 中文：<script id="mapurl" charset="UTF-8" type=...
leaflet加载百度、高德、谷歌、天地图等在线地图
03-26
leaflet加载百度、高德、谷歌、天地图等在线地图
leaflet加载百度地图和其他网络在线地图
08-23
leaflet加载百度地图和其他网络在线地图，包含百度的瓦片、影像以及道路交通实况服务，测试，百度坐标数据无需转换，直接根据经纬度可以显示在正确位置。
leaflet加载离线瓦片地图
weixin_46081202的博客
07-28 821
【代码】leaflet加载离线瓦片地图。
Leaflet加载高德瓦片到WGS84坐标系下
吴道简的博客
04-13 2931
效果如下图，高德矢量底图、影像底图、OSM地图、天地图影像底图，坐标系都统一到WGS84坐标系下，复选框有注记图层和半透明底图图层。 对图层进行叠加，能看出，纠正后的高德影像底图与OSM路网是套合的，说明瓦片中心点的平移，就能满足误差小于瓦片层级的像素分辨率，既误差在可见之内，那就够了。 代码如下： <!DOCTYPE html> <html> <head> <title>高德-OSM-天地图瓦片对比</title&g...
leaflet瓦片服务偏移排查及自定义坐标系
LGi_ser的博客
08-28 1609
leaflet瓦片服务偏移排查及自定义坐标系 leaflet瓦片偏移问题排查： 1.检查瓦片服务的坐标系是否和地图容器的一致； 2.检查瓦片服务的层级分辨率是否和地图容器一致； 以上两种情况都可以通过设置地图的crs来解决。 自定义坐标系 1.安装proj4 proj4leaflet两个依赖 npm i proj4 proj4leaflet --save 2.在vue中引入插件 import 'leaflet/dist/leaflet.css' import * as L fr
leaflet地图坐标偏移问题记录
ZHANGF13的博客
03-08 3525
leaflet加载各厂地图插件ChineseTmsProviders ChineseTmsProviders插件可以使leaflet地图通过加载瓦片地图的方式加载不同厂商地图的方式 /* 以vue为例 安装 npm install leaflet.chinatmsproviders main.js引入 */ import 'leaflet.chinatmsproviders/src/leaflet.ChineseTmsProviders.js' ChineseTmsProviders提供了对高德、百度、
leaflet-JavaScript地图库 简单使用，marker标记覆盖物，popup自定义弹框，点聚合...
weixin_44167504的博客
07-05 1567
1.地图初始化 2.标记覆盖物 3.自定义弹出窗口 4.点聚合 5.区划遮罩及边缘划线 6.关于 自定义Marker 使用 L.divIcon 地图缩放位置发生偏移 7.纠偏 8.判断图层加载失败/成功 9、多边形 polygon 10、热力图
GIS开发一：OpenLayers在线瓦片数据源汇总
WHEgqing的专栏
03-31 1965
瓦片地图（切片地图）源于一种大地图解决方案，针对一整块非常大的地图进行切片，分成很多相同大小的小块地图，在用户访问的时候，再一块一块小地图加载，拼接在一起，从而还原成一整块大的地图，如果要提高Web地图的访问速度，使用瓦片地图是非常有效的方法。
MFC之 MapWinGis叠加必应瓦片地图
老狼的专栏
01-21 417
1、核心代码 #include "stdafx.h" #include "BingMapProvider.h" #include "SecureHttpClient.h" // ****************************************************** // Initialize() // ****************************************************** // Runs imagery metadata request
瓦片地图
aihehaozhezhe的博客
03-25 277
OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)----博客园 瓦片地图原理 - 数据实验室 - SegmentFault 思否
leaflet 调用bing地图_leaflet图斑历史时空播放(附源码下载)
weixin_35811254的博客
12-21 778
前言leaflet 入门开发系列环境知识点了解：leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等leaflet 在线例子leaflet 插件，leaflet 的插件库，非常有用内容概览leaflet图斑历史时空播放源代码 demo 下载效果图如下：本篇主要是 leaflet 通过调用 geoserver 发布的图斑地图服务 WMS，以 L.tileLayer.wm...
leaflet加载arcgis瓦片地图
01-05
Leaflet是一个轻量级的开源JavaScript库，用于创建移动友好的交互式地图。而ArcGIS则是一个强大的地理信息系统（GIS）平台，提供各种类型的地图和数据。要将ArcGIS的瓦片地图加载到Leaflet中，你可以按照以下步骤进行操作： 1. 安装依赖：在项目中安装Leaflet和ArcGIS的JavaScript库。你可以使用npm或yarn等包管理器来安装所需的依赖项。 2. 创建地图容器：使用Leaflet创建一个地图容器，并设置其id或其他自定义属性以便于后续引用。 3. 加载瓦片图层：使用Leaflet的TileLayer类加载ArcGIS的瓦片图层。你需要提供ArcGIS服务器的主机名、瓦片图层的名称和瓦片图层的URL。 ```javascript var tileLayer = L.tileLayer('http://<ArcGIS服务器主机名>/arcgis/rest/services/<瓦片图层名称>/MapServer/tile/{z}/{y}/{x}', { attribution: '© <ArcGIS版权信息>' }); ``` 确保将`<ArcGIS服务器主机名>`替换为实际的ArcGIS服务器主机名，并将`<瓦片图层名称>`替换为实际的瓦片图层名称。 4. 将图层添加到地图：将加载的瓦片图层添加到地图容器中。 ```javascript map.addLayer(TileLayer); ``` 5. 配置地图选项：根据需要配置地图选项，如缩放级别、坐标系等。 6. 显示地图：将配置好的地图显示在页面上。 这样，你就可以在Leaflet中加载和使用ArcGIS的瓦片地图了。请确保你已正确配置ArcGIS服务器和相关权限，以便能够访问所需的瓦片图层。此外，你可能还需要根据需要调整代码以适应特定的项目要求和样式。 请注意，此过程假设你已经了解了基本的Leaflet和JavaScript知识，并且已经正确安装和配置了所需的依赖项。如果你不熟悉这些技术，建议参考相关的文档和教程以获得更深入的了解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值