2020-10-12 ol(OpenLayers)地图插件的笔记

<template>
  <div class="home">
    <div class="map" id="map"></div>
    <div class="info" id="info"></div>
  </div>
</template>

<script>
//map 核心 
import Map from 'ol/Map';
//layer 核心
import {
    Tile as LayerTile, Vector as VectorLayer } from 'ol/layer';
//view 核心
import View from 'ol/View';
//map数据来源之一，你也可以在相关地方重新定义或者引入三方地图
import OSM from 'ol/source/OSM';
//debug 模式，在地图上层加鸽子
import TileDebug from 'ol/source/TileDebug';
//放大条
import ZoomSlider from 'ol/control/ZoomSlider';
//拖动显示地图的controller
import {
    DragRotateAndZoom, defaults as defaultInteractions } from 'ol/interaction';
//默认controller
import {
    OverviewMap, defaults as defaultControls } from 'ol/control';
//点
import Point from 'ol/geom/Point';
//feature
import Feature from 'ol/Feature';
//view源
import VectorSource from 'ol/source/Vector';
//样式相关
import {
    Icon, Style, Circle as CircleStyle, Fill, Stroke } from 'ol/style';
//左标转化
import {
    fromLonLat } from 'ol/proj';
//绘制类库
import Draw from 'ol/interaction/Draw';

export default {
   
  name: 'Home',
  components: {
   },
  data: () => ({
   
    map: