Recently, maps have been used in the project, which has high requirements for the zoom of satellite influence. The solutions are as follows.

Autonavi API under the use of heaven and Earth map

For the map monitoring tool library, are much the same, will be more than will be fine, technology selection is prepared to use Autonavi to deal with all the problems related to the map in the future; Because of the high definition requirements for satellite images, amAP in remote areas does not meet the requirements, so the world Map map is adopted, and THE API is used by Autonavi.

    const map = new AMap.Map('container', {
      resizeEnable: true.layers: [
        new AMap.TileLayer({
          getTileUrl:
            '/ / t,1,2,3,4,5,6,7 {0}. Tianditu. Gov. Cn/img_w/WMTS? SERVICE = WMTS&REQUEST = GetTile&VERSION = 1.0.0 & LAYER = img&STYLE = default&TILE MATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727'.zIndex: 20.zoom: 17,}).new AMap.TileLayer({
          getTileUrl:
            '/ / t,1,2,3,4,5,6,7 {0}. Tianditu. Gov. Cn/cia_w/WMTS? SERVICE = WMTS&REQUEST = GetTile&VERSION = 1.0.0 & LAYER = cia&STYLE = default&TILE MATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=d7fcf6db577fd86e0cc48e9169065727'.zIndex: 20.zoom: 17,})],zoom: 16.zooms: [16.20]});Copy the code

Google Maps is used under the Autonavi API

Google Map needs to turn over the wall, to download the picture, put it in the server, according to the call rules call, need to cooperate with the back end, temporarily use the first map scheme;

      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});Copy the code

Autonavi CDN introduction

<! 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= you applied key&plugin = AMap. MouseTool, AMap. PolyEditor, AMap) Scale, AMap. The OverView, AMap. T oolBar,AMap.BasicControl,AMap.Autocomplete,AMap.PlaceSearch"
    ></script>
    <script src="/ / webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
  </body>
</html>

Copy the code

I wish you all the best