OpenLayer仿天地图多时相

今天在仿写天地图的工具的时候的看见多时时相工具，说白了也就是两个地图设置相同的View这在Openlayer中很好的实现，只要声明两个map的容器，使用相同的视图即可先看看，天地图的效果：

一、全部源码

由于太简单了就不分析了就是加载个地图和卫星图，使用相同的视图即可

<!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 href="Script/ol.css" rel="stylesheet" /><script src="Script/ol.js"></script><style>#map1{height: 100%;width: 965px;position:absolute;display:inline;}#map2{height: 100%;width: 965px;position:absolute;right:0px;display:inline;}</style>
</head>
<body><div id="map1"></div><div id="map2"></div><script>var view=new ol.View({center: ol.proj.transform([113.42, 34.44], 'EPSG:4326', 'EPSG:3857'),zoom: 10});var tileLayer = 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'})});var satelliteLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'})});var map = new ol.Map({layers: [tileLayer],view:view, target: 'map1'});var map = new ol.Map({layers: [satelliteLayer],view: view,target: 'map2'});</script>
</body>
</html>

二、仿的图

三、总结

缺点就是没有同步鼠标的移动，arcgis api 3.x做多时相比较麻烦，在4.x版本开始视图和map分离，做法和Openlayer3相同，在这里提一下，在ol2有专门加载谷歌地图的类，在ol3中同归于xyz下，不搞特殊，xyz这个类可以加载很多在线的瓦片地图。

OpenLayer仿天地图多时相相关推荐

openlayer 获取天地图
参考资料: openlayers官网:https://openlayers.org/ geojson下载网站:https://datav.aliyun.com/portal/school/atlas/ ...
OpenLayer学习之加载天地图在线地图
1.天地图官网 http://www.tianditu.gov.cn/ 2.申请key 注意: 天地图自2019年1月 1日起需获得开发授权,然后在引用的API 地址后增加授权信息即可(&tk ...
天地图web叠加WMS服务
昨晚加到晚上八点就是为了搞天地图叠加一个WMS服务,之前实际上做过类似的,但是用的是openlayer,山东天地图的服务,很快就出来了,换成天地图自带的API,对照WMS的能力文档,就是叠加不了,地图 ...
openlayer3 系列 4 - 加载天地图
1.天地图官网 http://www.tianditu.gov.cn/ 2.申请key http://lbs.tianditu.gov.cn/authorization/authorization.h ...
Arcgis for Javascript实现两个地图的联动
今天在看天地图的时候,有一个多时相的地图显示功能,感觉很好玩,作为技术控的我晚上十点下班到家便是快十一点了,本来应该是睡觉了,但是,激动地心情不能平静,哎,算了,本着不熬夜的程序员不是好程序员的原则, ...
（转） Arcgis for Javascript实现两个地图的联动
http://blog.csdn.net/gisshixisheng/article/details/40127895 今天在看天地图的时候,有一个多时相的地图显示功能,感觉很好玩,作为技术控的我晚上 ...
openlayer4入门系列一(地图描绘经纬度点)
openlayer结合天地图描绘点其他地图描点也是一样的.请去参考官网. 下面是四川天地图的结合openlayer 开发的API ,里面有案例: http://www.scgis.net/scgcm ...
echarts symbol 回调函数_【OpenLayer 实战】实现仿Echarts风格的动态迁徙图/航班图
使用的数据还是来自echarts,模拟了全国各地到湖南重点景区的客流情况. 分析要实现动态迁徙图的效果,主要需解决两个问题曲线的绘制.因为给出的数据只有起点和终点两个点位,所以想要绘制曲线 ...
openlayer加载天地图并设置地图颜色为科技蓝
1.天地图是很多地图项目考虑的地图,但是由于天地图的配色与很多ui设计不符合,这里我是通过添加地图时候的className,添加css滤镜进行更改,效果良好,如下图所示: 核心代码:className ...

OpenLayer仿天地图多时相

OpenLayer仿天地图多时相相关推荐

最新文章

热门文章