Openlayer - vue中加载天地图（入门篇）

前端小码仔

于 2024-08-15 14:02:26 发布

阅读量571

点赞数 4

分类专栏： openlayer 文章标签： vue.js 前端 Openlayer

本文链接：https://blog.youkuaiyun.com/qq_36017964/article/details/141220292

版权

在vue中安装openlayers

npm i --save ol

这里说的vue是基于脚手架构建的。新建个页面，也就是vue文件，配置好路由。接着就是可以直接放入我的代码运行显示了。

vue利用openlayers加载天地图和高德地图
<template>
  <div class="wrapper">
    <div>天地图</div>
    <div class="map" id="olMap"></div>
  </div>
</template>
<script>
import "ol/ol.css";
import {
   
  Tile as TileLayer } from "ol/layer";
import XYZ from "ol/source/XYZ";
import {
   
  defaults as defaultControls } from "ol/control";
import Map from "ol/Map.js";<

最低0.47元/天解锁文章