OpenLayers 點擊顯示經緯度Demo

来源:https://www.cnblogs.com/smileZAZ/archive/2022/06/17/16386379.html
-Advertisement-
Play Games

這裡給大家分享我在OpenLayers 地圖開發工作中總結出的一下代碼和註意點，希望對大家有所幫助 效果如下： 核心代碼展示：附帶講解註釋 var map = new ol.Map({ // 初始化地圖 target: 'map',// 選擇地圖對象 layers: [ new ol.layer.T ...


這裡給大家分享我在OpenLayers 地圖開發工作中總結出的一下代碼和註意點，希望對大家有所幫助

效果如下：

核心代碼展示：附帶講解註釋

 var map = new ol.Map({ // 初始化地圖
            target: 'map',// 選擇地圖對象
            layers: [
                new ol.layer.Tile({// 初始化Tile外部圖層
                    source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
                        url:
                            'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', // XYZ切片服務地址
                        wrapX: false
                    })
                }),
                new ol.layer.Tile({// 初始化Tile外部圖層
                    source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
                        url:
                            'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服務地址
                        wrapX: false
                    })
                })
            ],
            view: new ol.View({ 
                projection: 'EPSG:4326', //設置地圖坐標系
                center: [113.87, 22.691],//設置地圖中心點
                zoom: 12//設置地圖層級
            }),
        });
        const BGLayer = new ol.layer.Tile({// 初始化Tile外部圖層
            source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
                url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服務地址
                wrapX: false
            })
        })
        BGLayer.setVisible(false) //設置圖層顯示隱藏
        map.addLayer(BGLayer)//添加圖層
        //實例化矢量點要素，通過矢量圖層添加到地圖容器中
        //這樣就實現了預先載入圖文標註
        var iconFeature = new ol.Feature();
        //設置點要素樣式
        iconFeature.setStyle(createLabelStyle(iconFeature));
        //矢量標註的數據源
        var vectorSource = new ol.source.Vector({
            features: [iconFeature]
        });
        //矢量標註圖層
        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });
        map.addLayer(vectorLayer);
        //矢量標註樣式設置函數，設置image為圖標ol.style.Icon
        function createLabelStyle(feature) {
            return new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [40, 42],
                    scale: 0.5, // 圖標縮小顯示
                    anchorOrigin: 'top-right', // 標註樣式的起點位置
                    anchorXUnits: 'pixels', // X方向單位：分數
                    anchorYUnits: 'pixels', // Y方向單位：像素
                    offsetOrigin: 'bottom-left', // 偏移起點位置的方向
                    opacity: 1, // 透明度
                    src: 'dian.png'  //圖標的URL
                }),
                text: new ol.style.Text({
                    textAlign: 'center',            //位置
                    textBaseline: 'middle',         //基準線
                    font: 'normal 14px 微軟雅黑',    //文字樣式
                    fill: new ol.style.Fill({       //文本填充樣式（即文字顏色)
                        color: '#000'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#F00',
                        width: 2
                    })
                })
            });
        }
        var newFeature = new ol.Feature({
            geometry: new ol.geom.Point([0,0])  //幾何信息
        });
        newFeature.setStyle(createLabelStyle(newFeature));      //設置要素樣式
        vectorSource.addFeature(newFeature);
        map.on('click', function (evt) {
            var coordinate = evt.coordinate;        //滑鼠單擊點的坐標
            //新建一個要素ol.Feature
            newFeature.set('geometry',new ol.geom.Point(coordinate))
            document.getElementsByClassName("list-box")[0].innerHTML = '<p> 經度：' + coordinate[0].toFixed(3) + '     緯度：' + coordinate[1].toFixed(3) + '</p>'
        });
        map.on('moveend', function (evt) {
            if (map.getView().getZoom() >= 16) {
                BGLayer.setVisible(true)
            } else {
                BGLayer.setVisible(false)
            }
        })

 點點陣圖片：

 完整demo代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
    <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
    <title>點擊出點位</title>
    <style>
        *{padding: 0;margin: 0}
        .list-box {
            width: 300px;
            height: 100px;
            background: white;
            box-sizing: border-box;
            padding: 20px;
            line-height: 60px;
            overflow: auto;
            position: fixed;
            right: 10px;
            top: 10px;
            z-index: 999;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <div class="list-box">
    </div>
    <script>
        var map = new ol.Map({ // 初始化地圖
            target: 'map',// 選擇地圖對象
            layers: [
                new ol.layer.Tile({// 初始化Tile外部圖層
                    source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
                        url:
                            'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', // XYZ切片服務地址
                        wrapX: false
                    })
                }),
                new ol.layer.Tile({// 初始化Tile外部圖層
                    source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
                        url:
                            'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服務地址
                        wrapX: false
                    })
                })
            ],
            view: new ol.View({ 
                projection: 'EPSG:4326', //設置地圖坐標系
                center: [113.87, 22.691],//設置地圖中心點
                zoom: 12//設置地圖層級
            }),
        });
        const BGLayer = new ol.layer.Tile({// 初始化Tile外部圖層
            source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
                url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服務地址
                wrapX: false
            })
        })
        BGLayer.setVisible(false) //設置圖層顯示隱藏
        map.addLayer(BGLayer)//添加圖層
        //實例化矢量點要素，通過矢量圖層添加到地圖容器中
        //這樣就實現了預先載入圖文標註
        var iconFeature = new ol.Feature();
        //設置點要素樣式
        iconFeature.setStyle(createLabelStyle(iconFeature));
        //矢量標註的數據源
        var vectorSource = new ol.source.Vector({
            features: [iconFeature]
        });
        //矢量標註圖層
        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });
        map.addLayer(vectorLayer);
        //矢量標註樣式設置函數，設置image為圖標ol.style.Icon
        function createLabelStyle(feature) {
            return new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [40, 42],
                    scale: 0.5, // 圖標縮小顯示
                    anchorOrigin: 'top-right', // 標註樣式的起點位置
                    anchorXUnits: 'pixels', // X方向單位：分數
                    anchorYUnits: 'pixels', // Y方向單位：像素
                    offsetOrigin: 'bottom-left', // 偏移起點位置的方向
                    opacity: 1, // 透明度
                    src: 'dian.png'  //圖標的URL
                }),
                text: new ol.style.Text({
                    textAlign: 'center',            //位置
                    textBaseline: 'middle',         //基準線
                    font: 'normal 14px 微軟雅黑',    //文字樣式
                    fill: new ol.style.Fill({       //文本填充樣式（即文字顏色)
                        color: '#000'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#F00',
                        width: 2
                    })
                })
            });
        }
        var newFeature = new ol.Feature({
            geometry: new ol.geom.Point([0,0])  //幾何信息
        });
        newFeature.setStyle(createLabelStyle(newFeature));      //設置要素樣式
        vectorSource.addFeature(newFeature);
        map.on('click', function (evt) {
            var coordinate = evt.coordinate;        //滑鼠單擊點的坐標
            //新建一個要素ol.Feature
            newFeature.set('geometry',new ol.geom.Point(coordinate))
            document.getElementsByClassName("list-box")[0].innerHTML = '<p> 經度：' + coordinate[0].toFixed(3) + '     緯度：' + coordinate[1].toFixed(3) + '</p>'
        });
        map.on('moveend', function (evt) {
            if (map.getView().getZoom() >= 16) {
                BGLayer.setVisible(true)
            } else {
                BGLayer.setVisible(false)
            }
        })
    </script>
