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定位,儲存時儲存該座標在背景圖片上的座標。原有座標集合相對背景圖片定位,(圖片放大縮小或者拖動時始終在圖片的固定位置)