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的基礎虛擬機,具備基本的通用功能,主要包含了串口工具minicom,遠程登陸ssh,遠程傳輸filezilla,代碼編輯工具vscode。 虛擬機 文檔對對虛擬機做了一些基本要求,如下圖: 為了儘量在前期減少錯誤,應選擇 ...
  • 下載證書 申請證書 證書下載 文件格式為: PEM格式的證書文件。 PEM格式的證書文件是採用Base64編碼的文本文件,您可以根據需要將證書文件修改成其他格式。 KEY格式的證書私鑰文件。 安裝證書 登錄Linux 證書上傳到伺服器 新建存放證書的目錄 mkdir /usr/local/nginx ...
  • CentOS目前官網提供的下載版本有6、7、8,最新的版本為8,不過個人推薦CentOS 7 的版本,因為相比較於最新版本,版本7更加地穩定。而相比於版本6,版本7新增了很多的功能。CentOS 7 是目前主流的版本,穩定成熟,是大多數伺服器首選的版本。話不多說,直入主題。 下載centos官方鏡像 ...
  • 唉。下麵是我花了不知道多少個小時踩過的所有坑總結出來的血淚史,希望能幫你們少踩一些坑吧,正常來講一步一步下來就不會出現任何問題了。 背景 用的是百度雲的雲伺服器(其他雲伺服器同理),系統是Ubuntu 20.04 LTS,Mysql版本8.0+,需求是在Windows上開發,可以隨時遠程連接讀寫服務 ...
  • 分享嘉賓:張政 京東 演算法工程師 編輯整理:AMS 周金星 出品平臺:DataFunTalk 導讀: 內容生態建設是近幾年互聯網快速發展的關鍵動因,也是AI化的重點方向之一。本文主要分享在京東廣告業務下內容理解體系的建設情況,從標簽化、內容準入、質量美學評價等多個角度探討內容理解能力的應用;同時整體 ...
  • SQL的函數 函數的定義 函數是指一段可以直接被另一段程式調用的程式或代碼; 字元串函數 MySQL常用的字元串函數 函數 功能 concat(s1,s2,···sN) 字元串拼接,將s1···sN拼接為一個字元串 lower(str) 將字元串str全部轉換為小寫 upper(str) 將字元串s ...
  • 華為應用內支付服務(In-App Purchases,IAP)為開發者提供便捷的應用內支付體驗和簡便的接入流程。開發者的應用集成IAP SDK後,調用IAP SDK介面,啟動IAP收銀台,即可實現應用內支付。在集成過程中,開發者可能會遇到報錯的問題,這時我們可以通過查找日誌中的tag的方法對問題快速 ...
  • 今天把平臺屬性的管理基本完成了,後臺管理做到現在基本也開始熟悉,確實就是對ElementUI的一個熟練程度。 一.平臺屬性管理 1.動態展示數據 先把介面弄好,應該在第三級標題選擇後進行發請求 靜態頁面搭建 渲染數據 屬性值列表,用到一個新組件 tag,並且這裡有多個屬性值,所以要遍歷,既然要在裡面 ...
一周排行
    -Advertisement-
    Play Games
  • 背景 在瀏覽器中訪問本地靜態資源html網頁時,可能會遇到跨域問題如圖。 是因為瀏覽器預設啟用了同源策略,即只允許載入與當前網頁具有相同源(協議、功能變數名稱和埠)的內容。 WebView2預設情況下啟用了瀏覽器的同源策略,即只允許載入與主機相同源的內容。所以如果我們把靜態資源發佈到iis或者通過node ...
  • 最近看幾個老項目的SQL條件中使用了1=1,想想自己也曾經這樣寫過,略有感觸,特別拿出來說道說道。編寫SQL語句就像炒菜,每一種調料的使用都會影響菜品的最終味道,每一個SQL條件的加入也會影響查詢的執行效率。那麼 1=1 存在什麼樣的問題呢?為什麼又會使用呢? ...
  • 好久不見,我又回來了。 給大家分享一個我最近使用c#代碼操作ftp伺服器的代碼示例: 1 public abstract class FtpOperation 2 { 3 /// <summary> 4 /// FTP伺服器地址 5 /// </summary> 6 private string f ...
  • 一:背景 1. 講故事 過年喝了不少酒,腦子不靈光了,停了將近一個月沒寫博客,今天就當新年開工寫一篇吧。 去年年初有位朋友找到我,說他們的系統會偶發性崩潰,在網上也發了不少帖子求助,沒找到自己滿意的答案,讓我看看有沒有什麼線索,看樣子這是一個牛皮蘚的問題,既然對方有了dump,那就分析起來吧。 二: ...
  • 自己製作的一個基於Entity Framework Core 的資料庫操作攔截器,可以列印資料庫執行sql,方便開發調試,代碼如下: /// <summary> /// EF Core 的資料庫操作攔截器,用於在資料庫操作過程中進行日誌記錄和監視。 /// </summary> /// <remar ...
  • 本文分享自華為雲社區《Go併發範式 流水線和優雅退出 Pipeline 與 Cancellation》,作者:張儉。 介紹 Go 的併發原語可以輕鬆構建流數據管道,從而高效利用 I/O 和多個 CPU。 本文展示了此類pipelines的示例,強調了操作失敗時出現的細微之處,並介紹了乾凈地處理失敗的 ...
  • 在上篇文章中,我們介紹到在多線程環境下,如果編程不當,可能會出現程式運行結果混亂的問題。出現這個原因主要是,JMM 中主記憶體和線程工作記憶體的數據不一致,以及多個線程執行時無序,共同導致的結果。 ...
  • 1、下載安裝包首先、進入官網下載安裝包網址:https://www.python.org/downloads/windows/下載步驟:進入下載地址,根據自己的電腦系統選擇相應的python版本 選擇適配64位操作系統的版本(查看自己的電腦操作系統版本), 點擊下載安裝包 也可以下載我百度雲分享的安 ...
  • 簡介 git-commit-id-maven-plugin 是一個maven 插件,用來在打包的時候將git-commit 信息打進jar中。 這樣做的好處是可以將發佈的某版本和對應的代碼關聯起來,方便查閱和線上項目的維護。至於它的作用,用官方說法,這個功能對於大型分散式項目來說是無價的。 功能 你 ...
  • 序言 在數字時代,圖像生成技術正日益成為人工智慧領域的熱點。 本討論將重點聚焦於兩個備受矚目的模型:DALL-E和其他主流AI繪圖方法。 我們將探討它們的優勢、局限性以及未來的發展方向。通過比較分析,我們期望能夠更全面地瞭解這些技術,為未來的研究和應用提供啟示。 Q: 介紹一下 dall-e Ope ...