Openlayer系列教程之三：绘制多边形与GeoJson边界绘制

在Openlayer中，你可以使用其强大的图形绘制功能来创建各种复杂的几何图形。本篇教程将向你介绍如何使用Openlayer绘制多边形，以及如何使用GeoJson数据绘制边界。
一、绘制多边形
在Openlayer中，你可以使用ol.interaction.Draw类来创建绘制多边形的交互。以下是一个简单的示例：

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {Circle, Fill, Stroke, Style} from 'ol/style';
import {Circle as olCircle, Feature, Polygon, Vector as olVector} from 'ol';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {fromLonLat} from 'ol/proj';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: fromLonLat([116.397428, 39.909211]),
zoom: 10
})
});
// 创建绘制多边形的交互
const draw = new ol.interaction.Draw({
source: new ol.source.Vector({wrapX: false}),
type: 'Polygon',
style: new Style({
fill: new Fill({color: 'rgba(255, 0, 0, 0.5)'}),
stroke: new Stroke({color: '#ffcc33', width: 2})
})
});
map.addInteraction(draw);
// 监听绘制完成事件
draw.on('drawend', function(e) {
console.log(e.feature);
});

在上述代码中，我们首先创建了一个Openlayer地图，并添加了一个OSM图层。然后，我们创建了一个新的交互ol.interaction.Draw，并将其类型设置为Polygon（多边形）。我们给多边形的线条添加了颜色和宽度，并设置了一个半透明的红色填充。最后，我们添加了一个监听器，当用户完成绘制时，会在控制台打印出绘制的几何图形。
二、GeoJson边界绘制
如果你有一个GeoJson格式的边界数据，你可以使用Openlayer的ol.source.Vector和ol.layer.Vector来绘制它。以下是一个简单的示例：
```javascript
import Map from ‘ol/Map’;
import View from ‘ol/View’;
import TileLayer from ‘ol/layer/Tile’;
import OSM from ‘ol/source/OSM’;
import VectorLayer from ‘ol/layer/Vector’;
import VectorSource from ‘ol/source/Vector’;
import {fromLonLat} from ‘ol/proj’;
import GeoJSON from ‘ol/format/GeoJSON’;
import {Polygon, Vector as olVector} from ‘ol’;
const map = new Map({
target: ‘map’,
layers: [
new TileLayer({
source: new OSM()
}),
new VectorLayer({
source: new VectorSource({
url: ‘path_to_your_geojson_file’,
format: new GeoJSON()
}),
style: new Style({
fill: new Fill({color: ‘rgba(255, 0, 0, 0.5)’}),
stroke: new Stroke({color: ‘#ffcc33’, width: 2})
})
})
],
view: new View({
center: fromLonLat([116.397428, 39.909211