一、openlayers官网示例Accessible Map解析

官网demo地址：

Accessible Map 

openlayers官网的demo根本不适合小白，于是写了一系列解析文章。

 很多人打开openlayers官网第一个demo，兴致冲冲的copy下来代码，运行起来却发现，嗯？地图咋出不来？代码也看不太懂，这是啥情况？别慌，俺来带你解析一下~

一、准备工作

首先咱们起一个vue2的架子

vue create openlayers_demo

下载一些依赖 

npm install ol

npm install ol-ext

npm i element-ui -S

main.js里面引入一下elementui和配置的路由

import Vue from 'vue'

import App from './App.vue'

import router from "./router";

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import "ol/ol.css";

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({

  router,

  render: h => h(App),

}).$mount('#app')

我在views目录下写了一个List页面，使用动态组件的方式加载右边的地图，左侧目录绑定点击事件切换组件，方便点击查看不同示例。

List.vue

<template>
  <div class="list">
    <div class="left">
      <h3>目录</h3>
      <div
        class="item"
        @click="setMapView(item)"