SpringBoot创建XYZ地图服务

无论是OpenLayers5还是Cesium都可以调用XYZ地图服务，XYZ地图服务就是浏览器（前端）请求服务器的瓦片。XYZ地图服务的瓦片可以通过《全能电子地图下载器》软件下载。然后SpringBoot可以将这些瓦片发布成服务，供前端调用。

1、新建SpringBoot项目（不再赘述）

SpringBoot项目结构图

2、创建地图服务java类：PublicData.java。（访问瓦片时，url地址必须是http://ip:port/xyz/文件夹名称/z/y/x形式）

package com.public_data.public_data.controller;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;

@RestController
@RequestMapping(value = "/xyz")
public class PublicData {

    @Value("${DATA_PATH}")
    String dataPath;

    @RequestMapping(value="/{name}/{level}/{col}/{rowExtention:.+}",method= RequestMethod.GET)
    public void xyz(@PathVariable String name, @PathVariable int level, @PathVariable int col, @PathVariable String rowExtention, HttpServletResponse response){
        String[] rowParts=rowExtention.split("\\.");
        try {
            int row=Integer.parseInt(rowParts[0]);
            String extension=rowParts[1];
            String path = dataPath+"/"+name+"/"+level+"/"+col+"/"+rowExtention;
//            InputStream inputStream = SqliteUtil.readTile(dataPath,name,level,col,row);
            InputStream inputStream = new FileInputStream(path);
            if(inputStream==null){
                return;
            }
            BufferedImage br = ImageIO.read(inputStream);
            ImageIO.write(br, extension, response.getOutputStream());
            br.flush();
            inputStream.close();
        } catch (IOException e) {
            e.printStackTrace();
            System.out.println(String.format("%s/%d/%d/%s请求出错!" ,name,level,col,rowExtention));
        }
    }
}

3、创建设置跨域的类：CorsFilter .java

package com.public_data.public_data.filter;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CorsFilter implements Filter {

    @Value("${web.CorsFilter}")
    private boolean corsFilter;

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        if (corsFilter) {
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE,OPTIONS");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length,Authorization,Accept,X-Requested-With");
        }
        chain.doFilter(req, res);
    }

    @Override
    public void destroy() {

    }
}

4、application.properties

#瓦片存放的本地路径
DATA_PATH = F:/data

#设置允许跨域（jar包设置为true，war包设置为false）
web.CorsFilter = true

5、pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.public_data</groupId>
    <artifactId>public_data</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>public_data</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
    
</project>

6、测试

瓦片本地路径示意图

image.png

网络访问示意图

image.png

OpenLayers5调用XYZ服务的代码

var xyzSource = new XYZ({
            url:'http://localhost:8080/xyz/OSM/{z}/{x}/{y}.png'
        });
        var tileLayer = new TileLayer({
            source: xyzSource
        });
        this.ol_map = new Map({
            target: 'olContainer',
            layers: [tileLayer],
            view: new View({
                center: transform([110, 35],'EPSG:4326', 'EPSG:3857'),
                zoom:3
            })
        });