美文网首页
antv/L7 mapbox添加google影像底图

antv/L7 mapbox添加google影像底图

作者: 一只会跑的程序猿 | 来源:发表于2021-04-22 16:32 被阅读0次

    一个GIS项目用到了antv/L7,本来打算用leaflet,但上个相似的项目用了antv/L7,这个项目就继续antv/L7了。
    客户要求用google影像加注记的底图,且要离线使用,因此一记。
    项目是react框架的,因此用到了@antv/l7-react。

    详细代码如下:

        <MapboxScene
            className="my-map"
            option={{
              logoVisible: false,
            }}
            map={{
              center: [100.3, 38.5],
              zoom: 6,
              style: {
                version: 8,
                sources: {
                  'raster-tiles': {
                    type: 'raster',
                    tiles: [
                      // mt(0—3) Google地图使用了四个服务地址
                      // lyrs=
                      // m:路线图
                      // t:地形图
                      // p:带标签的地形图
                      // s:卫星图
                      // y:带标签的卫星图
                      // h:标签层(路名、地名等)
                      'https://mt1.google.cn/maps/vt?lyrs=y%40721&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}',
                    ],
                    tileSize: 256,
                  },
                },
                layers: [
                  {
                    id: 'google',
                    type: 'raster',
                    source: 'raster-tiles',
                    // minZoom: 0,
                    // "maxzoom": 18
                  },
                ],
              },
            }}
            style={{
              height: '100vh',
            }}
         />

    相关文章

      网友评论

          本文标题:antv/L7 mapbox添加google影像底图

          本文链接:https://www.haomeiwen.com/subject/kwkfrltx.html