OperLayers开发经历①---更换瓦片

网上有很多例子，可是版本过低，由于我又是个半吊子弄不清楚，所以花费了大部分的时间在找资料和验证方法的过程中，功夫不负有心人，终于找到一个很不错的例子，其中博主还提供了腾讯地图，天地图等地图的加载实例。

由于我偏向高德地图，所以就仅仅验证了高德地图的加载，其余的实例需要各位自行验证。在博主的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()
			]),

这里附一个网站方便大家设置坐标在线查询经纬度

小弟才疏学浅有什么专业名称和写的不对的地方欢迎各位指点，批评！

OperLayers开发经历①---更换瓦片

猜你喜欢