Vue+OpenLayers加载天地图

本文介绍如何在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
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值