vue openlayers 地图展示

曉寳潴

已于 2022-06-01 17:23:18 修改

阅读量355

点赞数

分类专栏：新文章标签： vue.js javascript

于 2022-06-01 17:14:59 首次发布

本文链接：https://blog.csdn.net/zengliang1990/article/details/125086894

版权

本文档介绍如何利用Vue.js框架结合OpenLayers库，实现动态地图展示的功能。通过实例代码，展示了一个基本的地图展示效果。

摘要由CSDN通过智能技术生成

<template>
  <div id="index">
      <div class="tabber_mapdiv" :style="{height:setheight}">
        <div id="map" class="map" ref="map" :style="{height:setheight}"></div>
      </div>
  </div>
</template>


js:

import 'ol/ol.css';
import Graticule from 'ol/layer/Graticule';
import Map from 'ol/Map';
import View from 'ol/View';
import {easeIn, easeOut} from 'ol/easing';
import {fromLonLat} from 'ol/proj';
import {Circle as CircleStyle, Fill, Stroke, Style, RegularShape,Icon,Text} from 'ol/style';
import {Circle} from 'ol/geom';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {OSM, Vector as VectorSource} from 'ol/source';
import  * as interaction from 'ol/interaction';
import {Tile as TileLayer, Vector as VectorLayer} from