GOOGLE离线地图+tomcat+openlayers4
2018-06-06 本文已影响2人
_oeo___
该教程是新手版，完全不懂Gis。直接哪里啊就可以用了。
使用乐太地图下载器
附下载地址破解版
链接:https://pan.baidu.com/s/1nwLhXod 密码:ne38
下载Google地图
image.png
注意红色部分。需要选择，就按照google自己的方式进行存储。不用修改
下载下来如下目录：
级别/列/行.png
image.png
发布服务
讲下载下来的目录放到tomcat中：
不用war啥的复杂的东西，直接在tomcat的webapps 中创建一个目录tiles让后将刚才的下载的瓦片目录拷贝过来，然后请求就好了。
目录如下：
image.png
好了看见了，整个目录就这样了。启动tomcat
然后请求： http://localhost:8080/tiles/googleworld/{z}/{x}/{y}.png
将z/x/y 换成你的级别，行列号，就可以请求到一个地图分片了。
如何使用这个离线地图Demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
<!--<script type="text/javascript" src="js/ol.js" ></script>-->
<!--<script type="text/javascript" src="js/p.js" ></script>-->
</head>
<body>
<div id="googleMap" style="width: 100%"></div>
<script>
// google地图层
var googleMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
//url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
url:'http://localhost:8080/tiles/googleworld/{z}/{x}/{y}.png'
})
});
// 创建地图
var map = new ol.Map({
layers: [
googleMapLayer
],
view: new ol.View({
center: [108.4250, 34.0890],
projection: 'EPSG:4326',
zoom: 4
}),
target: 'googleMap'
});
</script>
</body>
</html>
最主要的一项内容
就是研究Openlayers4 如何做业务了。
给个链接：这是一个各种个地图的加载说明，这个地址里边的其他文章也可以看看。
