网上有很多例子,可是版本过低,由于我又是个半吊子弄不清楚,所以花费了大部分的时间在找资料和验证方法的过程中,功夫不负有心人,终于找到一个很不错的例子,其中博主还提供了腾讯地图,天地图等地图的加载实例。
由于我偏向高德地图,所以就仅仅验证了高德地图的加载,其余的实例需要各位自行验证。在博主的OpenLayers还有官方的Example,不过版本有点过低,但是有中文注释,对于像我们这些基础差和英语不太好的可以参考下。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../lib/ol/ol.js"></script> <link href="../css/ol.css" rel="stylesheet" /> <script type="text/javascript"> window.onload = function () { var gaodeMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}' }) }); var map = new ol.Map({ layers: [gaodeMapLayer], view: new ol.View({ center: [106.51, 29.55], projection: 'EPSG:4326', zoom: 10 }), target: 'map' }); }; </script> </head> <body> <div id="map"></div> </body> </html>
这里博主使用的在head标签中初始化地图,由于我又不是很懂JavaScript,但是由于还参考了官方的Example添加标记和Popover,所以我没有像博主一样在head标签中加载Map 而是选择和官方一样在body标签中加载。
如果你像我一样只想更改的地图,还是需要官方Example的控件,只需拷贝gaodeMapLayer函数,并在CreateMap时
- var map = new ol.Map({
- layers: [gaodeMapLayer], //此处加载瓦片
- view: new ol.View({ //设置视图
- center: [106.51, 29.55], //初始中心点坐标
- projection: 'EPSG:4326', //更改默认投影方式 默认为“3857”
- zoom: 10 //缩放级别
- }),
- target: 'map' //目标
- });
其中投影方式这个东西比较奇怪,我没弄明白,你使用上面的方式初始化,你使用OpenLayer的其他功能不起作用,没有效果,可能投影方式不同导致,控件不可用。所以我一般还是用默认的投影方式,你会发现你使用我们平常使用经纬度坐标无法准确到相同的位置。因为投影方式不同,参数的也变了。 比如上面 EPSG:4326 模式center: [106.51, 29.55]
默认EPSG:3857 模式 center: [10651000, 2955000] 这种,而且还不精准,这时使用Example看到的一个函数就可以解决这个问题了。
center: ol.proj.fromLonLat([104.06, 30.65]), //这时就可以放心大胆用经纬度 设置坐标了。
还有小地图的添加直接在map初始化中添加这句就可以食用了。
ontrols: ol.control.defaults().extend([ //添加小地图 new ol.control.OverviewMap() ]),
这里附一个网站方便大家设置坐标在线查询经纬度
小弟才疏学浅有什么专业名称和写的不对的地方欢迎各位指点,批评!