openlayer 地图实例_综合

文章目录

- 蓝奏云：css，js
- 一个简单的地图
- 地图导航：成都定位
- 限制地图缩放级别
- 矢量地图

蓝奏云：css，js

https://rod.lanzous.com/b0dkhjbfg

一个简单的地图

这个div一定要加width，height，不然显示不出来

<div id="map" style="width: 100%;height: 400px"></div>

<!Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>OpenLayers 3地图示例</title><link href="./css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="./js/ol.js" charset="utf-8"></script>
</head><body>
<div id="map" style="width: 100%;height: 400px"></div>
<script>// 创建地图new ol.Map({
     // 设置地图图层layers: [// 创建一个使用Open Street Map地图源的瓦片图层new ol.layer.Tile({
     source: new ol.source.OSM()})],// 设置显示地图的视图view: new ol.View({
     center: [0, 0], // 定义地图显示中心于经度0度，纬度0度处zoom: 2 // 并且定义地图显示层级为2}),// 让id为map的div作为地图的容器target: 'map'}); </script>
</body></html>

在这里插入图片描述

地图导航：成都定位

<!Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>OpenLayers 3地图示例</title><link href="./css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="./js/ol.js" charset="utf-8"></script>
</head><body>
<div id="map" style="width: 100%; height: 400px"></div>
<div id="navigate-container"><input type="button" onClick="moveToLeft();" value="左移" /><input type="button" onClick="moveToRight();" value="右移" /><input type="button" onClick="moveToUp();" value="上移" /><input type="button" onClick="moveToDown();" value="下移" /><input type="button" onClick="moveToChengDu();" value="移到成都" /><input type="button" onClick="zoomIn();" value="放大" /><input type="button" onClick="zoomOut();" value="缩小" />
</div>
<script>var map = new ol.Map({
     layers: [new ol.layer.Tile({
     source: new ol.source.OSM()})],view: new ol.View({
     // 设置成都为地图中心，此处进行坐标转换， 把EPSG:4326的坐标，转换为EPSG:3857坐标，因为ol默认使用的是EPSG:3857坐标center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),zoom: 10}),target: 'map'});// 向左移动地图function moveToLeft() {
     var view = map.getView();var mapCenter = view.getCenter();// 让地图中心的x值增加，即可使得地图向左移动，增加的值根据效果可自由设定mapCenter[0] += 50000;view.setCenter(mapCenter);map.render();}// 向右移动地图function moveToRight() {
     var view = map.getView();var mapCenter = view.getCenter();// 让地图中心的x值减少，即可使得地图向右移动，减少的值根据效果可自由设定mapCenter[0] -= 50000;view.setCenter(mapCenter);map.render();}// 向上移动地图function moveToUp() {
     var view = map.getView();var mapCenter = view.getCenter();// 让地图中心的y值减少，即可使得地图向上移动，减少的值根据效果可自由设定mapCenter[1] -= 50000;view.setCenter(mapCenter);map.render();}// 向下移动地图function moveToDown() {
     var view = map.getView();var mapCenter = view.getCenter();// 让地图中心的y值增加，即可使得地图向下移动，增加的值根据效果可自由设定mapCenter[1] += 50000;view.setCenter(mapCenter);map.render();}// 移动到成都function moveToChengDu() {
     var view = map.getView();// 设置地图中心为成都的坐标，即可让地图移动到成都view.setCenter(ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'));map.render();}// 放大地图function zoomIn() {
     var view = map.getView();// 让地图的zoom增加1，从而实现地图放大view.setZoom(view.getZoom() + 1);}// 缩小地图function zoomOut() {
     var view = map.getView();// 让地图的zoom减小1，从而实现地图缩小view.setZoom(view.getZoom() - 1);}</script>
</body></html>

在这里插入图片描述

限制地图缩放级别

<!Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>OpenLayers 3地图示例</title><link href="./css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="./js/ol.js" charset="utf-8"></script>
</head><body>
<div id="map" style="width: 100%;height: 400px"></div>
<script>new ol.Map({
     layers: [new ol.layer.Tile({
     source: new ol.source.OSM()})],view: new ol.View({
     // 设置成都为地图中心center: [104.06, 30.67],projection: 'EPSG:4326',zoom: 10,// 限制地图缩放最大级别为14，最小级别为10minZoom: 10,maxZoom: 14}),target: 'map'}); </script>
</body></html>

在这里插入图片描述

矢量地图

矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等
它们都是通过数学公式计算获得的。

在这里插入图片描述

<!Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>OpenLayers 3地图示例</title><link href="./css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="./js/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">//创建地图var map = new ol.Map({
     layers: [// 底图用Open Street Map 地图new ol.layer.Tile({
     source: new ol.source.OSM()}),// 再加载一个geojson的矢量地图new ol.layer.Vector({
     source: new ol.source.Vector({
     url: '../data/geojson/line-samples.geojson', // 地图来源format: new ol.format.GeoJSON() // 解析矢量地图的格式化类})})],view: new ol.View({
     center: [-72.980624870461128, 48.161307640513321],zoom: 8,projection: 'EPSG:4326'}),target: 'map'}); </script></body></html>

注释对代码进行了很好的说明，但有两点需要进一步说明：加载矢量图使用的source是ol.source.Vector, layer是ol.layer.Vector，不要错误的使用。加载代码之所以这么简单，是因为OpenLayers 3内置了对应矢量地图格式的解析类，比如ol.format.GeoJSON。 
它们都位于包ol.format下面，可以在API官方文档中查询得到。 
如果是shapefile这种不支持的，则需要自己解析。 
解析后，矢量地图都会转换为对应于OpenLayer s 3中的feature。
所以，当加载完成后，可以通过source的getFeatures方法来获取所有的矢量图形。需要注意坐标系，因为.geojson文档里用的是和当前地图用的不一样的坐标系。