當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据）

發布時間：2023/12/8 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

說明：OpenLayers 3詳細官方API文檔：http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm

1.該例子為頁面在固定經緯度的情況下對地圖進行單個或者多個標點，并沒有從后臺數據庫獲取經緯度數據，之后會再更新通過json來實現與與數據庫實時進行標點。

2.首先我們還是先做好離線地圖，具體操作參照我的另外一篇博文：使用OpenLayers發布離線地圖

3.離線地圖實現了之后，新建一個image文件夾，把我們標注所需要用到的圖片放入其中，如下圖所示：

4.整個地圖文件夾格式變為：

5.index.html源碼如下所示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>根據經緯度實現單個描點</title><link href="./ol.css" rel="stylesheet" type="text/css" /><script src="./ol.js" type="text/javascript"></script><style type="text/css">body, html {border: none;padding: 0;margin: 0;}#menu {width: 100%;height: 20px;padding: 5px 10px;font-size: 14px;font-family: "微軟雅黑";left: 10px;text-align: center;}#mapCon {width: 100%;height: 600px;position: relative;}.ol-popup {position: absolute;background-color: white;-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 45px;left: -50px;}.ol-popup:after, .ol-popup:before {top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}.ol-popup:after {border-top-color: white;border-width: 10px;left: 48px;margin-left: -10px;}.ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px;}.ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px;}.ol-popup-closer:after {content: "?";}#popup-content {font-size: 14px;font-family: "微軟雅黑";}#popup-content .markerInfo {font-weight: bold;}</style> </head> <body> <div id="menu" style="font-weight:bold"></div> <div id="mapCon"><div id="popup" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer"></a><div id="popup-content"></div></div> </div> <script type="text/javascript">var beijing = ol.proj.fromLonLat([113.34, 23.07]);//示例標注點北京市的信息對象var featuerInfo = {geo: beijing,att: {//標注信息的標題內容title: "廣州市",//標注詳細信息鏈接titleURL: "http://www.openlayers.org/",//標注內容簡介text: "廣州（簡稱穗），別稱羊城、花城，廣東省省會，是國際大都市、國際商貿中心、國際綜合交通樞紐，首批沿海開放城市，也是南部戰區司令部駐地，是粵港澳大灣區、泛珠江三角洲經濟區的核心城市以及一帶一路的樞紐城市。",//標注的圖片imgURL: "./image/bj.jpg"}}/*** 實例化Map對象加載地圖,默認底圖加載天地圖*///地圖設置中心，設置為廣州var center=ol.proj.transform([113.271429,23.135336],'EPSG:4326','EPSG:3857');//創建地圖var map=new ol.Map({view:new ol.View({center:center,minZoom:7,//設置縮放的最大和最小級別maxZoom:13,zoom:7//設置默認加載的級別}),target:'mapCon'//要顯示地圖的DIV的ID});//添加一個使用離線瓦片地圖的層var offLineMap=new ol.layer.Tile({source:new ol.source.XYZ({url:'tile/{z}/{x}/{y}.png'//本例中地圖瓦片保存在當前目錄下的tile文件夾目錄下})});map.addLayer(offLineMap);/*** 創建標注樣式函數,設置image為圖標ol.style.Icon* @param {ol.Feature} feature 要素*/var createLabelStyle = function (feature) {return new ol.style.Style({image: new ol.style.Icon(/** @type {olx.style.IconOptions} */{//設置圖標點anchor: [0.5, 60],//圖標起點anchorOrigin: 'top-right',//指定x值為圖標點的x值anchorXUnits: 'fraction',//指定Y值為像素的值anchorYUnits: 'pixels',//偏移offsetOrigin: 'top-right',// offset:[0,10],//圖標縮放比例// scale:0.5,//透明度opacity: 0.75,//圖標的urlsrc: './image/blueIcon.png'}),text: new ol.style.Text({//位置textAlign: 'center',//基準線textBaseline: 'middle',//文字樣式font: 'normal 14px 微軟雅黑',//文本內容text: feature.get('name'),//文本填充樣式（即文字顏色）fill: new ol.style.Fill({ color: '#aa3300' }),stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })})});}//實例化Vector要素，通過矢量圖層添加到地圖容器中var iconFeature = new ol.Feature({//坐標點geometry: new ol.geom.Point(beijing),//名稱屬性name: '廣州市',//大概人口數（萬）population: 2115});iconFeature.setStyle(createLabelStyle(iconFeature));//矢量標注的數據源var vectorSource = new ol.source.Vector({features: [iconFeature]});//矢量標注圖層var vectorLayer = new ol.layer.Vector({source: vectorSource});map.addLayer(vectorLayer);/*** 實現popup的html元素*/var container = document.getElementById('popup');var content = document.getElementById('popup-content');var closer = document.getElementById('popup-closer');/*** 在地圖容器中創建一個Overlay*/var popup = new ol.Overlay({//要轉換成overlay的HTML元素element: container,//當前窗口可見autoPan: true,//Popup放置的位置positioning: 'bottom-center',//是否應該停止事件傳播到地圖窗口stopEvent: false,autoPanAnimation: {//當Popup超出地圖邊界時，為了Popup全部可見，地圖移動的速度duration: 250}});map.addOverlay(popup);/*** 添加關閉按鈕的單擊事件（隱藏popup）* @return {boolean} Don't follow the href.*/closer.onclick = function () {//未定義popup位置popup.setPosition(undefined);//失去焦點closer.blur();return false;};/*** 動態創建popup的具體內容* @param {string} title*/function addFeatrueInfo(info) {//新增a元素var elementA = document.createElement('a');elementA.className = "markerInfo";elementA.href = info.att.titleURL;//elementA.innerText = info.att.title;setInnerText(elementA, info.att.title);// 新建的div元素添加a子節點content.appendChild(elementA);//新增div元素var elementDiv = document.createElement('div');elementDiv.className = "markerText";//elementDiv.innerText = info.att.text;setInnerText(elementDiv, info.att.text);// 為content添加div子節點content.appendChild(elementDiv);//新增img元素var elementImg = document.createElement('img');elementImg.className = "markerImg";elementImg.src = info.att.imgURL;// 為content添加img子節點content.appendChild(elementImg);}/*** 動態設置元素文本內容（兼容）*/function setInnerText(element, text) {if (typeof element.textContent == "string") {element.textContent = text;} else {element.innerText = text;}}/*** 為map添加點擊事件監聽，渲染彈出popup*/map.on('click', function (evt) {//判斷當前單擊處是否有要素，捕獲到要素時彈出popupvar feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });if (feature) {//清空popup的內容容器content.innerHTML = '';//在popup中加載當前要素的具體信息addFeatrueInfo(featuerInfo);if (popup.getPosition() == undefined) {//設置popup的位置popup.setPosition(beijing);}}});/*** 為map添加鼠標移動事件監聽，當指向標注時改變鼠標光標狀態*/map.on('pointermove', function (e) {var pixel = map.getEventPixel(e.originalEvent);var hit = map.hasFeatureAtPixel(pixel);map.getTargetElement().style.cursor = hit ? 'pointer' : '';}); </script> </body> </html>

6.實現效果如下圖所示：

7.點擊該地圖標記后效果如下圖所示：

總結

以上是生活随笔為你收集整理的使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：计算机管理主分区改成逻辑分区,win10
下一篇：面试时怎样做精彩的自我介绍