web地图快照技术

最新推荐文章于 2021-11-10 21:09:10 发布

学大大

最新推荐文章于 2021-11-10 21:09:10 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： ——【2DGIS】 ——【Web开发】文章标签：地图 web 拼接导出瓦片

本文链接：https://blog.youkuaiyun.com/xk_zhang/article/details/62050101

——【2DGIS】同时被 2 个专栏收录

13 篇文章

订阅专栏

——【Web开发】

5 篇文章

订阅专栏

写在前面

最近项目中增加了一个将地图区域进行screenshot后存入word的需求。刚开始考虑用arcgis server的geometryservice服务来实现。于是让组员着手研究，研究了个把月后以没结果结束，但是需求还是没完成，最后还得自己动手。
因为前面没有实现，所以此次我直接pass掉geometryservice的方法，受文章启发考虑用开源方案html2canvas，网上有调用谷歌地图进行转换的成功案例，但是涉及到跨域问题需要使用代理，因为没有java版本的代理所以放弃了。
对地图区域进行元素检查，不难发现web地图是由256*256的若干瓦片组成的，最后决定从底层自己开发个算法，算法最终要实现的是输入若干瓦片链接，输出一块拼接后图片的base64字符串。

技术路线

1、从前端的document中选出所有的瓦片image(text等)，取出image的包括src在内的各项参数存入数组
2、将数组传入后台处理程序（在此文章方法一中受到启发），得到包括每个瓦片的base64码、x、y等在内的各项参数的json数组
3、前端将后台传来的瓦片参数数据利用canvas的drawimage方法进行拼接；
4、前端将拼接好的canvas利用todataurl方法进行转换，得到拼接后图片的base64数据，到此，算法完成。

遇到的问题

1、信息: Error parsing HTTP request header
经过搜索后发现是Tomcat的header缓冲区大小不够,只需要在server.xml中增加maxHttpHeaderSize字段即可，参考类似解决方案

<Connector URIEncoding="UTF-8" port="8080" protocol="org.apache.coyote.http11.Http11NioProtocol"
    useBodyEncodingForURI="false"
    enableLookups="false"
    connectionTimeout="20000"
    redirectPort="8443" maxHttpHeaderSize="你想要的大小"/>