【07】openlayers 矢量图层
- 2020 年 3 月 15 日
- 筆記
创建地图：
//创建地图 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)
