SAS Planet下载地图瓦片请看上一篇 详细介绍了下载方法
【SAS Planet 下载地图瓦片】-CSDN博客
准备工作：
1.提前下载好地图瓦片数据
SAS Planet下载地图瓦片默认存储路径如下
默认存储格式为 .sqlitedb
2.提前准备好 java开发环境和开发工具，新建 一个 spring boot 工程，集成 maven。
在pom.xml 下新增sqlite3驱动包配置，然后更新工程 maven
<!-- sqlite3驱动包 --><dependency><groupId>org.xerial</groupId><artifactId>sqlite-jdbc</artifactId><version>3.32.3.2</version></dependency>读取SAS Planet下载的地图瓦片后台代码如下：
package com.api.controller;import io.swagger.annotations.Api;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.http.HttpHeaders;import org.springframework.http.MediaType;import org.springframework.http.ResponseEntity;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RestController;import java.io.BufferedInputStream;import java.io.IOException;import java.sql.*;import java.util.HashMap;import java.util.List;import java.util.Map;@Api(value="读取sqlite文件瓦片",tags={"读取sqlite文件瓦片"})@CrossOrigin // 允许跨域访问@RestControllerpublic class sqliteTilesController {@GetMapping(value = "/getCacheTiles/{layerName}/{level}/{x}/{y}")public ResponseEntity<byte[]> getCacheTiles(@PathVariable("layerName")String layerName, @PathVariable("level")Integer level, @PathVariable("x")Integer x, @PathVariable("y")Integer y) {ResponseEntity<byte[]> response=null;Statement stmt = null;Connection conn = null;try {//String path="E:\\WJ_Data\\SAS.Planet.Release.200606\\cache_sqlite\\Google_Sat_RU_SD\\"+layerName+"\\z"+level+"\\0\\0\\0.0.sqlitedb";String basePath="E:\\WJ_Data\\SAS.Planet.Release.200606\\cache_sqlite\\";//地图下载（SAS.Planet） 下载的瓦片存储在sqlitedb文件里 路径规则 规则计算// 将十进制数转换为二进制字符串再右移后还原成十进制数Integer shrX1= shrnNumberValue(x,10);//Integer shrY1= shrnNumberValue(y,10);//Integer shrX2= shrnNumberValue(x,8);//Integer shrY2= shrnNumberValue(y,8);//String fullPath=basePath+layerName+"\\z"+level+"\\"+shrX1+"\\"+shrY1+"\\"+shrX2+"."+shrY2+".sqlitedb";//jdbc urlString urlStr="jdbc:sqlite:"+fullPath;conn = DriverManager.getConnection(urlStr);conn.setAutoCommit(false);System.out.println("Opened database successfully");stmt = conn.createStatement();//ResultSet rs = stmt.executeQuery( "SELECT * FROM 't'" );String sqlStr="SELECT * FROM 't' where x="+x+" and y="+y;//"SELECT * FROM 't'ResultSet rs = stmt.executeQuery(sqlStr);while ( rs.next() ) {int tilesX = rs.getInt("x");int tilesY = rs.getInt("y");int v= rs.getInt("v");String c= rs.getString("c");long h= rs.getLong("h");long d= rs.getLong("d");String Str="瓦片信息 level:"+level+", x:"+x+", y="+y;System.out.println( Str );//获取图片，图片列的索引为8byte[] bytes = (byte[] )rs.getObject(8);response= ResponseEntity.ok().contentType(MediaType.parseMediaType("image/jpg")).body(bytes);}rs.close();stmt.close();conn.close();} catch ( Exception e ) {System.err.println( e.getClass().getName() + ": " + e.getMessage() );}System.out.println("Operation done successfully");return response;}//将十进制数转换为二进制字符串再右移后还原成十进制数public int shrnNumberValue(int value,int shr) {// value 十进制数// shr 将一个数在二进制上右位移位数String binary = Integer.toString(value, 2); // 十进制转换为二进制字符串int length= binary.length();if(length>shr){String newBinary=binary.substring(0,binary.length()-shr);int decimal = Integer.parseInt(newBinary, 2); // 二进制字符串解析为十进制数return decimal;}else{return 0;}}}获取瓦片接口："http://localhost:2022/getCacheTiles/Google_Sat_RU_SD/{z}/{x}/{y}"
前端页面调用代码如下
<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Custom LERC Layer | Sample | ArcGIS Maps SDK for JavaScript 4.28</title> <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
<style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style>
<script> var dojoConfig = { paths: { // see https://github.com/Esri/lerc lerc: "https://cdn.jsdelivr.net/gh/Esri/lerc@b0650ff915a05b2a045641235323d59b26a40550/OtherLanguages/js/" } }; </script>
<script src="https://js.arcgis.com/4.28/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/BaseTileLayer", "esri/request", "lerc/LercDecode" ], (Map, MapView, BaseTileLayer, esriRequest, LercDecode) => { const LercLayer = BaseTileLayer.createSubclass({ properties: { urlTemplate: null, minElevation: 0, maxElevation: 4000 },
// Generates the URL to an image to be requested from the server getTileUrl: function(level, row, col) { return this.urlTemplate .replace("{z}", level) .replace("{x}", col) .replace("{y}", row); },
// fetch tiles visible in the view fetchTile: function(level, row, col, options) { const url = this.getTileUrl(level, row, col);
// requested encoded elevation information // the signal option ensures that obsolete requests are aborted return esriRequest(url, { responseType: "array-buffer", signal: options && options.signal }).then((response) => { // create a canvas to draw the processed image const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); const width = this.tileInfo.size[0]; const height = this.tileInfo.size[1];
canvas.width = width; canvas.height = height; const lerc = LercDecode.decode(response.data, { noDataValue: 0 });
const pixels = lerc.pixels[0]; const stats = lerc.statistics[0];
const min = this.minElevation; const max = this.maxElevation; const noDataValue = stats.noDataValue; const imageData = context.createImageData(width, height); const data = imageData.data; const factor = 256 / (max - min); let value = 0; let j;
for (let i = 0; i < width * height; i++) { j = i + Math.floor(i / width); value = (pixels[j] - min) * factor; data[i * 4] = value; // r data[i * 4 + 1] = value; // g data[i * 4 + 2] = 0; // b data[i * 4 + 3] = pixels[i] === noDataValue ? 0 : value; // a } context.putImageData(imageData, 0, 0);
return canvas; } ); } }); var vUrl="http://localhost:2022/getCacheTiles/Google_Sat_RU_SD/{z}/{x}/{y}"; const lercLayer = new LercLayer({ urlTemplate:vUrl, title: "Google_Sat_RU_SD" });
const map = new Map({ basemap: "dark-gray-vector", layers: [lercLayer] });
const view = new MapView({ container: "viewDiv", map: map zoom: 5 }); }); </script> </head>
<body> <div id="viewDiv"></div> </body> </html>
效果如下
