【07】openlayers 矢量圖層

時間 2020-03-15

標籤 openlayers 矢量简体版

原文原文鏈接

建立地圖：json

//建立地圖
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)

矢量圖層自身方法：url

//矢量圖層的經常使用方法
//獲取-設置，圖層的可見範圍
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)spa

矢量樣式：stylecode

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],//在文本週圍填充像素
    })
})

矢量樣式裏的圖像樣式：imageorm

//圖像樣式(點)
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的方法：blog

//克隆
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)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。