</body>

</html>

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • RK3568虛擬機基礎環境搭建之更新源、安裝網路工具、串口調試、網路連接、文件傳輸、安裝vscode和samba共用服務
    鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 前言 開始搭建RK3568的基礎虛擬機，具備基本的通用功能，主要包含了串口工具minicom，遠程登陸ssh，遠程傳輸filezilla，代碼編輯工具vscode。 虛擬機 文檔對對虛擬機做了一些基本要求，如下圖： 為了儘量在前期減少錯誤，應選擇 ...
  • 如何在Nginx上 安裝SSL證書
    下載證書 申請證書 證書下載 文件格式為： PEM格式的證書文件。 PEM格式的證書文件是採用Base64編碼的文本文件，您可以根據需要將證書文件修改成其他格式。 KEY格式的證書私鑰文件。 安裝證書 登錄Linux 證書上傳到伺服器 新建存放證書的目錄 mkdir /usr/local/nginx ...
  • VMware 虛擬機安裝CentOS鏡像詳細步驟
    CentOS目前官網提供的下載版本有6、7、8，最新的版本為8，不過個人推薦CentOS 7 的版本，因為相比較於最新版本，版本7更加地穩定。而相比於版本6，版本7新增了很多的功能。CentOS 7 是目前主流的版本，穩定成熟，是大多數伺服器首選的版本。話不多說，直入主題。 下載centos官方鏡像 ...
  • Ubuntu如何安裝Mysql+啟用遠程連接[完整版]
    唉。下麵是我花了不知道多少個小時踩過的所有坑總結出來的血淚史，希望能幫你們少踩一些坑吧，正常來講一步一步下來就不會出現任何問題了。 背景 用的是百度雲的雲伺服器（其他雲伺服器同理），系統是Ubuntu 20.04 LTS，Mysql版本8.0+，需求是在Windows上開發，可以隨時遠程連接讀寫服務 ...
  • 京東張政：內容理解在廣告場景下的實踐和探索
    分享嘉賓：張政 京東 演算法工程師 編輯整理：AMS 周金星 出品平臺：DataFunTalk 導讀： 內容生態建設是近幾年互聯網快速發展的關鍵動因，也是AI化的重點方向之一。本文主要分享在京東廣告業務下內容理解體系的建設情況，從標簽化、內容準入、質量美學評價等多個角度探討內容理解能力的應用；同時整體 ...
  • SQL的函數
    SQL的函數 函數的定義 函數是指一段可以直接被另一段程式調用的程式或代碼； 字元串函數 MySQL常用的字元串函數 函數 功能 concat(s1,s2,···sN) 字元串拼接，將s1···sN拼接為一個字元串 lower(str) 將字元串str全部轉換為小寫 upper(str) 將字元串s ...
  • 【FAQ】調用應用內支付SDK時報錯，如何用tag對問題進行排查和分析
    華為應用內支付服務（In-App Purchases，IAP）為開發者提供便捷的應用內支付體驗和簡便的接入流程。開發者的應用集成IAP SDK後，調用IAP SDK介面，啟動IAP收銀台，即可實現應用內支付。在集成過程中，開發者可能會遇到報錯的問題，這時我們可以通過查找日誌中的tag的方法對問題快速 ...
  • vue大型電商項目尚品匯（後臺篇）day03
    今天把平臺屬性的管理基本完成了，後臺管理做到現在基本也開始熟悉，確實就是對ElementUI的一個熟練程度。 一.平臺屬性管理 1.動態展示數據 先把介面弄好，應該在第三級標題選擇後進行發請求 靜態頁面搭建 渲染數據 屬性值列表，用到一個新組件 tag，並且這裡有多個屬性值，所以要遍歷，既然要在裡面 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類