1.构建一个地图容器
<div id="map" class="map"></div>
2.创建一个地图
2.1初始化一个openlayersmap对象
var map=new Map({})
2.2将这个对象添加到div中
var map=new Map({
target:'map'
})
2.3在layers中定义数组中可用的图层
tile是瓦片
layers:[]
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
2.4view用于指定中心点和缩放级别
view:new ol.View({
center:ol.proj.fromLonLat(x,y)(或者[x,y],
zoom:12
})
使用百度地图
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
<title>百度地图</title>
<style>
html,
body,
#map {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<div id="map" class="map"></div>
</body>
<script>
var projection = ol.proj.get("EPSG:3857");
var resolutions = [];
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var tilegrid = new ol.tilegrid.TileGrid({
origin: [0, 0],
resolutions: resolutions
});
var baidu_source = new ol.source.TileImage({
projection: projection,
tileGrid: tilegrid,
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
if (!tileCoord) {
return "";
}
let z = tileCoord[0];
let x = tileCoord[1];
let y = -tileCoord[2] - 1;
if (x < 0) {
x = "M" + (-x);
}
if (y < 0) {
y = "M" + (-y);
}
return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z +
"&styles=pl&udt=20151021&scaler=1&p=1";
}
});
var baidu_layer = new ol.layer.Tile({
source: baidu_source
});
var map = new ol.Map({
target: 'map',
layers: [baidu_layer],
view: new ol.View({
center: [12959773,4853101],
zoom: 12
})
});
</script>
绘制点线面
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
<title>Document</title>
</head>
<body>
<div id="menu">
<label>几何图形类型: </label>
<select id="type">
<option value="None">无</option>
<option value="Point">点</option>
<option value="LineString">线</option>
<option value="Polygon">多边形</option>
<option value="Circle">圆</option>
<option value="Square">正方形</option>
</select>
</div>
<div id="map" class="map"></div>
<script>
var projection = ol.proj.get("EPSG:3857");
var resolutions = [];
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var tilegrid = new ol.tilegrid.TileGrid({
origin: [0, 0],
resolutions: resolutions
});
var baidu_source = new ol.source.TileImage({
projection: projection,
tileGrid: tilegrid,
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
if (!tileCoord) {
return "";
}
let z = tileCoord[0];
let x = tileCoord[1];
let y = -tileCoord[2] - 1;
if (x < 0) {
x = "M" + (-x);
}
if (y < 0) {
y = "M" + (-y);
}
return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z +
"&styles=pl&udt=20151021&scaler=1&p=1";
}
});
var baidu_layer = new ol.layer.Tile({
source: baidu_source
});
var map = new ol.Map({
target: 'map',
layers: [baidu_layer],
view: new ol.View({
center: [12959773,4853101],
zoom: 12
})
});
var typeSelect = document.getElementById('type'); //绘制类型选择对象
var draw; //ol.Interaction.Draw类的对象
//首先需要明白的一点是,Source和Layer是一对一的关系,有一个Source,必然需要一个Layer,然后把这个Layer添加到Map上,就可以显示出来了。通过官网的API搜索ol.source可以发现有很多不同的Source,但归纳起来共三种:ol.source.Tile,ol.source.Image和ol.source.Vector。
//ol.source.Tile对应的是瓦片数据源,现在网页地图服务中,绝大多数都是使用的瓦片地图,而OpenLayers 3作为一个WebGIS引擎,理所当然应该支持瓦片。
//ol.source.Image对应的是一整张图,而不像瓦片那样很多张图,从而无需切片,也可以加载一些地图,适用于一些小场景地图。
//ol.source.Vector对应的是矢量地图源,点,线,面等等常用的地图元素(Feature),就囊括到这里面了。这样看来,只要这两种Source就可以搞定80%的需求了。
//实例化一个矢量图层Vector作为绘制层
var source = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({ //填充样式
color: 'rgba(255, 255, 255, 0.2'
}),
stroke: new ol.style.Stroke({ //线样式
color: '#00c033',
width: 2
}),
image: new ol.style.Circle({ //点样式
radius: 7,
fill: new ol.style.Fill({
color: '#00c033'
})
})
})
});
//将绘制层添加到地图容器中
map.addLayer(vectorLayer);
//用户更改绘制类型触发的事件
typeSelect.onchange = function (e) {
map.removeInteraction(draw); //移除绘制图形控件
addInteraction(); //添加绘制图形控件
};
//ol.interaction.Draw的可选参数
//features,绘制的要素的目标集合;
// source,绘制的要素的目标图层来源,即目标图层的 source属性 ;
// snapTolerance,自动吸附完成点的像素距离,也就是说当鼠标位置距离闭合点小于该值设置的时候,会自动吸附到闭合点,默认值是 12;
// type,绘制的地理要素类型,ol.geom.GeometryType类型,包含 Point、 LineString、 Polygon、MultiPoint、MultiLineString 或者 MultiPolygon;
// minPointsPerRing,绘制一个多边形需要的点数最小值,数值类型,默认是 3;
// style,要素素描的样式,是 ol.style.Style对象之一;
// geometryName,绘制的地理要素的名称,string类型;
// condition,一个函数,接受一个ol.MapBrowserEvent类型的参数,返回一个布尔值表示是否应该调用事件处理函数。默认情况下,增加一个顶点,类型为 ol.events.ConditionType。
绘制完成之后将其添加到
// 添加事件
function addInteraction() {
var typeValue = typeSelect.value; //绘制类型
if (typeValue !== 'None') {
var geometryFunction, maxPoints;
if (typeValue === 'Square') { //正方形
typeValue = 'Circle'; //设置绘制类型为Circle
//设置几何信息变更函数,即创建正方形
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
console.log(typeValue);
//实例化图形绘制控件对象并添加到地图容器中
// 给地图添加该交互功能,首先需要实例化一个ol.interaction.Draw,必须指定 source和type属性:
draw = new ol.interaction.Draw({
source: source,
type: typeValue, //几何图形类型
geometryFunction: geometryFunction, //几何信息变更时的回调函数
maxPoints: maxPoints //最大点数
});
// 最后首先执行绑定函数addInteraction();,然后点击鼠标进行绘制:
map.addInteraction(draw);
} else {
//清空绘制的图形
source.clear();
}
}
</script>
</body>