OpenLayers官方示例詳解九自定義多邊形樣式（Custom Polygon Styles）
阿新 • • 發佈：2018-12-19
目錄
一、示例簡介
這個示例演示怎樣為多邊形要素建立自定義的樣式。
在這個示例中，將為多邊形建立兩種不同的樣式：
- 第一個樣式是多邊形的整體樣式
- 第二個樣式是為多邊形的各個頂點建立的樣式
二、程式碼詳解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Custom Polygon Styles</title> <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" /> <script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script> </head> <body> <div id="map"></div> <script> var styles = [ new ol.style.Style({ stroke: new ol.style.Stroke({ // 線樣式 color: 'blue', width: 3 }), fill: new ol.style.Fill({ // 填充樣式 color: 'rgba(0, 0, 255, 0.1)' }) }), new ol.style.Style({ image: new ol.style.Circle({ // 點樣式 radius: 5, // 圓形符號的半徑 fill: new ol.style.Fill({ // 圓形符號的填充樣式 color: 'orange' }) }), // 將樣式設定為多邊形外環獨有的樣式 geometry: function(feature){ // 返回多變形第一個外環的座標（陣列形式） var coordinates = feature.getGeometry().getCoordinates()[0]; // 將返回的多邊形外環的座標以MultiPoint的形式重新建立為多點圖形 return new ol.geom.MultiPoint(coordinates); } }) ]; // GeoJson格式的資料 var geojsonObject = { 'type': 'FeatureCollection', 'crs': { 'type': 'name', 'properties': { 'name': 'EPSG:3857' } }, 'features': [{ 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6], [-5e6, 6e6]]] } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6], [-2e6, 6e6]]] } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6], [1e6, 6e6]]] } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[-2e6, -1e6], [-1e6, 1e6], [0, -1e6], [-2e6, -1e6]]] } }] }; // 讀取GeoJson資料並將其初始化為向量圖層源 var source = new ol.source.Vector({ features: (new ol.format.GeoJSON()).readFeatures(geojsonObject) }); // 承載GeoJson資料的向量圖層 var layer = new ol.layer.Vector({ source: source, style: styles // 圖層可以接受一個樣式陣列作為渲染的樣式 }); var map = new ol.Map({ target: 'map', layers: [ layer ], view: new ol.View({ center: [0, 3000000], zoom: 2 }) }); </script> </body> </html>
這裡需要了解的是，向量圖層可以接受一個由多個樣式物件所構成的樣式陣列作為渲染樣式。
同時，樣式陣列中的樣式也與要渲染的幾何圖形一一對應。