openlayers6绘制点线面圆

gis中点线面的绘制是常用功能。一般在交通项目中会用来绘制限行区，公安项目会用来绘制辖区，以及在资源搜索时，会用到点选、圈选、多边形选等。

1、HTML——用到了iview框架的下拉框组件

<template>
    <div class="box">
        <div class="operation">
            <Dropdown style="margin-left: 15px"  trigger="click" @on-click="typeSelectChange">
                <span>
                    绘制
                    <Icon type="ios-arrow-down"></Icon>
                </span>
                <DropdownMenu slot="list">
                    <DropdownItem name="Point">点</DropdownItem>
                    <DropdownItem name="LineString">线</DropdownItem>
                    <DropdownItem name="Box">矩形</DropdownItem>
                    <DropdownItem name="Polygon">多边形</DropdownItem>
                    <DropdownItem name="Circle">圆</DropdownItem>
                    <DropdownItem name="clear">清除</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
        <div class="info" ref="infoEl">

        </div>
        <div id="map"></div>
    </div>
</template>

2、JavaScript——底图用的是arcgis蓝色地图；并将绘制的坐标显示在页面；采取的是不连续绘制。

<script>
/* eslint-disable */
import {Map, View} from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import TileGrid from 'ol/tilegrid/TileGrid';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {Icon, Style,Stroke,Fill,Circle} from 'ol/style';
import Draw from "ol/interaction/Draw";
import {createBox} from "ol/interaction/Draw";
import {fromLonLat} from 'ol/proj';


export default {
	name: "home",
	components:{

	},
	data(){
		return {

        }
	},
	mounted(){
        let center = [108.946994, 34.261361];

        // arcgiS图层
        let arcgisLayer = new Tile({
            source: new XYZ({
                url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            }),
        });
        // 矢量图层
        this.vectorLayer = new VectorLayer({
            source: new VectorSource(),
            style: new Style({
                
                stroke: new Stroke({
                    width: 2,
                    color: [242,114,60, 1],
                    lineDash:[1,2,3,4,5,6],
                }),
                fill: new Fill({
                    color: [242,114,60, 0.2],
                }),
                image: new Circle({
                    // 点的颜色
                    fill: new Fill({
                        color: [242,114,60, .5]
                    }),
                    stroke: new Stroke({
                        color: [242,114,60, 1]
                    }),
                    // 圆形半径
                    radius: 5
                }),
                
            })
        })
        this.map = new Map({
            target: "map",
            layers: [arcgisLayer,this.vectorLayer],
            view: new View({
                center: center,
                zoom: 12,
                projection: "EPSG:4326",
            }),
        });
    },
	methods:{
        typeSelectChange(value) {
            this.map.removeInteraction(this.draw);
            if (value === 'clear') {
                this.vectorLayer.getSource().clear();
                this.$refs.infoEl.innerHTML = "";
            }else{
                if(value === "Box"){
                    this.draw = new Draw({
                        source: this.vectorLayer.getSource(),
                        geometryFunction: createBox(),
                        type: "LineString",
                        stopClick: true,  //绘制时禁用点击事件
                        style:this.getDrawingStyle(),
                    })
                }else{
                    this.draw = new Draw({
                        source: this.vectorLayer.getSource(),
                        type: value,
                        stopClick: true,  //绘制时禁用点击事件
                        style:this.getDrawingStyle(),
                    })
                }
                
                this.draw.on("drawend",(e)=>{
                    console.log(window.e=e,window.d=this.draw);
                    if(this.draw.type_ === "Circle"){
                        let circleCenter = e.feature.getGeometry().getCenter();
                        let circleRadius = e.feature.getGeometry().getRadius();
                        circleRadius = fromLonLat([circleRadius,circleRadius],"EPSG:3857")[0];
                        this.$refs.infoEl.innerHTML = "圆心：" + circleCenter+"<br/>半径："+circleRadius;
                    }else{
                        let coordinates = e.feature.getGeometry().getCoordinates();
                        this.$refs.infoEl.innerHTML = "坐标："+coordinates;
                    }
                    this.map.removeInteraction(this.draw);
                });
                this.map.addInteraction(this.draw);
            }
        },
        getDrawingStyle(){
            return new Style({
                stroke: new Stroke({
                    width: 2,
                    color: [239,176,19, 1],
                    lineDash:[1,2,3,4,5,6],
                }),
                fill: new Fill({
                    color: [239,176,19, 0.2],
                }),
                image: new Circle({
                    // 点的颜色
                    fill: new Fill({
                        color: [239,176,19, .5]
                    }),
                    stroke: new Stroke({
                        color: [239,176,19, 1]
                    }),
                    // 圆形半径
                    radius: 5
                }),
            })
        },
	},
};
</script>

3、css

<style scoped lang="less">
.box {
    width: 100%;
	height: 100%;
    position: relative;
    .operation{
		position: absolute;
		z-index: 1;
		top: 10px;
		left: 10px;
		display: flex;
		background: #fff;
		color: #000;
		border-radius: 2px;
		box-shadow: 1px 2px 1px rgba(0,0,0,.15);
		padding:5px 15px 5px 10px;
    }
    .info{
        position: absolute;
        z-index: 1;
        top: 10px;
        right: 10px;
        background: #fff;
        color: #000;
        max-width: 200px;
        word-break: break-all;
    }
	#map{
		width:100%;
		height: 100%;
		/deep/ .ol-control{
			display:none;
		}
	}
}