vue 项目使用 openlayers根据半径绘制圆形、绘制多边形

这个地方我就简单点写吧，因为一些东西比较乱，有的包啥的就按照官网API开发文档根据报错提示自己添加就可以了，我这个地方就不重复写了。

绘制圆形

这里的绘制圆是指当后台返回数据，告诉你以某个经纬度坐标为圆心，或者是顶点，以 r 为半径绘制，不是鼠标手动绘制。

首先绘制圆，首先有一个数据源和一个图层来存放绘制的圆形，这个很简单。然后创建变量自己该就可以，我估计都搞openlayer了，这些基础应该不至于不知道，我这边就写关键代码，我想应该没问题，我用的是默认3857坐标，不是4326。

sourcePoint = new VectorSource()   // 创建数据源
layerPoint = new VectorLayer({     // 创建图层zIndex: 1,   // 图层的层级
})
layerPoint.setSource(sourcePoint)  // 把数据源绑定到图层上面
map.addLayer(layerPoint)  // 把图层添加到地图上面去

好的，通过上面的代码实现了创建一个图层在地图上来放置绘制的圆形。

接下来就是向这个数据源去添加圆形，这个呢，还是嘛，和我之前写的博客差不多，那几部分相互嵌套，我还是把图在贴一下吧，这个图是大佬整理的，我直接拿来用了。

通过上面图看，刚刚我们做的，往地图上添加 layer 图层完成了，向 layer 添加 source 数据源也完成了。下一步就是往 source 中添加 feature 了。

   // 绘制圆形addCircle() {let feature = new Feature({title: 'beijing',geometry: new Circle(fromLonLat([116.400819, 39.916263]), this.getRadius(500)),  // 创建 以[116.400819, 39.916263]为圆心，500米为半径的圆，但是这个半径不是很准，没解决了})feature.setStyle(new Style({fill: new Fill({color: 'rgba(32, 157, 230, 0.5)'})}))feature.setId('1233')  // 设置 feature 的ID值feature.set('data', {  // 设置其他的数据name: 'wjw',})sourcePoint .addFeatures([feature])},

// 半径计算getRadius(radius) {let metersPerUnit = map.getView().getProjection().getMetersPerUnit();let circleRadius = radius / metersPerUnit;return circleRadius;},

上边代码就是实现了在地图上以某点，某半径绘制一个圆形，但是半径不是很准确，如果有大佬解决了半径不准确的问题希望帮忙指点一下。

鼠标移入修改样式

哎哟，写了一遍，忘记保存了，麻蛋，从新着这个地方。

上边我们在 openlayer 上面绘制了一个圆形，但是我想在鼠标移入的时候，圆变色，移出之后，颜色变回来，怎么整呢？

其实很简单，就是设置一下鼠标移动事件，监听鼠标有没有移动到圆上面，如果移动到了就获取这个圆的 feature，然后设置他的颜色，当移出之后再设置回来。

       map.on('pointermove', ev => {let pixel = ev.pixel  // 获取鼠标移动的位置let feature = map.forEachFeatureAtPixel(pixel, (feature) => {return feature   // 根据位置查找有没有圆})if (feature) {  // 如果有, feature 就是那个圆的feature，直接修改样式就行map.getTargetElement().style.cursor = 'pointer'  // 设置鼠标变成小手指let pointData = feature.get('data')  // 获取圆设置的数据// ... 然后是其他逻辑} else {  // 如果没有，表示鼠标移出了圆map.getTargetElement().style.cursor = ''   // 取消鼠标小手指的样式// ... 其他逻辑代码}})

绘制多边形

这个地方说的绘制多边形是指鼠标手动绘制，绘制完成可以获得鼠标绘制多边形的顶点坐标。

绘制

首先绘制和上面一样，只要是图层，就哪几层才能显示在地图上，所以呢，先创建图层、数据源添加到地图，然后呢，因为是鼠标绘制，所以说需要设置一下绘制完成的多边形在地图上什么样式，然后在一个就是添加鼠标交互的工具，所以说就是下面的代码。

     source = new VectorSource();vector = new VectorLayer({source: source,style: new Style({fill: new Fill({color: 'rgba(255, 255, 255, 0.2)',}),stroke: new Stroke({color: '#ffcc33',width: 3,}),image: new CircleStyle({radius: 3,fill: new Fill({color: '#ffcc33',}),}),}),});map.addLayer(vector)modify = new Modify({ source: source });snap = new Snap({ source: source });draw = new Draw({source: source,type: 'Polygon',});

上边代码呢，实现了图层初始化和交互工具的初始化，接下来就是鼠标绑定事件绘制。

     map.addInteraction(modify);map.addInteraction(draw);map.addInteraction(snap);draw.on('drawend', e => {//绘画完成触发时间const geometry = e.feature.getGeometry()const corrdinates = geometry.getCoordinates()let points = []corrdinates[0].forEach(item => {let xy = transform(item, 'EPSG:3857', 'EPSG:4326')  // 转换成经纬度坐标points.push(xy)})this.$message.success('顶点坐标是：' + JSON.stringify(points))map.removeInteraction(draw);  //移除交互map.removeInteraction(snap);  //移除交互map.removeInteraction(modify);  //移除交互});

编辑多边形

再次编辑的话，这个就很简单了，上一步不是移除了三个吗？第一个是鼠标绘制，编辑的时候除了鼠标绘制，其他两个移除的交互再加上就可以了。

map.addInteraction(modify);
map.addInteraction(snap);

完成绘制

绘制完成的话，在移除交互工具，然后重新获取一下顶点坐标列表就可以了。

     map.removeInteraction(draw);//移除绘画互动map.removeInteraction(snap);//移除绘画互动map.removeInteraction(modify);//移除绘画互动let feature = source.getFeatures()[0]const geometry = feature.getGeometry()const corrdinates = geometry.getCoordinates()let points = []corrdinates[0].forEach(item => {let xy = transform(item, 'EPSG:3857', 'EPSG:4326')points.push(xy)})this.$message.success('顶点坐标是：' + JSON.stringify(points))

这里不贴图了