OpenLayers学习笔记—-一.加载地图
OpenLayers是什么?
是一个JavaScript的类库包
干什么用的?
供开发者用来搭建WebGIS客户端的
WebGis是什么?
网络地理信息系统,说白了就是搞地图服务的. GIS:地理信息系统
怎么用?(重点—重点是我也不会!)
OpenLayers现在已经是4.6的版本了,而在网上能找到的资料几乎全是3.0以下的,2.x和3.x版本跟4.x版本差别很大,所以很多
能查到的资料无法直接参考.当然3.x版本的资料要与4.x版本的内容更接近,而2.x,趁早不要套用在4.x上,完全不一样!!!
还要的是OpenLayers还有自己的API文档,尽管是英文的.这里吐槽下这个API文档,简直能让你看到吐血,也看不出所以然来,然后是官方的demo,读起来简直像是吃了shi一样难以阅读.注释简直惨不忍睹!不知道老外是不是跟国人的脑袋回路不一样!
言归正传,在这里记录下我的学习经历!好记性不如烂笔头,而且把自己所学的知识在敲打一遍,就像打铁一样,越来越精致,越来越精简,纯粹!
先来整理下最简单的,加载一个地图到web页面.后期会更新获取经纬度,计算鼠标所在位置到某点距离,沿路画线,画区域,区域边界问题,如何判断某点是否在区域内,根据gps数据画路径,路径回放,地图叠加遮盖,地图旋转…
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/ol/ol.css" rel="stylesheet" />
<script src="scripts/ol/ol.js"></script>
<script src="scripts/jquery1.9.1.min.js"></script>
<title></title>
<style>
#map {
width: 100%;
height: 700px;
}
</style>
<script>
$(function () {
//设置地图图层(源)
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
//设置视图样式
var view = new ol.View({
center: new ol.proj.fromLonLat([116.39053344726561, 39.91710957679777]), //地图中心点(此处为北京)
zoom: 11 //默认缩放级别数值越大放大倍数越大
});
//设置map,将map对象加载到div上显示.
var map = new ol.Map({
view: view, //视图
layers: [raster], //设置图层,可以有多个图层,此时layers的参数是Array[]
target: 'map' //目标
});
})
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>未完,,,,
转载自：https://blog.csdn.net/chuanren1991/article/details/80485000
