项目中使用到openlayers3，现将两天摸爬滚打学到的总结一下，以方便以后2档起步，更快的滚。
1.资料收集
openlayers官网：https://openlayers.org/
openlayers3中文学习网站：http://anzhihun.coding.me/ol3-primer/
openlayers3 github地址：https://github.com/openlayers/openlayers
openlayers3中文版API：链接: https://pan.baidu.com/s/13gw3Sl8ACDqa_I_edwaaWA 提取码: ****
2.入门案例：绘制一个简单的地图
可参照中文学习网站，本文在其基础上有所补充
(1)GitHub下载使用openlayers所需的js和css文件（请参照中文学习网站）
(2)新建html文件，添加要生成地图的容器div，使用openlayers新建地图，参考如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>openlayers学习-1.入门</title>
<link href="./css/ol.css" rel="stylesheet" type="text/css" />
<script src="./js/ol.js" type="text/javascript"></script>
<style>
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map" style="height: 100%; width: 100%; overflow: hidden"></div>
</body>
<script>
// 中心点坐标 ('EPSG:4326', 'EPSG:3857' 坐标系知识参考博客https://www.cnblogs.com/E7868A/p/11460865.html)
var center_point = ol.proj.transform([121.487899486,31.24916171],'EPSG:4326', 'EPSG:3857' );
// 创建地图
new ol.Map({
// 让id为map的div作为地图的容器
target: 'map',
// 设置地图图层
layers: [
// 创建一个使用Open Street Map地图源的瓦片图层
new ol.layer.Tile({source: new ol.source.OSM()})
],
// 设置显示地图的视图
view: new ol.View({
center: center_point, // 定义地图显示中心
zoom: 14 // 定义地图显示层级
}),
// 设置地图控件，默认的三个控件都不显示
controls: ol.control.defaults({
attribution: false,
rotate: false,
zoom: false
})
});
</script>
</html>
(2)更改地图源（以高德为例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>openlayers学习-1.入门</title>
<link href="./css/ol.css" rel="stylesheet" type="text/css" />
<script src="./js/ol.js" type="text/javascript"></script>
<style>
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map" style="height: 100%; width: 100%; overflow: hidden"></div>
</body>
<script>
// 中心点坐标 ('EPSG:4326', 'EPSG:3857' 坐标系知识参考博客https://www.cnblogs.com/E7868A/p/11460865.html)
var center_point = ol.proj.transform([121.487899486,31.24916171],'EPSG:4326', 'EPSG:3857' );
// 高德地图源
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}'
})
});
// 创建地图
new ol.Map({
// 让id为map的div作为地图的容器
target: 'map',
// 设置地图图层
layers: [
// 创建一个使用Open Street Map地图源的瓦片图层
//new ol.layer.Tile({source: new ol.source.OSM()})
gaodeMapLayer
],
// 设置显示地图的视图
view: new ol.View({
center: center_point, // 定义地图显示中心
zoom: 14 // 定义地图显示层级
}),
// 设置地图控件，默认的三个控件都不显示
controls: ol.control.defaults({
attribution: false,
rotate: false,
zoom: false
})
});
</script>
</html>
需要注意的是，高德地图使用的坐标系是火星坐标系，而上面代码的中心点使用的是84坐标系（地球坐标系），所以如果要使上面两个例子的中心点是同一个位置，要进行坐标系转换
- 地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
- 火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。
- 百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。
坐标系转换方法下篇给出
原创文章 81
获赞 49
访问量 5万+