Vue+Openlayers加載OSM、加載天地圖

文章目錄

  • 1. 介紹
  • 2. 加載底圖
    • 2.1 加載默認OSM地圖
    • 2.2 加載天地圖

1. 介紹

Openlayers官網:https://openlayers.org/

安裝依賴:npm i ol

2. 加載底圖

參考博客:
vue+openlayers環境配置:https://blog.csdn.net/cuclife/article/details/126195754
加載天地圖:https://blog.csdn.net/weixin_43390116/article/details/122326847

2.1 加載默認OSM地圖

主要的HomeView.vue內容:

<template><div class="home"><div id="map"></div></div>
</template><script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";export default {name: "HomeView",components: {},data() {return {map: null,};},methods: {initMap() {this.map = new Map({target: "map",layers: [new Tile({source: new OSM({wrapX: true,}),}),],view: new View({projection: "EPSG:4326",center: [114.064839, 22.548857],zoom: 8,}),});},},mounted() {this.initMap();},
};
</script>
<style scoped>
.home,
#map {height: 100%;width: 100%;
}
</style>

需確保網絡通暢可以訪問OSM。
效果圖:
在這里插入圖片描述

2.2 加載天地圖

HomeView.vue主要內容(需要更換token):

<template><div class="home"><div id="map"></div></div>
</template><script>
import "ol/ol.css";
import { Map, View } from "ol";
import { defaults as Defaults } from "ol/control.js";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
export default {name: "HomeView",components: {},data() {return {map: null,};},methods: {initMap() {let token = "xxxx換成自己申請的天地圖tokenxxxx";let url_vec = `http://t4.tianditu.com/DataServer?T=vec_w&tk=${token}&x={x}&y={y}&l={z}`;let url_cav = `http://t4.tianditu.com/DataServer?T=cva_w&tk=${token}&x={x}&y={y}&l={z}`;var source = new XYZ({url: url_vec,});var tileLayer = new TileLayer({title: "矢量圖層",source,});var sourceCav = new XYZ({url: url_cav,});var tileLayerCav = new TileLayer({title: "標注圖層",source: sourceCav,});this.map = new Map({target: "map",layers: [tileLayer, tileLayerCav],view: new View({projection: "EPSG:4326",center: [118.91, 32.1],zoom: 14,maxZoom: 18,minZoom: 1,}),//不顯示地圖自帶控件(左上角的加號、減號)controls: new Defaults({zoom: false,rotate: false,}),});},},mounted() {this.initMap();},
};
</script>
<style scoped>
.home,
#map {height: 100%;width: 100%;
}
</style>

效果圖:

在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/88083.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/88083.shtml
英文地址,請注明出處:http://en.pswp.cn/web/88083.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python處理電子表格文件庫之pyexcel使用詳解

概要 pyexcel是一個功能強大的Python第三方庫,專門用于處理各種格式的電子表格文件。核心價值在于提供了統一的接口來讀取、寫入和操作Excel、CSV、ODS等多種電子表格格式,極大簡化了數據處理工作流程。與傳統的單一格式處理庫不同,pyexcel采用了插件化架構,使開發者能夠通…

【網絡安全】惡意 Python 包“psslib”仿冒 passlib,可導致 Windows 系統關閉

文章目錄惡意 Python 包“psslib”仿冒 passlib如何避免psslib的威脅惡意 Python 包“psslib”仿冒 passlib Socket 的威脅研究團隊發現了一個名為 psslib 的惡意 Python 包&#xff0c;旨在以提供密碼安全功能為幌子突然關閉 Windows 系統。 該軟件包由威脅行為者使用別名 u…

ai之對接電信ds后端服務,通過nginx代理轉發https為http,對外請求,保持到達第三方后請求頭不變

前置環境&#xff1a; 在微信小程序中嵌入H5頁面&#xff08;智能客服&#xff09;&#xff0c;需要讓h5頁面在https的域名服務器上。即通過 nginx 部署成web服務&#xff0c;還得配置域名和端口443訪問。電信的第三方deepseek服務 &#xff0c;只接收http請求&#xff0c;暫未…

第十四節:Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - Flask 后端 生產部署講解

Vben5 系列文章目錄 ?? 基礎篇 ? 第一節:Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 ? 第二節:Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入門 - Python Flask 后端開發詳解(附源碼) ? 第三節:Vben Admin 最新 v5.0 (vben5) + Python Flask 快速入…

Unity開發如何解決iOS閃退問題

一、iOS閃退常見原因及排查方法1. 內存問題&#xff08;最常見原因&#xff09; 癥狀表現&#xff1a; 設備發熱后閃退 加載大型場景時崩潰 控制臺出現EXC_RESOURCE RESOURCE_TYPE_MEMORY日志 解決方案&#xff1a; // 內存監控代碼 void Update() { Debug.Log($"內存使用…

【機器學習筆記 Ⅲ】5 強化學習

強化學習&#xff08;Reinforcement Learning, RL&#xff09; 強化學習是機器學習的一個分支&#xff0c;其核心思想是讓智能體&#xff08;Agent&#xff09;通過與環境&#xff08;Environment&#xff09;的交互學習最優策略&#xff08;Policy&#xff09;&#xff0c;以最…

pytorch深度學習-卷積神經網絡CNN-MNIST-gpu加速

一、為什么需要 CNN&#xff1f;從圖像識別的 “麻煩” 說起假設你想讓電腦識別一張圖片里有沒有貓。 如果用傳統神經網絡&#xff1a;一張 100100 的彩色圖片&#xff0c;有 100100330000 個像素點&#xff0c;每個像素點都是一個輸入神經元。傳統網絡需要每個輸入神經元和隱藏…

【阿里巴巴JAVA開發手冊】IDE的text file encoding設置為UTF-8; IDE中文件的換行符使用Unix格式,不要使用Windows格式。

問題&#xff1a;當使用 IDEA SSH 遠程開發時&#xff0c;SFTP 同步的 Windows 本地編輯的 config/plugin_config 文件文本內容中 “換行符”與 Unix、Linux 的文件文本內容換行符字符集不一致&#xff0c;導致 docker 容器中自定義 /opt/seatunnel/bin/install_plugin 在執行以…

自動駕駛ROS2應用技術詳解

自動駕駛ROS2應用技術詳解 目錄 自動駕駛ROS2節點工作流程自動駕駛感知融合技術詳解多傳感器數據同步技術詳解ROS2多節點協作與自動駕駛系統最小節點集 1. 自動駕駛ROS2節點工作流程 1.1 感知輸出Topic的后續處理 在自動駕駛系統中&#xff0c;感知節點輸出的各種Topic會被…

Redis底層實現原理之訂閱發布機制

文章目錄1. 通知類型2. 實現原理2.1 Pub/Sub2.1.1 基礎知識點2.1.2 頻道和訂閱者的存儲通知原理2.1.3 鍵空間通知2.1.4 客戶端消費2.1.5 缺陷2.2 Redis Stream2.2.1 基礎知識點2.2.2 基礎數據結構2.2.3 消費者組管理2.2.4 消息和消費者持久化2.2.5 消息生產和消費2.2.6 消費者拉…

【MATLAB代碼】AOA與TDOA混合定位例程,自適應基站數量,二維,可調節錨點數量。訂閱專欄后,可直接查看matlab源代碼

本文給出一個matlab代碼,用于在二維平面上,使用AOA的角度測量和TDOA的到達時間差的測量,來達到對未知點的精確定位。最后輸出定位示意圖、真實點坐標、僅AOA定位坐標與誤差、僅TDOA定位的坐標與誤差、AOA+TDOA混合定位的坐標與誤差。訂閱專欄后可直接查看源代碼,粘貼到MATL…

Node.js 所有主要版本的發布時間、穩定版本(Stable)和長期支持版本(LTS) 的整理

以下是 Node.js 所有主要版本的發布時間、穩定版本&#xff08;Stable&#xff09;和長期支持版本&#xff08;LTS&#xff09; 的整理&#xff0c;涵蓋從早期版本到當前最新版本的信息。 &#x1f4c5; Node.js 版本發布規律 每 6 個月發布一個新主版本&#xff08;偶數月&am…

【牛客刷題】小紅的v三元組

文章目錄 一、題目介紹1.1 題目描述1.2 輸入描述1.3 輸出描述1.4 示例二、解題思路2.1 核心算法設計2.2 性能優化關鍵2.3 算法流程圖三、算法實現四、算法分析4.1 時間復雜度4.2 空間復雜度4.3 正確性證明五、為什么選擇離散化+樹狀數組的解法?5.1 問題本質分析5.2 解法設計思…

c語言學習_函數遞歸

今天學習函數遞歸。函數遞歸通俗來說就是函數自己調用自己&#xff0c;遞歸的主要思考方式在于&#xff1a;把大事化小。例子&#xff1a;接受一個整型值&#xff0c;按照順序打印它的每一位。void print(unsigned int n) {if (n > 9){print(n / 10);}printf("%d"…

Bash與Zsh與Fish:在Linux中你應該使用哪個Shell

命令行 shell 是與操作系統交互的重要工具&#xff0c;使用戶能夠高效地執行命令、自動化任務和運行腳本。 雖然有各種外殼選項可供選擇&#xff0c;但Bash、Zsh和Fish作為最受歡迎的選擇脫穎而出&#xff0c;每種都提供獨特的功能&#xff0c;因此理解它們的差異對于選擇適合…

Peek-Ubuntu上Gif錄制工具-24.04LTS可裝

安裝方法&#xff08;Ubuntu24.04.2LTS測試通過&#xff09; sudo apt update sudo apt install peek純無語&#xff0c;&#x1f9df; 一個軟件&#xff0c;仨網站&#xff0c;四份重復的教程&#xff1a; 添加 PPA更新源報錯&#xff08;不支持 noble&#xff09;搜到 4 篇教…

DVWA靶場通關筆記-驗證碼繞過reCAPTCHA(High級別)

目錄 一、reCAPTCHA 二、代碼審計&#xff08;High級別&#xff09; 1、滲透準備 &#xff08;1&#xff09;配置security為High級別。 &#xff08;2&#xff09;配置RECAPTCHA參數 &#xff08;3&#xff09;再次打開靶場 2、源碼分析 &#xff08;1&#xff09;inde…

【Java安全】RMI基礎

文章目錄介紹實現服務端 Server客戶端 Client通信過程數據端與注冊中心(1099 端口)建立通訊客戶端與服務端建立 TCP 通訊客戶端序列化傳輸 調用函數的輸入參數至服務端總結介紹 RMI 全稱 Remote Method Invocation&#xff08;遠程方法調用&#xff09;&#xff0c;即在一個 J…

MySQL索引面試問題梳理

本文系統剖析MySQL索引的核心機制&#xff1a; ?索引分類全景圖?&#xff1a;詳解聚簇/非聚簇索引的邏輯差異與物理存儲特點?B樹的統治性優勢?&#xff1a;通過對比Hash/B樹揭示InnoDB的底層選擇邏輯 一、索引分類的常見困惑解析 1. 按物理存儲分類 類型 存儲內容 數量限…

SSH密鑰 與 Ed25519密鑰 是什么關系

SSH 密鑰與 Ed25519 密鑰的關系可以從技術實現和應用場景兩個角度理解。簡而言之&#xff1a;Ed25519 密鑰是 SSH 密鑰的一種類型&#xff0c;用于在 SSH 協議中實現安全認證。以下是詳細解釋&#xff1a; 1. SSH 密鑰的通用概念 SSH&#xff08;Secure Shell&#xff09;是一…