web地图快照技术

写在前面

• 最近项目中增加了一个将地图区域进行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="你想要的大小"/>

• 2、Java后台如何接收并处理前台传过来的json格式的数组参数
  参考解决方案

有价值参考内容

• js实现div转svg，svg转canvas
• 图片拼接
• img和canvas的相互转换
• 将百度地图img标签中的图片绘制到canvas中
• 将HTML5 Canvas的内容保存为图片
• 谷歌地图保存不了地图
• JS如何导出Div的内容为图片