Vue front-end project references Gaode offline map

Due to a problem with the tool for downloading offline map tiles in the previous article, you need to replace the tool to download offline tiles again. The steps are as follows:

1. Download offline tiles (backend)

1.1 Use MapDownloader to download offline map tiles

Tool extraction code: mmdl

The tool needs to be configured as follows: Modify the MapDownloader.exe.config file

Run the MapDownloader.exe file after saving

1.2 Select the mysql database, and then select the map to be downloaded. The amount of downloaded data is not too large. I choose the 8-11 level map of Guizhou Province, and download the map level according to the demand.

The more data, the slower the download, and it is easy to get stuck. You can download hierarchically, download a layer, export a layer, and finally integrate it into a folder

1.3 Generate a static picture file and put it on the server

Need to export tool link: GISMysqlToLoacal

Extraction code: gisc

Run the GISMysqlToLocal.exe in it

1. Configure database information

2. Select the local storage directory (you can put it directly in your own project, or you can put it in other files first)

3. export file

Inside the folder is a hierarchy of maps arranged in order

2. Use the map in the front-end code

AMapLoader.load({
      key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale","AMap.DistrictSearch"], //需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        var googleMapLayer = new AMap.TileLayer({
          getTileUrl: function (x, y, z) {
            return "/788865972/" + z + "/" + x + "/" + y + ".png";
          },
          opacity: 1,
          zIndex: 99,
        });
        this.map = new AMap.Map("container", {
          resizeEnable: true,
          expandZoomRange: true,
          zoom: 9,
          zooms: [9, 13],
          layers: [googleMapLayer],
        });
        this.map.addControl(new AMap.Scale());
        this.map.setCenter([106.957466, 26.684193]); //设置地图中心点
      })
      .catch((e) => {
        console.error(e); //加载错误提示
      });

*The developer's key must be filled in (you can apply for a key yourself)

Download the tile map, put the tile map static folder 788865972 in the local project pulic directory