vue中使用openlayers开发离线地图

最新推荐文章于 2024-08-21 10:53:21 发布

置顶

JINMINGIS

最新推荐文章于 2024-08-21 10:53:21 发布

阅读量1.9k

点赞数

分类专栏： Gis 文章标签：前端

本文链接：https://blog.csdn.net/Yuoliku/article/details/118539061

版权

本文介绍如何在Vue项目中利用OpenLayers库开发离线地图，详细阐述了marker点位标记及点击图标弹窗功能的实现过程，提供完整的代码示例，并提及了使用太乐下载器获取瓦片地图的参考。

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

最近在使用openlayers开发离线地图，但是全英文的文档属实有点难顶，本文代码主要就是实现marker点位标记以及点击图标会显示弹窗，参考博客写的非常的详细也是我找到比较好的。
文中用到的瓦片地图是使用太乐下载器下载的，仅供参考
完整代码

在这里插入代码片
<template>
  <div>
    <div ref="olMap" id="map" class="ol-map"/>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content" class="popup-content"></div>
    </div>

  </div>
</template>
<script>
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import {Map, View, Feature} from 'ol'
import Overlay from 'ol/Overlay'
import {
  Style,
  Stroke,
  Fill,
  Icon,
  Text
} from 'ol/style'
import {Point} from 'ol/geom'
import {Cluster} from 'ol/source'
import {fromLonLat} from 'ol/proj'
// import {toStringHDMS} from 'ol/coordinate'

export default {
  name: 'defineMap',
  data () {
    return {
      imgUrl: require('../../src/assets/pointer.png'),
      map: null,
      pointLayer: null,
      diffLayer: null,
      overlay: null,
      clusterData:null,
    }
  },
  mounted () {
    this.init()
    this.diffLayer = new Vec