【07】openlayers 矢量图层
LearningTogether 人气:0创建地图：
//创建地图
var map = new ol.Map({
//设置显示地图的视图
view: new ol.View({
center: [0, 0],//义地图显示中心于经度0度，纬度0度处
zoom: 1 //定义地图显示层级为1
}),
//创建地图图层
layers: [
//创建一个使用Open Street Map地图源的瓦片图层
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
//让id为map的div作为地图的容器
target: 'map'
});
创建矢量图层：
//矢量图层vectorlayer
let vectorlayer = new ol.layer.Vector({
source:source,//矢量图层源
style:style,//矢量图层样式
opacity:1,//透明度，默认为1
visible:true,//是不显示，默认true
extent:[100,34,103,36],//可选参数，图层渲染范围，[minLon,minLat,maxLon,maxLat]
zIndex:1,//图层渲染索引，默认是按加载顺序叠加
})
map.addLayer(vectorlayer)
矢量图层关于map的方法：
//添加矢量图层 map.addLayer(vectorlayer) //删除切片图层 map.removeLayer(vectorlayer)
矢量图层自身方法：
//矢量图层的常用方法 //获取-设置，图层的可见范围 vectorlayer.getExtent(); vectorlayer.setExtent([100,34,103,36]); //获取-设置，图层最大缩放级别 vectorlayer.getMaxZoom() vectorlayer.setMaxZoom(18) //获取-设置，图层最小缩放级别 vectorlayer.getMinZoom() vectorlayer.setMinZoom(2) //获取-设置，图层的不透明度 vectorlayer.getOpacity() vectorlayer.setOpacity(1) //获取-设置，图层源 vectorlayer.getSource() vectorlayer.setSource(new ol.source.OSM()) //获取-设置，图层的可见性 vectorlayer.getVisible() vectorlayer.setVisible(true) //获取-设置，图层的Z索引 vectorlayer.getZIndex() vectorlayer.setZIndex(2) //绑定事件-取消事件 type事件类型，listener函数体 vectorlayer.on(type,listener) vectorlayer.un(type,listener) //获取与视口上给定像素相交的最高要素 vectorlayer.getFeatures([200,600]) //获取-设置，图层样式 vectorlayer.getStyle() vectorlayer.setStyle(style)
下面重点介绍：矢量图层样式(style) 和 矢量图层源(source)
矢量样式：style
let 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:image,
//文字样式
text:new ol.style.Text({
font:'20px sans-serif',//字体大小，样式
offsetX:0,//水平文本偏移量（以像素为单位）
offsetY:0,//垂直文本偏移量（以像素为单位）
scale:1,//字体放大倍数
rotation:(Math.PI/180)*30,//旋转角度（顺时针旋转）
text:'哇哈哈',//文字内容
textAlign:'center',// 文字对齐方式 'left'，'right'，'center'
fill:new ol.style.Fill({//文字填充颜色
color: 'green'
}),
stroke: new ol.style.Stroke({//描边样式
color: '#fff',
width: 2
}),
padding:[0,0,0,0],//在文本周围填充像素
})
})
矢量样式里的图像样式：image
//图像样式(点)
let image = new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: 'red'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
//如果是图标
let image = new ol.style.Icon({
src:'',//图片来源
color:'',//图标颜色,
opacity:1,//透明度
scale:1,//放大缩小倍数
rotation:(Math.PI/180)*deg,//旋转角度，顺时针旋转
})
//如果是正方形
let image = new ol.style.RegularShape({
fill: new ol.style.Fill({
color: 'red'
}),//填充色
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),//边线样式
points: 4,//边数
radius: 10,//半径
angle: (Math.PI/4),//形状的角度(弧度单位)
rotation:(Math.PI/180)*deg,//旋转角度
rotateWithView:false,//是否跟随视图旋转形状
})
//如果是五角星
let image = new ol.style.RegularShape({
fill: new ol.style.Fill({
color: 'red'
}),//填充色
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),//边线样式
points: 5,//边数
radius: 10,//半径
radius2: 4,//内半径
angle: 0//形状的角度(弧度单位)
})
//如果是三角形
let image = new ol.style.RegularShape({
fill: new ol.style.Fill({
color: 'red'
}),//填充色
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),//边线样式
points: 3,//边数
radius: 10,//半径
rotation: (Math.PI/180)*deg,//旋转角度
angle: 0//形状的角度(弧度单位)
})
//如果是十字
let image = new ol.style.RegularShape({
fill: new ol.style.Fill({
color: 'red'
}),//填充色
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),//边线样式
points: 4,//边数
radius: 10,//半径
radius2: 0,//内半径
angle: 0//形状的角度(弧度单位)
})
//如果是X型
let image = new ol.style.RegularShape({
fill: new ol.style.Fill({
color: 'red'
}),//填充色
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),//边线样式
points: 4,//边数
radius: 10,//半径
radius2: 0,//内半径
angle: (Math.PI/4)//形状的角度(弧度单位)
})
矢量样式style的方法：
//克隆 style.clone() //获取 style.getFill() style.getStroke(); style.getImage(); style.getText(); //设置 style.setFill(fill) style.setImage(image) style.setStroke(stroke) style.setText(text)
矢量图层源：point,line,polygon,wkt
//矢量图层源 ：point,line,polygon,wkt
let source = new ol.source.Vector({
features:[point,line,polygon,wkt]//矢量
})
//矢量点 - 图标
let point = new ol.Feature(
new ol.geom.Point([108,34])
)
//矢量 线
let line = new ol.Feature(
new ol.geom.LineString([[108,34],[100,34],[100,40]])
)
//矢量面
let polygon = new ol.Feature(
new ol.geom.Polygon([[90,34],[108,34],[90,40]])
)
//wkt
let wktData = 'POLYGON((10.689 -25.092, 34.595 ' +
'-20.170, 38.814 -35.639, 13.502 ' +
'-39.155, 10.689 -25.092))';
let wkt = (new ol.format.WKT()).readFeature(wktData, {
dataProjection: 'EPSG:4326',//数据的投影
featureProjection: 'EPSG:3857'//创建的要素几何的投影
})
矢量图层源：geojson
//矢量图层源：geojson
//加载方法一
let source = new ol.source.Vector({
url:'data.geojson',//geojson 路径
format:new GeoJSON({
dataProjection:'EPSG：4326',//默认数据投影'EPSG：4326'
})
})
//加载方法二
let source = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonData)
})
矢量图层源：topjson
//矢量图层源：topjson
let source = new ol.source.Vector({
url: 'topjson.json',//路径
format: new ol.format.TopoJSON({
layers: ['countries'] //子级名称
}),
overlaps: false,//该源可能具有重叠的几何形状,是否重叠
})
矢量图层源：kml
//矢量图层源：kml
let source = new ol.source.Vector({
url: "data.kml",
format: new ol.format.KML({
extractStyles:true,//从KML中提取样式
showPointNames:true,//将名称显示为包含点的地标的标签
writeStyles:true,//将样式写入KML
})
})
矢量图层源：gpx
let source = new ol.source.Vector({
// GPX数据路径
url: 'data.gpx',
// 指定数据格式为GPX
format: new ol.format.GPX()
})
矢量图层源：mvt
let source = new ol.source.VectorTile({
format: new ol.format.MVT(),
url: '',//数据路径
})
矢量图层源 source 的自身方法：
//source 方法 //添加-删除feature source.addFeature(feature) source.removeFeature(feature) source.addFeatures(features) //遍历feature source.forEachFeature(callback) //获取 source.getFeatureById(id) source.getFeatures() //绑定事件-取消事件 type事件类型，listener函数体 source.on(type,listener) source.un(type,listener)
矢量点聚合Cluster
//点聚合Cluster
let clusterSource = new ol.source.Cluster({
distance:20,//间隔最小距离，默认20像素
source: source,//资源，点
});
//设置距离
clusterSource.setDistance(10)
加载全部内容