【07】openlayers 矢量图层

创建地图：

//创建地图
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 ol.format.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)