目录
2.openlayers中使用点feature:ol.geom.Point({})以及设置点样式
openlayers中的线ol.geom.lineString({})
openlayers中使用ol.interaction.Draw();画圆
openlayers中的坐标：'EPSG:4326'和'EPSG:3857'
但是我们在openlayers中用来计算的，比如计算两点之间长度时候，使用3857下的坐标数据来算。
openlayers3使用了feature+style方式来对比overlay方式
openlayers3中读取json中的polygon信息：同时设置style.Circle
使用Feature---style---image---icon：利用单击事件来是的图标大小变化
在所有的feature上添加一个overlay.也就是使用overlay来覆盖feature
openlayers中单击获取要素转载：https://blog.csdn.net/xcymorningsun/article/details/82492384
分别在在openlayers中和cesium中加载wms服务地图
ol中如果代码逻辑没有问题的时候，地图上的元素显示不出来，甚至地图显示不出来，有可能有以下两个特殊情况。
利用openlayer6中实现：图层级别1-4使用热力图，图层5-7使用点图层表示，高于7使用图标图层表示
使用overlay
<!DOCTYPE html>
<html>
<head>
<title>学习overlay</title>
<script src="..\bin\ol.js"></script>
<link href="..\bin\ol.css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<label class="checkbox">
<input type="radio" name="label" value="vector" checked="checked" />
Vector Labels
</label>
<label class="checkbox">
<input type="radio" name="label" value="overlay" />
Overlay Labels
</label>
</div>
<div id="map"></div>
<div id="label">
<div id="marker" class="marker" title="Marker">
<a class="address" id="address" target="_blank" href="http://www.openlayers.org/">标注点</a>
</div>
</div>
<style type="text/css">
body,
html,
div,
ul,
li,
iframe,
p,
img {
border: none;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 570px;
}
#menu {
width: 100%;
height: 20px;
padding: 5px 10px;
left: 10px;
font-size: 14px;
font-family: "微软雅黑";
}
.checkbox {
margin: 5px 15px;
}
.marker {
width: 20px;
height: 20px;
border: 1px solid #088;
border-radius: 10px;
background-color: #0FF;
opacity: 0.5;
}
.address {
text-decoration: none;
color: #aa3300;
font-size: 14px;
font-weight: bold;
text-shadow: black 0.1em 0.1em 0.2em;
}
</style>
<script>
//首先来新建一个map
var map = new ol.Map({
layers:[new ol.layer.Tile({
source:new ol.source.OSM()
})],
view: new ol.View({
projection:'EPSG:4326',
center: [116,35 ],
zoom: 6
}),
target: 'map'
})
var beijing = ol.proj.fromLonLat([116.28, 39.54],'EPSG:4326');
var wuhan = ol.proj.fromLonLat([114.21, 30.37],'EPSG:4326');
console.log("这里是北京的坐标："+beijing);
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(beijing),
name: '北京市',
population: 2015
});
//矢量标注样式设置函数，设置image为图标ol.style.Icom
var createLabelStyle = function (feature) {
return new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 60],
anchorOrigin: 'top-right',
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
offsetOrigin: 'top-right',
opacity: 0.75,
src: 'C:\\Users\\zwx776766\\Desktop\\小图标.jpg',
})),
text: new ol.style.Text({
textAlign: 'center',
textBaseline: 'middle',
font: 'norml 14px 微软雅黑',
text: feature.get('name'),
fill: new ol.style.Fill({ color: '#aa3300' }),
stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })
})
});
}
iconFeature.setStyle(createLabelStyle(iconFeature));
//矢量标注的数据源
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
//矢量标注图层
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
//实例化的overlay标注，添加到地图的容器中
var marker = new ol.Overlay({
position: wuhan,
positioning: 'center-center',
element: document.getElementById('marker'),
stopEvent: false
});
map.addOverlay(marker);
marker.getElement().title = "武汉市";
var text = new ol.Overlay({
position: wuhan,
element: document.getElementById('address')
});
map.addOverlay(text);
text.getElement().innerText = marker.getElement().title;
map.on('click', function (evt) {
var type = $("input[name='label']:checked").val();
var point = evt.coordinate;
if (type == 'vector') {
addVectorLabel(point);
}
else if (type == 'overlay') {
addOverlayLabel(point);
}
});
//添加一个新的标注
function addVectorLabel(coordinate) {
//新建一个要素ol.Feature
var Feature = new ol.Feature({
geometry: new ol.geom.Point(coordinate),
name: '标注点'
});
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate),
name: '标注点'
});
newFeature.setStyle(createLabelStyle(newFeature));
vectorSource.addFeature(newFeature);
}
//添加一个新的图文标注（overlay标注）
function addOverlayLabel(coordinate) {
var elmentDiv = document.createElement('div');
elmentDiv.title = '标注点';
var overlay = document.getElmentById('label');
overlay.appendChild(elementDiv);
//新增a元素
var elementA = document.createElement('a');
elementA.className = "marker";
elementA.href = "#";
setInnerText(elementA, elementDiv.title);//设置文本
elementDiv.appendChild(elementA);//新建的div元素添加a子节点
var newMarker = new ol.Overlay({
position: coordinate,
posioning: 'center-center',
element: elementDiv,
stopEvent: false
});
map.addOverlay(newMarker);
var newText = new ol.Overlay({
position: coordinate,
element: elementA
});
map.addOverlay(newText);
}
//动态设置元素文本内容
function setInnerText(element, text) {
if (typeof element.textContent == "string") {
element.textContent = text;
} else {
element.innerText = text;
}
}
</script>
</body>
</html>2.openlayers中使用点feature:ol.geom.Point({})以及设置点样式
<!DOCTYPE html>
<html>
<head>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
</head>
<body>
<div id="map"></div>
<script>
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([130, 30], 'EPSG:4326'))
})
//设置这个点的样式
feature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
color: '#44ccff',
radius: 5,
fill: new ol.style.Fill({
color: 'orange'
}),
stroke:new ol.style.Stroke({color:'red',width:1})
})
}))
var pointLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
})
})
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
pointLayer
],
view: new ol.View({
center: [130, 30],
projection: 'EPSG:4326',
zoom: 5
}),
target: 'map'
})
</script>
</body>
</html>openlayers中的线ol.geom.lineString({})
<!DOCTYPE html>
<html>
<head>
<title>学习线</title>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
</head>
<body>
<div id="map"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([104.06, 30.67]),
zoom: 8
}),
target: 'map'
})
//下边来添加一线feature
var feature =
new ol.Feature({
geometry: new ol.geom.LineString(
[ol.proj.fromLonLat([104.06, 30.67]), ol.proj.fromLonLat([104.56, 31])]
)
})
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 7
})
})
feature.setStyle(lineStyle);
var lineLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [feature]
})
});
map.addLayer(lineLayer);
</script>
</body>
</html>openlayers中使用ol.interaction.Draw();画圆
<!DOCTYPE html>
<html>
<head>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
</head>
<body>
<div id="map"></div>
<script>
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source
})
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
view: new ol.View({
center: ol.proj.fromLonLat([103.04, 30.67]),
zoom: 7
}),
target: 'map'
})
//来一个draw对象
var draw = new ol.interaction.Draw({
source: source,
type: 'Circle'//将Circle修改为LineString就变为画直线了，
})
map.addInteraction(draw);
</script>
</body>
</html>openlayers画正方形
<!DOCTYPE html>
<html>
<head>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
</head>
<body>
<div id="map"></div>
<script>
var source = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: source
})
var map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
view: new ol.View({
center: ol.proj.fromLonLat([103.04, 30.67]),
zoom: 7
}),
target: 'map'
})
var geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
//来一个draw对象
var draw = new ol.interaction.Draw({
source: source,
type: 'LineString',
geometryFunction: geometryFunction,
})
map.addInteraction(draw);
</script>
</body>
</html>openlayers中画长方形
<!DOCTYPE html>
<html>
<head>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
</head>
<body>
<div id="map"></div>
<script>
var source = new ol.source.Vector({wrapX:false})
var vector = new ol.layer.Vector({
source: source
})
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
view: new ol.View({
center: ol.proj.fromLonLat([103, 39]),
zoom: 7
}),
target: 'map'
});
var geometryFunction = function (coordinates, geometry) {
if(!geometry){
geometry = new ol.geom.Polygon(null);//多边形
console.log('xxx')
}
var start = coordinates[0];
var end = coordinates[1];
geometry.setCoordinates([[start, [start[0], end[1]], end, [end[0], start[1]], start]]);
return geometry;
}
// var geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
var draw = new ol.interaction.Draw({
source: source,
type: 'LineString',
geometryFunction: geometryFunction,
maxPoints:2
})
map.addInteraction(draw);
</script>
</body>
</html>openlayers中的坐标：'EPSG:4326'和'EPSG:3857'
openlayers中新建map的时候，有一个view属性，
该属性中会设置center，同时也会设置这个center是什么坐标系下的坐标，一个坐标离开坐标系，就没有任何意义。
openlayers中默认的坐标是google的魔卡托：‘EPSG:3857’,但是我们常常看到的是'EPSG:4326'坐标系下的坐标。所以我们常常手动输入的坐标一般是我们常见的4326，比如我们百度得到的经纬度就：
但是我们在openlayers中用来计算的，比如计算两点之间长度时候，使用3857下的坐标数据来算。
所以会存在两个坐标系下坐标的转化。
<!DOCTYPE html>
<html>
<head>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
</head>
<body>
<div id="map"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [130, 30],
projection:'EPSG:4326',
zoom: 7
}),
target: 'map'
});
</script>
</body>
</html>然后在浏览器控制台查看两种坐标系下的坐标：
map.getView().getCenter();//这里是在新建view时候指定坐标系下的中心点坐标
(2) [130, 30]
ol.proj.fromLonLat(map.getView().getCenter());//这个是转化为默认坐标系下的中心点坐标
(2) [14471533.803125564, 3503549.843504374]openlayers中的可以在veiw中指定坐标使用的坐标系：
1.在括号中我们填写了常用坐标系下的数据，但是使用ol.proj.fromLonLat来将4326坐标系下数据转化为
3857坐标系下的坐标:
ol.proj.fromLonLat([103, 39])
实际上这里也可以指定将当前数据转化为指定坐标系下的数据：
ol.proj.fromLonLat(coordinate坐标,opt_projection指定坐标系)
该方法默认坐标系是3857
2.也可以使用在创建center的时候u，指定坐标系:
center:[103,39],
projection:'EPSG:4326'
3.可以将数据从指定从一个坐标系转化到另一个坐标系
ol.proj.transform(coordinate,source,destination)openlayers中的select和modify
选中和修改要素feature
<!DOCTYPE html>
<html>
<head>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
</head>
<body>
<div id="map"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
center: [0, 0],
zoom: 2
}),
target: 'map'
})
//绘制集合要素
var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
var lineFeature = new ol.Feature(
new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
var polygonFeature = new ol.Feature(new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6], [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
//实例化一个矢量图层vector作为绘制层
var source = new ol.source.Vector({
features: [pointFeature, lineFeature, polygonFeature]
});
var vector = 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: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
})
map.addLayer(vector);
var select = new ol.interaction.Select();
var modify = new ol.interaction.Modify({
features: select.getFeatures()//选中的要素集
})
map.addInteraction(select);//将选择对象添加到地图中，地图就可以选中了
map.addInteraction(modify);//将修改对象放到地图，地图就可以对对象中的features进行修改。
</script>
</body>
</html>openlayers3中的overlay图标入门
<!DOCTYPE html>
<html>
<head>
<title>学习overlay</title>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
</head>
<body>
<div id="map"></div>
<div id="anchor"><img src="C:\\Users\\zwx776766\\Desktop\\xiuxianyule.png" alt="示例锚点"/></div>
<script>
var map=new ol.Map({
layers:[
new ol.layer.Tile({
source:new ol.source.OSM()
})
],
view:new ol.View({
center:ol.proj.fromLonLat([103,30]),
zoom:8,
}),
target:'map'
})
// 下边创建一个overlay
var mapElement=document.getElementById('anchor');
var myElement=document.createElement('div');
mapElement.appendChild(myElement);
var overlay=new ol.Overlay({
position:ol.proj.fromLonLat([103,30]),
element:mapElement
});
map.addOverlay(overlay);
</script>
</body>
</html>
openlayers3使用了feature+style方式来对比overlay方式
<!DOCTYPE html>
<html>
<head>
<title>使用了pointFeature也就是使用了feature+style方式来对比overlay方式</title>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
</head>
<body>
<div id="map"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([103, 30]),
zoom: 7
}),
target: 'map'
})
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector()
})
//新建feature
var pointFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([103, 30])),
// style:
})
pointFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
src: 'C:\\Users\\zwx776766\\Desktop\\xiuxianyule.png'
})
}));
vectorLayer.getSource().addFeature(pointFeature);
map.addLayer(vectorLayer);
</script>
</body>
</html>
styleFunction
参考1：https://blog.csdn.net/weixin_40184249/article/details/81220430
参考2：https://www.cnblogs.com/lishanyang/p/6071528.html(包括了style下的geometry)
feature要素用到的是ol.FeatureStyleFunction，函数仅带有一个参数resolution，而图层StyleFunction，含有两个参数，feature和resolution两者是不一样，关于返回值，ol3要求返回一个样式数组，但是返回一个单个样式，也不会报错，ol4可以返回数组，也可以返回单个样式。
注意：使用feature的style的时候，只能使用外部feature.setStyle()。比如：
一、Feature要素设置样式函数示例：
var anchor = new ol.Feature({
geometry: new ol.geom.Point([104, 30]),
});
anchor.setStyle(new ol.style.Style({
image: new ol.style.Icon({
src: '../img/anchor.png',
scale: map.getView().getZoom() / 10
})
}))
针对layer的时候，使用style:styleFunction,这里的styleFunction是外边写的一个函数（这个方法在feature不能使用）
下边几个都是针对layer的style.效果相同
1.
var styleFunction = function (resolution) {
console.log('xxx')
return [new ol.style.Style({
image: new ol.style.Icon({
color: '#8959A8',
crossOrigin: 'anonymous',
src: 'C:\\Users\\Desktop\\marker-icon.png'
})
})]
}
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
2. var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: function(){
return [new ol.style.Style({
image: new ol.style.Icon({
color: '#8959A8',
crossOrigin: 'anonymous',
src: 'C:\\Users\\Desktop\\marker-icon.png'
})
})]
}
});
3.
var style=[new ol.style.Style({
image: new ol.style.Icon({
color: '#8959A8',
crossOrigin: 'anonymous',
src: 'C:\\Users\\Desktop\\marker-icon.png'
})
})]
vectorLayer.setStyle(style)
4.
vectorLayer.setStyle([new ol.style.Style({
image: new ol.style.Icon({
color: '#8959A8',
crossOrigin: 'anonymous',
src: 'C:\\Users\\Desktop\\marker-icon.png'
})
})])
5.
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style:[new ol.style.Style({
image: new ol.style.Icon({
color: '#8959A8',
crossOrigin: 'anonymous',
src: 'C:\\Users\\Desktop\\marker-icon.png'
})
})]
}); //1.先来new一个style，这是添加style方式1
// style=[new ol.style.Style({
// //使用icon加图片形式
// image:new ol.style.Icon({
// src:'./Icar.png'
// })
// })]
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
//2.添加style方式2：
// style: [new ol.style.Style({
// //使用icon加图片形式
// image: new ol.style.Icon({
// src: './Icar.png'
// })
// })]
//3.添加style方式3
style: function (feature, resolution) {
return [new ol.style.Style({
//使用icon加图片形式
image: new ol.style.Icon({
src: './Icar.png'
})
})];
}
});
// vectorLayer.setStyle(style)再添加一个案例：就是点击是的图标样式变化，也就是变化一下circle的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<title>Moveend Event</title>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
//来一个layer和style
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.Point([0, 0]),
})
],
// style: styleFunction
}),
style: [new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({
color: 'orange'
})
})
})]
})
//layer添加样式1：上边的style:后边的数组就是添加了layer的样式。2.添加layer样式方式2：就是使用下边的使用函数来设置。函数名随意。
// var styleFunction = function () {
// console.log('进入了styleFunction')
// return [new ol.style.Style({
// image: new ol.style.Circle({
// radius: 15,
// fill: new ol.style.Fill({
// color: 'orange'
// })
// })
// })]
// }
// layer.setStyle(styleFunction);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
target: 'map',
view: new ol.View({
center: [0, 0],
projection: 'EPSG:4326',
zoom: 3
})
});
var styleFunctionLater = function () {
console.log('进入了later')
// console.log('进入了styleFunction')
return [new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({
color: 'black'
})
})
})]
}
function onMoveEnd(evt) {
var currCenter = map.getView().getCenter();
currCenter = ol.proj.fromLonLat(currCenter, 'EPSG:4326')
console.log(currCenter)
layer.setStyle(null);
layer.setStyle(styleFunctionLater);
}
map.on('click', onMoveEnd);
</script>
</body>
</html>开始效果如下：
点击图层:也就是地图上任意一点，都会出发点击事件，改变style,这里的style是layer的，不只是单个feature
二：在feature上设置style.
<!DOCTYPE html>
<html>
<head>
<script src="./ol/ol.js"></script>
<link href="./ol/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
//这里的style也可以是数组。
// var style = [new ol.style.Style({
// stroke: new ol.style.Stroke({
// color: 'red',
// width: 3
// }),
// fill: new ol.style.Fill({
// color: 'rgba(0, 0, 255, 0.1)'
// })
// })]
var feature = new ol.Feature({
geometry: new ol.geom.Polygon([[[0, 0], [10000000, 1000],[1000000,10000000]]])
})
feature.setStyle(style);
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
// url: './ol/countries.geojson',
// format: new ol.format.GeoJSON(),
// wrapX: false
features: [feature]
})
});
var select = new ol.interaction.Select({
wrapX: false
});
var modify = new ol.interaction.Modify({
features: select.getFeatures()
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]),
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
openlayers3中读取json中的polygon信息：同时设置style.Circle
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
<title>Custom Polygon Styles</title>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var styles = [
/* We are using two different styles for the polygons:
* - The first style is for the polygons themselves.
* - The second style is to draw the vertices of the polygons.
* In a custom `geometry` function the vertices of a polygon are
* returned as `MultiPoint` geometry, which will be used to render
* the style.
*/
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'orange'
})
}),
geometry: function (feature) {
// return the coordinates of the first ring of the polygon
var coordinates = feature.getGeometry().getCoordinates()[0];
return new ol.geom.MultiPoint(coordinates);
}
})
];
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
[-3e6, 6e6], [-5e6, 6e6]]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
[0, 6e6], [-2e6, 6e6]]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
[3e6, 6e6], [1e6, 6e6]]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
[0, -1e6], [-2e6, -1e6]]]
}
}]
};
var source = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var layer = new ol.layer.Vector({
source: source,
style: styles
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source:new ol.source.OSM()
})
,layer],
target: 'map',
view: new ol.View({
center: [0, 3000000],
zoom: 2
})
});
</script>
</body>
</html>
使用Feature---style---image---icon：利用单击事件来是的图标大小变化
<!DOCTYPE html>
<html lang="en">
<head>
<title>Icon Symbolizer</title>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map">
<div id="popup"></div>
</div>
<script>
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([0, 0]),
name: 'bigFace',
population: 4000,
rainfall: 500,
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'F:\\workspaces\\opelayers\\20191106\\icon.png'
})
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'top-left',
stopEvent: false,
offset: [0, 0]
});
map.addOverlay(popup);
// display popup on click
map.on('click', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature) {
console.log("myName is " + feature.get('name'))
var scale= iconStyle.getImage().getScale();
iconStyle.getImage().setScale(scale===1.5?1:1.5);//调整好style之后，要从新将style放入到feature中。
feature.setStyle(iconStyle)
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
}
});
// change mouse cursor when over marker
map.on('pointermove', function (e) {
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});
</script>
</body>
</html>
openlayers中自定义事件：包括事件分发和事件监听。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Moveend Event</title>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> -->
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<input id="input" type="button" value="按钮">
<script>
var feature = new ol.Feature({
geometry: new ol.geom.Point([0, 0]),
})
var features = [
feature
]
//来一个layer和style
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: features
// style: styleFunction
}),
style: [new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({
color: 'orange'
})
})
})]
})
//layer添加样式1：上边的style:后边的数组就是添加了layer的样式。2.添加layer样式方式2：就是使用下边的使用函数来设置。函数名随意。
// var styleFunction = function () {
// console.log('进入了styleFunction')
// return [new ol.style.Style({
// image: new ol.style.Circle({
// radius: 15,
// fill: new ol.style.Fill({
// color: 'orange'
// })
// })
// })]
// }
// layer.setStyle(styleFunction);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
target: 'map',
view: new ol.View({
center: [0, 0],
projection: 'EPSG:4326',
zoom: 3
})
});
var styleFunctionLater = function () {
console.log('进入了later')
// console.log('进入了styleFunction')
return [new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
fill: new ol.style.Fill({
color: 'black'
})
})
})]
}
function onMoveEnd(evt) {
var currCenter = map.getView().getCenter();
currCenter = ol.proj.fromLonLat(currCenter, 'EPSG:4326')
console.log(currCenter)
layer.setStyle(null);
layer.setStyle(styleFunctionLater);
}
var input = document.getElementById('input');
input.addEventListener('click', function (event) {
console.log('是html中的dom绑定事件，执行了绑定的按钮监听事件')
})
console.log("feature " + layer.getSource().getFeatures()[0])
// 为地图注册鼠标移动事件的监听
map.on('pointermove', function (event) {
map.forEachFeatureAtPixel(event.pixel, function (feature) {
// 为移动到的feature发送自定义的mousemove消息
feature.dispatchEvent({ type: 'mousemove', event: event });
});
});
feature.on('mousemove', function (event) {
onMoveEnd();
console.log('进入了feature的监听')
})
</script>
</body>
</html>
然后鼠标移动过去：
在所有的feature上添加一个overlay.也就是使用overlay来覆盖feature
<!DOCTYPE html>
<html>
<head>
<script src="../bin/ol.js"></script>
<link href="../bin/ol.css">
<title>学习draw，modify</title>
<style>
#map {
width: 100%
}
</style>
</head>
<body>
<div id="map"></div>
<div id='overlay'>
<img src="../20191106\ccc.png" />
</div>
<script>
var coordinates = [[137, 30], [140, 35], [135, 33], [125, 31]]
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
// geometry: new ol.geom.Point({
wrapX: false,
// })
features: [
new ol.Feature(new ol.geom.Point(coordinates[0])),
new ol.Feature(new ol.geom.Point(coordinates[1])),
new ol.Feature(new ol.geom.Point(coordinates[2])),
new ol.Feature(new ol.geom.Point(coordinates[3])),
// new ol.Feature(new ol.geom.Circle([150, 31]))
]
}),
})
var k = 0;
var array = [];
var position = [];
//这里只是用来获取坐标即可
var styleFunction = function (feature, resolution) {
console.log('进入了style')
if (position.indexOf(feature) == -1) {
position.push(feature)
k++;
console.log(position.length)
console.log(feature.getGeometry().getCoordinates())
var img = document.createElement('img');
img.id = 'img' + k;
img.src = 'F:\\workspaces\\opelayers\\20191106\\ccc.png'
var parent = document.getElementById('overlay');
parent.appendChild(img);
array[k] = new ol.Overlay({
element: document.getElementById('img' + k),
position: feature.getGeometry().getCoordinates()
})
map.addOverlay(array[k])
console.log(array[k])
}
//这里没有写参数也是可以的
//在styleFunction中
// console.log(feature.get('features').length)
return [new ol.style.Style({
fill: new ol.style.Fill({
color: 'blue',
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 9
}),
image: new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({
color: 'red'
})
})
})]
}
layer.setStyle(styleFunction)
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
target: 'map',
view: new ol.View({
center: [130, 30],
projection: 'EPSG:4326',
zoom: 3
}),
})
var select = new ol.interaction.Select();
map.addInteraction(select);
var modify = new ol.interaction.Modify({ features: select.getFeatures() });
map.addInteraction(modify);
var draw = new ol.interaction.Draw({
source: layer.getSource(),
type: 'Point'//可以使用Circle,Polygon,MultiPoint,Point,
})
map.addInteraction(draw)
// draw.setActive(true);
// draw.on("drawend", function (e) {
// draw.setActive(false);
// var feature = e.feature;
// var wktformat = new ol.format.WKT();
// // alert(wktformat.writeGeometry(feature.getGeometry()));
// });
</script>
</body>
</html>
上图是最开始的样子。（我网络差，地图没有加载出来）
接下来我点击几下，然后添加feature(也就是添加point)
openlayers中单击获取要素转载：https://blog.csdn.net/xcymorningsun/article/details/82492384
openlayers获取屏幕内要素feature
map.getLayers().getArray()[1].getSource().getFeaturesInExtent(map.getView().calculateExtent())
分别在在openlayers中和cesium中加载wms服务地图
注：（瓦片数据通过太乐地图下载器来获取）
一：安装geoserver，然后启动该服务。启动后到网页查看
进入layer perview中查看我们服务的效果，这里有些例子是可以直接使用的服务。（你也可以另外创建服务，将自己的数据拿进来使用）
出现结果如下：
准备使用geoserver发布的wms服务：
此处需要的两个东西就齐了
a.地址: http://localhost:8083/geoserver/wms
b.layers : tiger-ny
二：在openlayers中加载geoserver发布的wms服务：
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.MousePosition(),
]
),
// 设置地图图层
layers: [
// // 创建一个使用Open Street Map地图源的瓦片图层
// // new ol.layer.Tile({ source: new ol.source.OSM() }),
// layer
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8083/geoserver/wms',//自己的wms地址，可在geoserver中以openlayerView查看
params: {
'LAYERS': 'tiger-ny',
'TILED':true
},
serverType:'geoserver'
})
})
],
// 设置显示地图的视图
view: new ol.View({
center: [286.12836002221553, 40.777795483867436], // 定义地图显示中心于经度0度，纬度0度处
zoom: 12, // 并且定义地图显示层级为2
projection:'EPSG:4326'
}),
// 让id为map的div作为地图的容器
target: 'map'
});结果如图：
三：在cesium中加载geoserver发布的wms服务
首先需要注意，如果要使用cesium就不是想openlayers那样简单引入js和css文件。
需要对源码进行打包后拿出来使用，因为里面会涉及到页面上其他样式，所以还会包括其他资源。
打包可以参考：https://blog.csdn.net/u013594477/article/details/79578748和
https://www.jianshu.com/p/2d4bd6e30c1b
我要说明一点是打包有压缩包和非压缩形式，压缩的是可以使用，但是不方便调试，如果涉及到学习源码或者修改源码的，要使用非压缩方式。
引入后，使用cesium.js的主要代码如下：
var viewer = new Cesium.Viewer('cesiumContainer', {
scene3DOnly: true,
selectionIndicator: false,
baseLayerPicker: false
});
// 删除默认的影像图层
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
var provider = new Cesium.WebMapServiceImageryProvider({
url: 'http://localhost:8083/geoserver/wms',
layers: 'tiger-ny',
parameters: {
service : 'WMS',
format: 'image/png',
transparent: true,
}
});
viewer.imageryLayers.addImageryProvider(provider);启动项目后访问如下：
把中间红点放大就是我们放上去的图了
ol中如果代码逻辑没有问题的时候，地图上的元素显示不出来，甚至地图显示不出来，有可能有以下两个特殊情况。
1.加载地图的div中没有设置长宽。（部分版本要求设置）
2.要素可以查询出来，但是显示不出来，有可能是坐标系问题，可能需要转坐标，或者设置坐标系
利用openlayer6中实现：图层级别1-4使用热力图，图层5-7使用点图层表示，高于7使用图标图层表示
分三层：三个图层，实际上是利用同一组坐标数据，不同层级表现形式不同
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/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.3.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var layerMap = new Map();
var features = [];
var features2 = [];
var features3 = [];
let points = [];
for (let i = 0; i < 1100; i++) {
let point = [130 + 30 * Math.random() - 40 * Math.random(), 262 * Math.random() - 2 * Math.random()]
points.push(point)
}
for (let i = 0; i < 1100; i++) {
features.push(new ol.Feature({
geometry: new ol.geom.Point(points[i])
}))
features2.push(new ol.Feature({
geometry: new ol.geom.Point(points[i])
}))
features3.push(new ol.Feature({
geometry: new ol.geom.Point(points[i])
}))
}
var pointSource = new ol.source.Vector({
features: features
})
var IconSource = new ol.source.Vector({
features: features2
})
var heatMapSource = new ol.source.Vector({
features: features3
})
//新建点图层
var pointLayer = new ol.layer.Vector({
source: pointSource,
style: function () {
return new ol.style.Style({
image: new ol.style.Circle({
color: 'red',
radius: 5,
fill: new ol.style.Fill({
color: 'red'
}),
stroke: new ol.style.Stroke({
color: 'gray', width: 3
})
})
})
}
})
pointLayer.layerId = 'pointLayerId'
layerMap.set(pointLayer.layerId, pointLayer)
//新建热力图层
var heatMap = new ol.layer.Heatmap({
source: heatMapSource
})
heatMap.layerId = 'heatMapId'
layerMap.set(heatMap.layerId, heatMap)
//新建图标图层
var iconLayer = new ol.layer.Vector({
source: IconSource,
style: function () {
return new ol.style.Style({
image: new ol.style.Icon({
src: 'F:\\workspaces\\precode\\code2\\two\\car.png',
color: 'red',
radius: 5,
})
})
}
})
iconLayer.layerId = 'iconLayerId'
layerMap.set(iconLayer.layerId, iconLayer)
//现在有三个图层，首先在找到地图上现在呈现出来的图层，然后判断是否删除该图层。
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
pointLayer
],
view: new ol.View({
center: [130, 26],
zoom: 6,
projection: 'EPSG:4326'
})
});
//删除地图上多余的图层，然后添加一个正确的图层的id
var toCurrentLayer = function (layerId) {
let layers = map.getLayers().getArray();
let curLayerId;
for (let i = 0; i < layers.length; i++) {
if (layers[i].layerId) {
curLayerId = layers[i].layerId
break;
}
}
if (curLayerId) {
map.removeLayer(layerMap.get(curLayerId));
map.addLayer(layerMap.get(layerId))
}
}
map.getView().on('change:resolution', zoomCallback);
var isFindLayerById = function (layerId) {
let result = false;
let layers = map.getLayers().getArray()
for (let i = 0; i < layers.length; i++) {
if (layers[i].layerId == layerId) {
return true
}
}
return false
}
function zoomCallback(event) {
window.viewEvent = event;
console.log(event);
let zoom = event.target.getZoom()
console.log(zoom)
if (zoom <= 5 && !isFindLayerById("heatMapId")) {
//层级小于5，显示是热力图
toCurrentLayer("heatMapId");
} else if (5 < zoom && zoom <= 7 && !isFindLayerById("pointLayerId")) {
//显示点图层
toCurrentLayer("pointLayerId");
} else if (zoom > 7 && !isFindLayerById("iconLayerId")) {
//显示图标图层
toCurrentLayer("iconLayerId");
}
}
</script>
</body>
</html>运行展示如下：（网络原因，底图显示不出来）
目录
vue模仿百度地图切换底图
1.切换按钮展示在右下角：
2.单击事件，进行切换
3.代码实现：
<template>
<div class="test">
<div class="type-icon"
v-for="(item,index) in mapTypes"
:style="{'background':'url(' + item.image + ')','right':isExtend?100*index+'px':10*index+'px','bottom':'10px'}"
:key="index"
:class="{'icon-choosed':choosed===item.mapType}"
@click="changeBaseMap(item.mapType)"
v-on:mouseenter="iconExtend"
@mouseleave="iconShrink">
<span class="icon-name">{
{item.name}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
mapTypes: [ // 渲染数据
{
image: 'static/DLG.png',
name: '地图',
mapType: 'BMAP_NORMAL_MAP',
isDefault: true
}, // 地图类型
{
image: 'static/DOM.png',
name: '影像',
mapType: 'BMAP_HYBRID_MAP',
isDefault: false
}, // 影像类型
{
image: 'static/DEM.png',
name: '高程',
mapType: 'BMAP_PERSPECTIVE_MAP',
isDefault: false
} // 高程类型
],
isExtend: false,
choosed: ''
}
},
created: function () {
this.choosed = this.mapTypes[this.mapTypes.length - 1].mapType
},
mounted: function () {
},
methods: {
iconExtend () {
this.isExtend = true
},
iconShrink () {
this.isExtend = false
},
changeBaseMap (type) {
this.choosed = type
console.log('切换底图')
console.log(type)
}
}
}
</script>
<style scoped>
.test {
position: absolute;
bottom: 20px;
right: 10px;
}
.type-icon {
transition: right 1s;
position: absolute;
width: 116px;
height: 60px;
cursor: pointer;
}
.type-icon :hover {
color: green;
}
.icon-choosed {
color: blue;
}
.header-top {
font-size: 10px;
}
.icon-name {
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
padding: 3px 3px 2px 4px;
font-size: 12px;
height: 12px;
line-height: 12px;
/* color: #fff; */
border-top-left-radius: 2px;
}
</style>