openLayers 加载点线面等基础用法

官方网址：https://openlayers.org/

                           http://121.199.5.11/openlayers/v6.6.1/apidoc/index.html

        作者只是针对于自己在项目（Vue）中所用到的基础用法进行了整理，更多用法请到官方网站进行查看使用。个人认为openLayers的功能还是特别强大的，再配合其他插件，基本能够全部满足项目开发需求。
Vue 相关引入：

• npm 安装：npm install ol （也可自行安装指定版本）
• 单页面引入：

<script>
   import "ol/ol.css"; // ol 样式
   import Map from "ol/Map"; // ol 地图
   import TileLayer from "ol/layer/Tile"; // 底图图层
   import Projection from "ol/proj/Projection";
   import View from "ol/View";
   import XYZ from "ol/source/XYZ";
   import {
    DoubleClickZoom } from "ol/interaction"; // 双击放大
   import VectorLayer from "ol/layer/Vector"; // 加载（点线面等）图层
   import VectorSource from "ol/source/Vector"; // 加载（点线面等）图层源
   import OlStyleIcon from "ol/style/Icon";
   import OlGeomPoint from "ol/geom/Point";
   import WebGLPointsLayer from "ol/layer/WebGLPoints";
   import LineString from "ol/geom/LineString"; // 线
   import LineString from "ol/geom/MultiLineString"; // 多线
   import Polygon from "ol/geom/Polygon"; // 面
   import MultiPolygon from 'ol/geom/MultiPolygon' // 多面
   import Feature from "ol/Feature"; // 图层
   import {
    Style, Stroke, Fill } from "ol/style"; // 样式、边框、填充
   import {
   DragBox, Select} from 'ol/interaction'; // 框选
   import {
   platformModifierKeyOnly} from 'ol/events/condition';
   export default {
   
   	data() {
   
   		return {
   
   			// ol 地图
   			myOLMap: null,
   			// 点位图层
   			pointerLayer: null,
   		}
   	}
   }
</script>

注：其他所需功能可自行引入

1、地图加载

this.myOLMap= new Map({
   
   target: "myOLMap",
    layers: [
        new TileLayer({