The core is the need to download map tiles and place them locally, breaking away from online map services, and realizing offline loading of maps.
Use the BIGMap tool to download map offline tiles to the local download address: http://www.bigemap.com/reader/download/detail201802015.html BIGEMAP GIS Office-all-round version
Trial registration required (free)
The trial version can be downloaded up to 16 levels of tiles, and a single download cannot exceed 100M
Regarding the problem that a single download cannot exceed 100M, I thought about whether it is possible to download in multiple frame-selected areas and concluded that it is not possible because the file names of the files downloaded in blocks are the same as the tiles of the same level. The algorithm is based on the tile name. One corresponding to the corresponding xy position loaded on the screen.
When downloading tiles, you can also divide the region by selecting the administrative region
2. But it can be downloaded in different levels, and then integrated and loaded.
You can download the tiles of Google, arcgis, and TMS services for free . I downloaded the tiles of the Gaode map of the arcgis service.
About the map rendering process:
Electronic maps involve several coordinate systems, and the units of measurement for each coordinate are as follows: latitude and longitude are spherical coordinates, and the unit of latitude and longitude we use daily is angle (deg),
When performing projection calculations, it needs to be converted into radians (rad). The unit of two-dimensional coordinates obtained by Mercator projection is meter (m); the unit of electronic screen coordinates is pixel (px).
Most of the map data obtained by the front end are Mercator coordinates, and a small part are longitude and latitude coordinates. Mercator or latitude and longitude coordinates need to be converted into screen coordinates first, and finally rendered by CSS splicing or WebGL.
Load the local arcgis algorithm as follows:
AMapLoader.load({
key: "", // applied web developer Key, required when calling load for the first time
version: "2.0", // Specify the version of JSAPI to load, the default is 1.4.15
plugins: ["AMap.Scale","AMap.DistrictSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
var googleMapLayer = new AMap.TileLayer({
getTileUrl: function (a, b, c) {
var oo = "00000000";
var zz = c;
var z = "L" + zz;
var xx = a.toString(16);
var x = "C" + oo.substring(0, 8 - xx.length) + xx;
var yy = (b - 1).toString(16); //注意此处，计算方式变了
var y = "R" + oo.substring(0, 8 - yy.length) + yy;
return "/arcgis_layers/" + z + "/" + y + "/" + x + ".jpg";
},
opacity: 1,
zIndex: 99,
});
this.map = new AMap.Map("container", {
resizeEnable: true,
expandZoomRange: true,
zoom: 9,
zooms: [9, 13],
layers: [ new AMap.TileLayer(), googleMapLayer],
});
this.map.addControl(new AMap.Scale());
this.map.setCenter([106.976692, 26.236684]); // 中心点坐标
})
.catch((e) => {
console.error(e); //加载错误提示
});
通过算法来加载下载好得离线瓦片，这样就实现了离线地图。