基于leaflet的离线瓦片发布方式总结

离线瓦片发布

        leaflet是webgis中相对成熟的开源地图组件库，包含了几乎大部分开发者的基本需求，对于一般用户而言，联网状态下采用在线的瓦片服务即可，但也有一些需要必须离线的场景，本篇博客将讲述两种离线瓦片发布的方式，其一：采用Springboot后端发布；其二：直接将瓦片资源放在文件路径下访问。

瓦片发布前的准备

        在发布瓦片服务前，先要根据框定的经纬度爬取地图瓦片图片，这里采用已经开源的"全能地图下载器3.0"，选择好需要爬取的地图级别（级别越大，相当于放大程度Zoom越大）所以越大耗费的存储空间越大。

Springboot瓦片发布

参考

controller下新建PublicData.java

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));
        }
    }
}

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() {

    }
}

配置图片路径，在application.properties中修改

#瓦片存放的本地路径
DATA_PATH = /Users/apple/xxx/xxx
#DATA_PATH = E:/newtask
#设置允许跨域（jar包设置为true，war包设置为false）
web.CorsFilter = true

地图前端的url：

var url = 'http://localhost:8080/xyz/roadmap/{z}/{x}/{y}.png';

本地路径访问

把url地址写对即可：

var url = './roadmap/{z}/{x}/{y}.png'