1. 程式人生 > >openlayers地圖上要素拖動互動

openlayers地圖上要素拖動互動

參考程式碼:
//拖動互動
function addMoveInteraction(){
	var app = {};
	app.Drag = function() {

        ol.interaction.Pointer.call(this, {
          handleDownEvent: app.Drag.prototype.handleDownEvent,
          handleDragEvent: app.Drag.prototype.handleDragEvent,
          handleMoveEvent: app.Drag.prototype.handleMoveEvent,
          handleUpEvent: app.Drag.prototype.handleUpEvent
        });

        this.coordinate_ = null;

        this.cursor_ = 'pointer';

        this.feature_ = null;

        this.previousCursor_ = undefined;

      };
      ol.inherits(app.Drag, ol.interaction.Pointer);

      app.Drag.prototype.handleDownEvent = function(evt) {
        var map = evt.map;

        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature) {
              return feature;
            });

        if (feature) {
        	 var geom = (feature.getGeometry());
             if (geom instanceof ol.geom.MultiPolygon) {
               return;
             } else if (geom instanceof ol.geom.LineString) {
               return;
             }else{
             	 this.coordinate_ = evt.coordinate;
            // alert(evt.coordinate[0]);
             this.feature_ = feature;
             }
        }
        return !!feature;
      };

      app.Drag.prototype.handleDragEvent = function(evt) {
        var deltaX = evt.coordinate[0] - this.coordinate_[0];
        var deltaY = evt.coordinate[1] - this.coordinate_[1];

        var geometry = this.feature_.getGeometry();
        geometry.translate(deltaX, deltaY);

        this.coordinate_[0] = evt.coordinate[0];
        this.coordinate_[1] = evt.coordinate[1];
      };

      app.Drag.prototype.handleMoveEvent = function(evt) {
      	
        if (this.cursor_) {
          var map = evt.map;
          var feature = map.forEachFeatureAtPixel(evt.pixel,
              function(feature) {
              	//alert("handleMoveEvent");
                return feature;
              });
          var element = evt.map.getTargetElement();
          if (feature) {
            if (element.style.cursor != this.cursor_) {
              this.previousCursor_ = element.style.cursor;
              element.style.cursor = this.cursor_;
            }
          } else if (this.previousCursor_ !== undefined) {
            element.style.cursor = this.previousCursor_;
            this.previousCursor_ = undefined;
          }
        }
      };

      app.Drag.prototype.handleUpEvent = function(evt) {
    	  //拖動以後觸發操作
    	var stationnum = this.feature_.U.StationNum;
        this.coordinate_ = null;
        this.feature_ = null;
        //alert("handleUpEvent"+evt.coordinate[1]);
        var laAndLo = excuteExtent(evt);
        
    	stationnumArr.push(stationnum);
    	LoAndLaArr.push(laAndLo);
        //updateLoAnaLa(laAndLo,stationnum);
        
        return false;
      };
      appD = new app.Drag();
      //將互動新增到map中
	map.addInteraction(appD);
}

相關推薦

openlayers地圖要素互動

參考程式碼://拖動互動 function addMoveInteraction(){ var app = {}; app.Drag = function() { ol.interaction.Pointer.call(this, {

