admin管理员组文章数量:1650764
使用openlayers创建地图使用new ol.Map({...});
其中有参数layers:地图图层,openlayers允许有多个图层,且可重叠在一起,上面的图层覆盖下面的图层,具体的layer的分类和参数请自行查阅api
创建layer的方式:
(1)创建layer后,将layer放在map的layers[]中
var myLayer = new ol.layer.Vector({
source: new ol.source.Vector()
})
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
myLayer
],
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [104, 30],
zoom: 10
})
});
(2)便于后端人员理解的写法
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [104, 30],
zoom: 10
})
});
var myLayer = new ol.layer.Vector({
source: new ol.source.Vector()
})
// 等同于
//var myLayer=new ol.layer.Vector();
//var myVector=new ol.source.Vector();
//myLayer.setSource(myVector);
map.addLayer(myLayer);
实现一个简单的例子:使用一个图标标记出地图中心点的位置。
这时候我们需要了解另一个概念:feature(要素)
feature:具有几何形状和其他属性的地理要素的矢量对象,即地图上的几何对象,包括点(Point),线(LineString),多边形(Polygon),圆(Circle)等。
根据注释看如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>openlayers学习-3.标记中心点示例</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://wwwblogs/E7868A/p/11460865.html)
var center_point = ol.proj.transform([121.487899486, 31.24916171], 'EPSG:4326', 'EPSG:3857');
// 创建地图
var map = 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
})
});
// 新建图层,用于标记中心点
var locationLayer = new ol.layer.Vector();
var locationVector = new ol.source.Vector();
locationLayer.setSource(locationVector);
// openlayers点对象
var locationPoint = new ol.geom.Point(center_point);
var locationFeature = new ol.Feature();
// 设置几何图形
locationFeature.setGeometry(locationPoint);
// 设置图层属性
locationVector.addFeature(locationFeature);
// style样式的使用,icon图标
var centerPointStyle = new ol.style.Style({
image: new ol.style.Icon({
src: './images/location.png',
scale: 0.3,
anchor: [0.5, 1]
})
});
locationLayer.setStyle(centerPointStyle);
map.addLayer(locationLayer);
</script>
</html>
本文标签: 摸爬滚打图层例子简单OpenLayers
版权声明:本文标题:openlayers摸爬滚打 3.图层layer和feature的学习和简单例子 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729533873a1205161.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论