壹、 常见问题
备注：
如同现openlayer官网的实例代码所以用的是VectorLayer的格式，项目是在该页面上引用的ol；
项目在全局引用了ol，所以用的ol.layer.Vector这样的格式；
部分代码是在word里改的可能有错误，粘贴复制需要检查。
1、 tilelayer与vectorlayer
tilelayer为瓦片数据，获取到的数据是以图片的形式展示的，所以无法获取包含的属性值；
var imgayer = new TileLayer({
source: new TileWMS({
url: 'http://xx.xxx.xxxx /geoserver/'testosmmap /wms',
params:{
LAYERS: 'testosmmap:xxxx,
TILED: true,
VERSION: '1.1.0'
},
serverType: 'geoserver',
wrapX: false,
})
})
vectorlayer获取到的为矢量数据，openlayer默认的样式：点为中间白色边框为蓝色的圆圈，线为蓝色，面为中间白色边框蓝色；在添加矢量数据的时候可以根据自己想要的样子修改vectorlayer里的style，改变其样式。
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'RGBA(27,84,146,0.3)'
}),
stroke: new ol.style.Stroke({
width: 4,
color: 'RGBA(27,84,146,1)'
}),
image: new ol.style.Icon({
anchor: [0.5, 30],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.95,
src: that.point_icon //图片src
}),
text: new ol.style.Text({
font: 'bold 15px "Open Sans", "Arial Unicode MS", "sans-serif"',
placement: 'point',
fill: new ol.style.Fill({
color: 'black'
}),
offsetY: 5,
})
})
//点线面要素图层
// 这里的arr为要素集
Var vectorsource1 = new ol.source.Vector({
features: arr
})
Var vectorlayer1 = new ol.layer.Vector({
source: vectorsource1,
//要素的name值显示在要素上
style: function (feature) {
style.getText().setText(feature.get('name'))
return style
}
})
通过geoserver添加vectorlayer矢量数据：
Var vectorsource= new VectorSource({
//geoserver下预览选择geojson格式的url
url: 'http://xx.xxx.xxxx/geoserver/testosmmap/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=testosmmap%3Apeople_point&maxFeatures=50&outputFormat=application%2Fjson',
format: new GeoJSON()
})
Var vectorlayer = new VectorLayer({
source: vectorsource_
style: new Style({
image: new Icon({
src: people
})
})
})
2、 获取矢量要素的属性值getProperties()及几何信息getGeometry()
var features = vectorsource.getFeatures()
for (var m = 0; m < feature.length; m++) {
var prop = features[m].getProperties()
var geom = features[m].getGeometry()
}
3、 获取当前的zoom比例缩放值
当我们要根据其zoom的值来改变一些地图上的东西时，这时候就要监听zoom的变化，实时获取当前的zoom值：（在moveend，缩放结束时获取当前地图的缩放比例）
map.on('moveend', function (event) {
var zoom = map.getView().getZoom()
})
4、 获取当前地图的范围，并根据当前范围设置中心点，定位功能
比如说根据一个点击事件，定位到该要素，将该要素设为中心点：(通过getGeomety()获取该要素的几何信息，再根据几何信息获取该要素的范围，最后设置地图的视图即可)
var geometry = feature.getGeometry();
var extent = geometry.getExtent();
map.getView().fit(extent, map.getSize());
5、 Drawend事件，绘制点线面结束事件
绘制结束后，获取本次绘制的要素feature
draw.on('drawend', function (event) {
that.feature = event.feature
//获取feature的坐标点
var coordinate = event.feature.getGeometry().getCoordinates()
map.removeInteraction(draw)
})
6、 添加select选中事件，Selected选中后触发事件
var select = new ol.interaction.Select()
map.addInteraction(select)
select.on('select', function (evt) {
//选中的要素
var feature = evt.selected[0]
})
7、 地图点击事件，click、doubleclick、pointermove、pointerdrag、pointerdown
//单击事件
map.on('click', function (evt) {
var feature1 = map.forEachFeatureAtPixel(evt.pixel, function (feature){
return feature
})
})
//鼠标移动事件
map.on("pointermove", function(e) {
varfeature1 = map.forEachFeatureAtPixel(e.pixel, function (feature){
return feature
})
});
//双击事件
map.on("doubleclick", function(e) {
varfeature1 = map.forEachFeatureAtPixel(e.pixel, function (feature){
return feature
})
});
//鼠标拖拽事件
//（拖拽时改变鼠标样式的操作）
map.on('pointerdrag', function (evt) {
$('#map').removeClass('mapup')
$('#map').addClass('mapdown')
})
map.on('pointerup', function() {
$('#map').addClass('mapup')
})
8、 添加超图服务器上的data数据即矢量数据，sql查询、几何查询添加数据
//通过sql查询
var geometryParam = new SuperMap.GetFeaturesBySQLParameters({
queryParameter:{
name: 'abc'
},
//abc为data的数据源名称；xyz为数据集名称
datasetNames: ['abc: xyz'],
toIndex: 20000,
maxFeatures: 20000
})
var url = 'http://xxx.xxx.xxxx/iserver/services/xxx/rest/data'
var icon = that.icon1
that.adddata(url, geometryParam, icon)
//添加的方法
adddata (url, geometryParam, icon) {
let that = this
new ol.supermap.FeatureService(url).getFeaturesBySQL(
geometryParam,
function (serviceResult) {
var features = new ol.format.GeoJSON().readFeatures(
serviceResult.result.features
)
var vectorSource = new ol.source.Vector({
features: features,
wrapX: false
})
var style = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 30],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.95,
src: icon
}),
text: new ol.style.Text({
font: 'bold 15px "Open Sans", "Arial Unicode MS", "sans-serif"',
placement: 'point',
fill: new ol.style.Fill({
color: 'black'
}),
offsetY: 5,
})
})
var resultLayer = new ol.layer.Vector({
source: vectorSource,
// style: style
style: function (feature) {
style.getText().setText(feature.get('NAME'));
return style
}
})
map.addLayer(resultLayer)
// }
})
},
//通过几何查询
var geometryParam = new SuperMap.GetFeaturesByGeometryParameters({
//abc为data的数据源名称；xyz为数据集名称
datasetNames: [abc:xyz],
geometry: polygon,
spatialQueryMode: 'INTERSECT'
})
var url = 'http://xxx.xxx.xxxx/ iserver/services/xxxx /rest/maps/xxxx'
new ol.supermap.FeatureService(url).getFeaturesByGeometry(geometryParam, function (serviceResult) {
getdata = serviceResult
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.features),
wrapX: false
})
var resultLayer = new ol.layer.Vector({
source: vectorSource
})
resultLayer.setProperties({
'layerType': 'query_result'
})
map.addLayer(resultLayer)
})
}
9、 想到别的再写
貳、 Openlayer详解
等下次再写，困了。
网友评论