美文网首页
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