地图开发总结（1）-一一网

最近项目中用到了地图，对卫星影响的 zoom 要求较高，下面说下解决方案；

高德api下使用天地图

对于地图监控这种工具库，都是大同小异，会的多不如会的精，技术选型上准备采用高德来应对以后地图相关的所有难题；因为对卫星影像清晰度要求较高，偏远地区的高德地图并不符合需求，所以采用使用天地图地图，api使用高德的方式；

    const map = new AMap.Map('container', {
      resizeEnable: true,
      layers: [
        new AMap.TileLayer({
          getTileUrl:
            '//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727',
          zIndex: 20,
          zoom: 17,
        }),
        new AMap.TileLayer({
          getTileUrl:
            '//t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727',
          zIndex: 20,
          zoom: 17,
        }),
      ],
      zoom: 16,
      zooms: [16, 20],
    });
复制代码

高德api下使用谷歌地图

谷歌地图需要翻墙，要下载图片，放在服务器内，根据调用规则调用，需要后端配合，暂时采用第一种天地图方案；

      var map = new AMap.Map('container', {
        resizeEnable: true,
        layers: [
          new AMap.TileLayer({
            getTileUrl: '//mt1.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x=[x]&y=[y]&z=[z]&s=Gali',
            zIndex: 20,
            zoom: 17,
          }),
          new AMap.TileLayer({
            getTileUrl: '//mt1.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil',
            zIndex: 20,
            zoom: 17,
          }),
        ],
        zoom: 17,
      });
复制代码

高德cdn引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="ice-container"></div>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.BasicControl,AMap.Autocomplete,AMap.PlaceSearch"
    ></script>
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
  </body>
</html>

复制代码