OpenLayers學習筆記（六）— 拖拽疊加層overlayer

阿新 • • 發佈：2018-12-28

是在官網例子基礎上增加的拖拽功能

GitHub:八至

作者：狐狸家的魚

本文連結：拖拽疊加層overlayer

全部程式碼

<!DOCTYPE html>
<html>
  <head>
    <title>Icon Symbolizer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for 
 old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
      #map {
        position: relative;
      }
      #popup {
        cursor: pointer;
      }
      .popupStyle{
          position:relative;
        width:100px;
        height:100px;      
        text 
-align:center;
        line-height:100px;
        color:white;
        background-color:rgba(0,0,0,0.4);
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="popup"><div class="popupStyle">Null Island</div></div>
    
    <script>
      var 
 element = document.getElementById('popup');
      var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([0, 0]),
        name: 'Null Island'      });
        var lineStyle = new ol.style.Style({
          stroke: new ol.style.Stroke({ 
              color: '#ffcc33', 
              width: 3,
              lineDash:[10,10]
            })
        });
        var line = new ol.geom.LineString([0,0],[0,0]);
      var lineFeature = new ol.Feature(line);
      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
        }))
      });

      iconFeature.setStyle(iconStyle);

      var vectorSource = new ol.source.Vector({
        features: [iconFeature,lineFeature]
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style:[lineStyle],
        updateWhileInteracting: true,//自動更新位置
      });

      var rasterLayer = new ol.layer.Tile({
        source: new ol.source.TileJSON({
          url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
          crossOrigin: ''
        })
      });

      var map = new ol.Map({
        layers: [rasterLayer, vectorLayer],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [0, 0],
          zoom: 3
        })
      });
     
      
      var popup = new ol.Overlay({
        element: element,
        positioning: 'bottom-center',
        stopEvent: false,
        dragging: false,
        offset: [0, -50]
      });
      popup.setPosition([0,0]);
      map.addOverlay(popup);

      // display popup on click
      var dragPan;
      map.getInteractions().forEach(function(interaction){
        if (interaction instanceof ol.interaction.DragPan) {
          dragPan = interaction;  
        }
      });

      element.addEventListener('mousedown', function(evt) {
        dragPan.setActive(false);
        popup.set('dragging', true);
        console.info('start dragging');
      });
      // var translateLine = new ol.interaction.Translate({
      //   //features:new ol.Collection([lineFeature])
      //   layers:new ol.Collection([popup])
      // });
      // map.addInteraction(translateLine);

      // var coord;

      // translateLine.on('translatestart',function (evt){
      //   coord = popup.getCoordinates();
      // });
      // translateLine.on('translating', function (evt) {
      //   line.setCoordinates([coord, evt.coordinate]);
      // });
      map.on('pointermove', function(evt) {
          var startPoint=iconFeature.getGeometry().getCoordinates();
        if (popup.get('dragging')) {
          var dd2=map.getPixelFromCoordinate(evt.coordinate);
          var newX=dd2[0]-0;//減去偏移量
          var newY=dd2[1]-(-50);
          var newPoint=map.getCoordinateFromPixel([newX,newY]);
          popup.setPosition(newPoint);
              lineFeature.getGeometry().setCoordinates([startPoint,evt.coordinate]);
      //   }
            
        }
      });
      map.on('pointerup', function(evt) {
        if (popup.get('dragging') === true) {
          console.info('stop dragging');
          dragPan.setActive(true);
          popup.set('dragging', false);
        }
      });
    </script>
  </body>
</html>

OpenLayers學習筆記（六）— 拖拽疊加層overlayer

是在官網例子基礎上增加的拖拽功能 GitHub:八至作者：狐狸家的魚本文連結：拖拽疊加層overlayer 全部程式碼 <!DOCTYPE html> <html> <head> <title>Icon

MySQL學習筆記（六）—— MySQL自連接

