2. 程式人生 > >基於openlayer4打點，點選點位彈出窗

基於openlayer4打點，點選點位彈出窗

阿新 • • 發佈：2019-02-05
// 初始給的中心點座標。 var centerX = 117.3626; var centerY = 32.9184; // 我們需要一個vector的layer來放置圖示 var layer = new ol.layer.Vector({ source : new ol.source.Vector() }) var map = new
ol.Map({ layers : [ new ol.layer.Tile({ // 載入網際網路地圖 source : new ol.source.OSM() }), layer ], target : 'map', view : new ol.View({ projection : 'EPSG:4326'
, center : [ 117.204883, 31.840285 ], zoom : 10 }) }); var lnglats = [ [117.204883, 31.840285], [117.2616140654, 31.8626171434], [117.2870114613, 31.8588879936
], [117.2822851546, 31.8862905440] ]; // 建立一個Feature，並設定好在地圖上的位置 var anchor = new ol.Feature({ geometry : new ol.geom.Point(lnglats[0]) }); // 設定樣式，在樣式中就可以設定圖示 anchor.setStyle(new ol.style.Style({ image : new ol.style.Icon({ src : 'img/1_03.png' }), //anchor: [0.5, 1] // 設定圖示位置 })); // 新增到之前的建立的layer中去 layer.getSource().addFeature(anchor); // 彈出窗容器DIV var container = document.getElementById("popup"); // 彈出窗內容DIV var content = document.getElementById("popup-content"); // 彈出窗關閉 var popupCloser = document.getElementById("popup-closer"); var overlay = new ol.Overlay({ //設定彈出框的容器 element : container, //是否自動平移，即假如標記在螢幕邊緣，彈出時自動平移地圖使彈出框完全可見 autoPan : true, autoPanAnimation : { duration : 250 //當Popup超出地圖邊界時，為了Popup全部可見，地圖移動的速度. } }); // openlayer4只有針對整個地圖事件監聽，可以通過以下方式達到對feature監聽，也可對feature自定義點選事件。 map.on('click', function(e) { //在點選時獲取畫素區域 var pixel = map.getEventPixel(e.originalEvent); map.forEachFeatureAtPixel(pixel, function(feature) { //coodinate存放了點選時的座標資訊 var coodinate = e.coordinate; console.log(coodinate); //設定彈出框內容，可以HTML自定義 content.innerHTML = coodinate; //設定overlay的顯示位置 overlay.setPosition(coodinate); //顯示overlay map.addOverlay(overlay); }); }); popupCloser.addEventListener('click', function() { overlay.setPosition(undefined); }); /** * 為map新增滑鼠移動事件監聽，當指向標註時改變滑鼠游標狀態 */ map.on('pointermove', function (e) { var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); map.getTargetElement().style.cursor = hit ? 'pointer' : ''; })

相關推薦

基於openlayer4打點，點選點位彈出窗

// 初始給的中心點座標。 var centerX = 117.3626; var centerY = 32.9184; // 我們需要一個vector的layer來放置圖示

佈局中同時使用Toolbar和EditText時，點選鍵盤彈出時標題欄被拉伸

在Toolbar中新增 android:fitsSystemWindows="true" 這時，如果我們的layout中包含可滾動的控制元件如ListView、ScrollView（即在鍵盤彈出時會

左側選單，點選右側彈出內容

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags" %> <%@taglib

1EditText初始不彈出軟鍵盤，只有游標顯示，點選再彈出；2android:imeOptions

部落格時間：2013-06-08 10:13  剛進來的時候，不彈出鍵盤，EditText 有個游標上面閃，證明是可編輯的，這個還是符合使用者習慣的，從使用者體驗的角度上講，還保留游標的閃動是好的。 解決方法1：（已經試過，證明可以） 在activity屬性中設

EditText初始不彈出軟鍵盤，只有游標顯示，點選再彈出

剛進來的時候，不彈出鍵盤，EditText 有個游標上面閃，證明是可編輯的，這個還是符合使用者習慣的，從使用者體驗的角度上講，還保留游標的閃動是好的。 解決方法1：（已經試過，證明可以） 在activity屬性中設定android:windowSoftInputMode="

dwz問題之動態生成的查詢帶回，點選沒有彈出彈框(動態生成的dom，點選不能彈出dialog)

一、問題 頁面通過點選事件，生成一個查詢帶回按鈕，點選這個按鈕，應該彈出彈框，實際上是頁面直接更換了連結。 二、原因 通過點選事件生成的按鈕，不能使用dwz的功能，原因是沒有繫結，需要再次繫結這些功能。 三、結果 在dwz的 dwz.ui.js

Android定位&地圖&導航——基於百度地圖，實現自定義圖示繪製並點選時彈出泡泡

public class MainActivity extends Activity { private EditText txtAddr; // 定位相關 LocationClient mLocClient; LocationData locData = nul

element-ui 點擊編輯彈出dialog組件中select組件綁定值改變，但是不觸發change事件

select http inf 視頻 log OS src AR gpo 代碼結構如下： 現象視頻如下： 現象原因：經過排查發現 此時點擊操作不觸發chang事件，後臺響應數據中沒有訂單取消原因orderCanleRemark字段，此時導致不觸發change事件，

VS程式設計，C#彈出窗顯示欄位資訊，分行，增加空格的一種方法。

‘\n’是換行； “    ”是填充的空格； aaaa是程式中定義的 int  資料，也可以是其它型別的資料； 注意各自的符號。最後一項可以不要，  MessageBox.Show("資料匯入完成"

SuperMap建立標註，點選標註彈窗顯示資訊

    var markers=new SuperMap.Layer.Markers("Markers",{});     var marker;     function processData(data) {   //呼叫了processData函式         ma

Vue2.x-01點選按鈕彈出子Vue元件，遍歷JSON展示資料

文章目錄 概述 實現過程 Step1: 父元件設定Button按鈕 Step2: 這裡使用了showHandlerFlag來控制子元件是否顯示，所裡需要在data中定義下這個變數 Step3: 引用宣告元件 Step4:

Android Studio ListView的item點選事件彈出AlertDialog，和item的滑動

首先看看效果圖： 點選彈出AlertDialog的確認框！ （一）第一步，建立一個xml檔案顯示item的佈局 student_item.xml <?xml version="1.0" encoding="utf-8"?> <LinearLa

2.1使用canvas畫個圓，每次點選畫布彈出提示框

<body><canvas id="canvas" width="500" height="500" style="border:dashed 1px"></canvas></body><script>var can

js如何實現點選一個按鈕顯示一個div，然後該div上有一個按鈕，點選此按鈕後隱藏，隱藏的同時顯示另外一個div，而在次彈出的div也有一個按鈕，點選後隱藏.

<button id="btn1" onclick="btn1()">報名</button> <div id="div1" style="background:#999999; display:none;"> <button id=

關於點選UIButton彈出鍵盤，並且鍵盤的上方還需新增UITextField或者UITextView的解決方法

最近在做一個專案的時候，有這樣一個需求，點選UIButton彈出鍵盤，鍵盤的上方還需新增一個輸入框（UITextField/UITextView）,開始的想法是直接設定輸入框的 inputAccessoryView,設定後發現鍵盤根本就沒顯示出來.經過無數次的修改與查詢

點擊鏈接彈出窗口的方法

通過 nes esc onu earch 四種 一行 位置 -- 【1、最基本的彈出窗口代碼】<SCRIPT LANGUAGE="javascript"><!--window.open (‘page.html‘)--></SCRIPT>因

js彈出瀏覽器視窗，並指定瀏覽器彈出大小

<!-JavaScript開啟新的瀏覽器視窗，--> <!-window.open([URL],[視窗名稱],[引數字串])-> <!-URL：可選引數，在視窗中要顯示網頁的網址或路徑。如果省略這個引數，或者它的值是空字串，那麼視窗就不顯示任何文件。視窗名稱：可

解決ios底部固定輸入框，獲取焦點時彈出輸入法鍵盤擋住輸入框

ios端比較常見的，就是在頁面底部固定的輸入框，如下，一旦獲取焦點，彈出的輸入法鍵盤就會把input輸入框完全擋住，解決方法很簡單，加上下面的幾行程式碼即可       $(".replay_text").on("click", functi

CMFCToolBar::ReplaceButton() 替換CMFCToolBarMenuButton控制元件 點選按鈕彈出選單問題

    最近使用MFC單文件做了一個專案，需要用到CMFCToolBar由於自己的按鈕是在太多了，所有又把相同的按鈕歸類也就是把相同的按鈕放在一個按鈕下，在點選這個按鈕的時候彈出合併的所有選項 問題1:在我點選有下拉項的按鈕右側(三角符號部分)時才會彈出

安裝weblogic完之後，快速啟動時彈出Could not create the Java Virtual Machine錯誤

版本：我的weblogic安裝包是wls1036_generic.jar，也就是weblogic 11g R1。 出現錯誤：安裝完後，當選擇快速啟動時，彈出Could not create the Java Virtual Machine錯誤。 Error