1.1、繪制多邊形

在繪制多邊形和前面繪制線(xiàn)有異曲同工之妙，多邊形本質(zhì)上就是由多個(gè)點(diǎn)組成的線(xiàn)然后連接組成的面，這個(gè)面就是最終的結(jié)果，那么這里使用到的是Polygon對(duì)象，而傳給這個(gè)對(duì)象的值也是多個(gè)坐標(biāo)，坐標(biāo)會(huì)一個(gè)個(gè)的連起來(lái)組成一個(gè)面，而繪制多邊形只需要塞進(jìn)去多少個(gè)頂點(diǎn)即可

const vectorSource = new VectorSource();
const vectorLayer = new VectorLayer({source: vectorSource
});
this.map.addLayer(vectorLayer);
const coordinates = [this.getRandomSmallCoordinate(),this.getRandomSmallCoordinate(),this.getRandomSmallCoordinate(),this.getRandomSmallCoordinate()
];
const polygonGeometry = new Polygon([coordinates]);const polygonFeature = new Feature(polygonGeometry);polygonFeature.setStyle(new Style({stroke: new Stroke({color: "red",width: 2}),fill: new Fill({color: "rgba(255,255,0,0.7)"})})
);vectorSource.addFeature(polygonFeature);

1.2、繪制geoJson數(shù)據(jù)

在這里可以通過(guò) GeoJSON 讀取 GeoJSON 格式讀取和寫(xiě)入數(shù)據(jù)的要素格式，在echart當(dāng)中渲染地圖也是使用這種數(shù)據(jù)格式的，那么這樣的話(huà)就可以獲取對(duì)應(yīng)的geojson文件來(lái)把對(duì)應(yīng)的地圖渲染到地圖上。

這里用到的json文件可以去網(wǎng)站上【阿里云數(shù)據(jù)可視化平臺(tái)】進(jìn)行下載，這里使用一個(gè)json文件進(jìn)行加載渲染，

let features = new GeoJSON().readFeatures(require('./mapJson/changsha.json'));
var vectorSource = new VectorSource({ features: features });
let lineLayer = new VectorLayer({id: item.id,name: "hunan border",opacity: 1,zIndex: 1,source: vectorSource
});
this.map.addLayer(lineLayer);