概念 cor 子查詢 ron 表操作例子質量 _id order by 有的時候我們需要對同一表中的數據進行多次檢索,這個時候我們可以使用之前學習過的子查詢,先查詢出需要的數據,再進行一次檢索。例如:一張products表,有產品id,供應商id(vend_

學習筆記（六）

tde 監聽文本 ren 頁面 define www 顯示 back BUG集錦：1. storage on 事件監聽必須兩個頁面同時打開，且處於服務器訪問狀態2. submit 和 button 不能套在 a 裏面，否則 submit 事件將消失3. 新建 Object

機器學習筆記（六）邏輯回歸

邏輯回歸 alt 表示結果不變改變最小值 nbsp 可能性一、邏輯回歸問題二分類的問題為是否的問題，由算出的分數值，經過sign函數輸出的是（+1，-1），想要輸出的結果為一個幾率值，則需要改變函數模型，其中，，則邏輯回歸的函數為二、邏輯回歸錯誤評價線性

jquery學習筆記（六）插件的編寫

function jquery 命名方式一、對jQuery對象的擴展;(function($){ $.fn.extend( { fun1:abc,fun2:1bc … } )})(jQuery)二、對jQuery本身的擴展，相當於靜態方法;(function($){ $

Python學習筆記（六）map/reduce

code image 但是 oat tools col .com 參數 map() 摘抄：https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143178

Unity3D之Mecanim動畫系統學習筆記（六）：使用腳本控制動畫

ont nim 復制代碼 info rip esc enter machine images 控制人物動畫播放這裏我重新弄了一個簡單的場景和新的Animator Controller來作為示例。下面先看看Animator Controller的配置：人物在站

如鵬網學習筆記（六）ADO.Net基礎

direct 問題 .... 數據庫連接 sta adapter query 寫到數據類型 ADO.Net基礎一、ADO.Net簡介　　1，程序要通過SQL語句自動化的操作數據庫，必須要用一個類庫，　　　　類庫要提供execute("insert into ...

.net core 2.0學習筆記（六）：Remoting核心類庫RealProxy遷移

ride dispatch 包含 void reflect 既然 splay creat （六）在學習.net core的過程中，我們已經明確被告知，Remoting將不會被支持。官方的解釋是，.net framework 類型包含了太多的Runtime的內容，是

Python學習筆記（六）

範圍規則代碼遞歸 none lsit 允許 urn 簡介一、函數簡介　　函數可以看做是程序的組織的一種方式，是功能代碼塊的一種抽象和封裝二、函數定義　　def 函數名():　　　　功能代碼語句　　　　return 　　函數在遇到return會終止整個函數，如

java學習筆記（六）：變量類型

animal 單獨使用 div 位置 fin strong pub 局部變量變量聲明 java一共三種變量：局部變量（本地變量）：方法調用時創建，方法結束時銷毀實例變量（全局變量）：類創建時創建，類銷毀時銷毀類變量（靜態變量）：程序啟動是創建，程序銷毀時銷毀

Nginx 學習筆記（六）引入線程池性能提升9倍

連接驅動 .com 任務隊列 spa 情況下 .html 統架構 href 原文地址：https://www.cnblogs.com/shitoufengkuang/p/4910333.html 一、前言 1、Nignx版本：1.7.11 以上 2、NGINX采用了異步、

Nodejs學習筆記（六）----- 模塊系統和函數

參數 spa 而且 split response 另一個簡約也有方法 Node.js模塊系統------->有開發基礎很好理解為了讓Node.js的文件可以相互調用，Node.js提供了一個簡單的模塊系統。模塊是Node.js 應用程序的基本組成部分，文件和

Elasticsearch學習筆記（六）核心概念和分片shard機制

服務器存儲 play wid 讀寫 number 容錯組成操作一、核心概念 1、近實時（Near Realtime NRT）（1）從寫入數據到數據可以被搜索到有一個小延遲（大概1秒）；（2）基於es執行搜索和分析可以達到秒級

python學習筆記（六）之集合1

什麽 mos pty this ash 筆記 sca sel 指定 python學習筆記（六）之集合1python中各種類型與其各種方法，都可以使用下面的方法查到：(1)交互模式下用dir()或者help()(2)google集合特點：英語set，有的可變，有的不可變；元素

python學習筆記（六）之集合2

lock true 可變對象屬於 attribute 聯盟 per rec python學習筆記（七）之集合2不變的集合在”python學習筆記（六）之集合1“中以set()來建立集合，這種方式所創建的集合都是可原地修改的集合，或者說是可變的，也就是說是unhashab

day4-Python學習筆記（六）

lin pre 學習 set spa lee 分割日誌腳本差集監控日誌，集合操作監控日誌腳本 #1.如果同一個ip地址在60秒內訪問超過200次，那麽就把ip加入黑名單#需求分析： #1. 60s 讀一次文件 #2. 分割，取到第一個元素，ip地址 #3

算法學習筆記（六）二叉樹和圖遍歷—深搜 DFS 與廣搜 BFS

創建 mark preorder 第一個高度變量初始化 term link 文章圖的深搜與廣搜復習下二叉樹、圖的深搜與廣搜。從圖的遍歷說起。圖的遍歷方法有兩種：深度優先遍歷(Depth First Search),

【筆記篇】最良心的計算幾何學習筆記（六）

紅色 online src note 不變比較基礎知識 cst 分類半平面交 github傳送門簡介 Emmmm學完旋轉卡殼感覺自己已經是個廢人了.. 修整了一個周末, 回來接著跟計算幾何勢力硬幹... (這個周末是不是有點長?) 今天就講講半平面交吧. 請自己回顧

bootstrap學習筆記（六）導航

trap 樣式 -h 禁用狀態規格參數 class home 圓角 ons 導航（基礎樣式） <ul class="nav nav-tabs"> <li><a href="##">Home</a></li>

OpenLayers學習筆記（六）— 拖拽疊加層overlayer

相關推薦