Vue+OpenLayers加载天地图

最新推荐文章于 2025-07-09 14:52:46 发布

原创

最新推荐文章于 2025-07-09 14:52:46 发布 · 8.3k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#Openlayers #Vue #天地图 #Openlayers加载天地图 #ol

本文介绍如何在Vue项目中结合OpenLayers库，实现加载天地图的功能，并详细说明了如何标注用户位置以及如何自动定位到用户的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需要，实现功能:加载天地图，标注用户位置，定位到用户位置

<template>
  <div id="map" ref="rootmap">
    <div id="mouse-position"></div>
  </div>
</template>
<script>
import 'ol/ol.css'
import {get as getProjection} from 'ol/proj'
import {getWidth,getTopLeft} from 'ol/extent'
import View from 'ol/View'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import WMTS from 'ol/source/WMTS'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import olStyle from 'ol/style/Style'
import olstyleIcon from 'ol/style/Icon'
import olstyleText from 'ol/style/Text'
import olstyleFill from 'ol/style/Fill'
import olstyleStroke from 'ol/style/Stroke'
import {defaults as defaultControls} from 'ol/control'
import MousePosition from 'ol/control/MousePosition'
import {createStringXY} fr