在 Vue 2 中使用 OpenLayers 将韶关市博物馆的位置在天地图底图上渲染为点图形要素：

最新推荐文章于 2025-01-08 09:47:05 发布

aa小小

最新推荐文章于 2025-01-08 09:47:05 发布

阅读量253

点赞数

文章标签： vue.js openlayers 天地图 gis

本文链接：https://blog.youkuaiyun.com/qq_34752068/article/details/130625287

版权

这篇博客介绍了如何在Vue 2应用中使用OpenLayers库，结合天地图底图，将韶关市博物馆的位置渲染为地图上的点图形要素。首先，安装ol和@types/ol依赖，接着在Vue组件中引入OpenLayers组件，创建地图对象设置天地图XYZ图层，然后创建矢量图层，最后通过ol.geom.Point和ol.Feature创建点要素并添加到矢量图层显示。

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

安装依赖

首先，需要安装 ol 和 @types/ol 这两个依赖来引入 OpenLayers 库和类型声明文件：

bash
npm install ol @types/ol --save

引入组件

在 Vue 组件中引入所需的 OpenLayers 组件：


import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Point from 'ol/geom/Point';
import Feature from 'ol/Feature';
import Icon from 'ol/style/Icon';
import Style from 'ol/style/Style';

创建地图对象

创建一个地图对象，并设置天地图 XYZ 图层作为底图：

const map = new Map({
  target: 'map', // 地图容器元素的 ID
  layers: [
    new TileLayer({
      source: new XYZ({
        url:
          'http://t4.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y