微信小程式中懸浮窗功能的實現(主要探討和解決在原生元件

問題場景 所謂懸浮窗就是圖中微信圖示的按鈕,採用fixed定位,可拖動和點選。 這算是一個比較常見的實現場景了。 為什麼要用cover-view做懸浮窗?原生元件出來背鍋了~ 最初我做懸浮窗用的不是cover-view,而是view。 這是簡化的程式碼結構: index.wxml: <view cl

OpenLayers中開啟SelectFeature控制元件後滑鼠在面要素不能地圖的問題

OpenLayers中,如果在一個向量要素圖層中繪製了幾何面型別的要素,同時開啟了SelectFeature控制元件,當滑鼠在面要素上時是無法拖動地圖的。解決這個問題可以使用以下方法: selectControl = new OpenLayers.Control.Sele

openlayers限制地圖區域

現在做webgis基本都會用到openlayers或者leaflet。那麼在顯示地圖的時候,特別是顯示小區域地圖的時候,由於地圖區域較小,就會存在把地圖拖動到顯示區域之外的現象。那麼該如何限制地圖拖動的區域呢。     在openlayers2中有restricted

OpenLayers】ol3設定地圖、禁止

let pan = getPan(); pan.setActive(false);//false:當前地圖不可拖動。true:可拖動 function getFun() { let pan;

圖片到百度地圖

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport"

圖片到百度地圖2

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, u

openlayers 註冊地圖事件(移動、單擊、

1、建立一個地圖物件 // Layers var layers = [ new ol.layer.Tile({ name: "Natural Earth", minResolution: 306,

百度地圖標註後獲取坐標

acc route wheel onclick 權限 ctype 在線 inpu initial 本來想用圖吧的API來做的,結果弄了下,在手機上弄不了。換用百度地圖了。。本功能個人覺得在很多地方用到,先記下來,省得每次都得翻地圖API文檔一點一點弄。 功能表現為:

dropzone文件傳在thinkphp5中應用一個實例

php dropzone參考:Dropzone的使用方法點擊查看dropzone中文文檔後臺用的INSPINIA框架的模板,裏面有,dropzone.jsdropzone是一個可以拖文件上傳的js.拖進去,就上傳了。我在頁面上,寫了一個保存已經上傳的文件的image3,image4.這就需要改寫一下dropz

百度地圖手機端單觸點單擊和長按事件,解決部分手機(小米手機)地圖單擊事件失效,多觸點、依然觸發長按的bug

|| ble apply timeout console dto eat 問題 int /** * Author 嶽曉 * * 對百度地圖的事件擴展,目前擴展了fastclick和longclick, * 解決某些設備click不執行的問題

jquery 實現文件傳加進度條

進行 con pos rip file round 默認 dex toupper 通過對文件的拖動實現文件的上傳,主要用到的是HTML5的ondrop事件,上傳內容通道FormData傳輸: //進度條 <div class="parent-dlg" >

html高德地圖ip定位之後自定義定位地址

前面貌似寫過關於地圖中心點繪製矩形的文章 下面直接貼程式碼就是組裝高德的兩個demo變成一個我想應該對於大多數還是挺有用的吧 <!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址

openlayers讀取KML並顯示在地圖

在ol裡面讀取KML檔案時,如果style總是不對,需要設定一個重要的屬性 extractStyles: false  不多說了,上程式碼示例 var projection = ol.proj.get('EPSG:3857'); var map = ne

android:RecyclerView互動動畫(上下,左右滑動刪除)

效果 RecyclerView互動動畫主要使用的是ItemTouchHelper這個類 建立MyItemTouchHelperCallback繼承系統ItemTouchHelper.Callback import android.graphi

qt與js互動,並在百度地圖繪製軌跡

前言: 獲得了照片的GPS資訊後,我們現在要做的就是把GPS資訊傳入JS中,然後通過百度地圖API將軌跡繪製出來。 一:在程式頁面載入地圖 qt5.6及之後取消了QWebkits,轉為使用QWebEngine. 在qt5.6的額ui設計師介面中,並不能直

OpenLayers學習筆記(三)— QML與HTML通信之 地圖點擊添加自由文本

web osi target eps open 文本輸入框 ref append tee 實現在地圖隨意點擊,彈出文本輸入框,輸入任意文字,完成自由文本添加的功能 作者: 狐貍家的魚 Github: 八至 本文鏈接:地圖上點擊添加自由文本 關於如何QML與

js按住滑鼠左鍵選中網格元素,被選中的網格位置填充可輸入內容,插入圖片等的容器。並且網格的容器,可、改變尺寸、但互相之間不可重疊(如果重疊回到一次的狀態)。

js/jquery 按住滑鼠左鍵圈選網格,圈選網格顏色變深, 圈選區域不可重疊,被選中的網格位置上填充可輸入內容,插入圖片、媒體,表格、echarts圖表等的容器。並且網格上的容器可拖動,可改變尺寸,但不可重疊(如果重疊回到上一次的狀態), 上述要求為本次實際開發專案(vu

windows中檔案到瀏覽器,實現自動傳 -- Java

 //拖動License檔案到瀏覽器中,自動讀取檔案並上傳var dropbox = $("body")[0];dropbox.addEventListener("dragenter", function(e){   e.stopPropagation();   e.preventDefault();},

canvas畫出座標集合,並標記新座標,背景支援放大縮小功能

寫在前面:專案需求,使用者上傳一個區位的平面圖片,使用者可以在圖片上新增新的相機位置,並且展示之前已繫結的相機座標位置,圖片支援放大縮小&拖動的功能。新增座標,頁面展示相對canvas定位,儲存時儲存該座標在背景圖片上的座標。原有座標集合相對背景圖片定位,(圖片放大縮小或者拖動時始終在圖片的固定位置)