一、openlayers官网示例Accessible Map解析

原创

已于 2024-05-21 09:46:50 修改 · 2.4k 阅读

43 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #openlayers #前端 #openlayers官方示例 #地图 #GIS

于 2024-05-07 18:30:00 首次发布

官网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)"
        v-for="(item, ind