openlayers自定義工具欄

2021-10-06 17:51:26 字數 2062 閱讀 6778

因為業務要求,去年寫過基於openlayer的工具欄,網上有些工具欄的文章,但是都沒什麼人提供原始碼學習。

希望我的demo能幫助大家更好的理解與開發,有什麼不足請見諒,這裡說下我的基本的實現。

openlayer上有些例子,建議熟讀文件後再來看本例

所有的相關檔案都放在map資料夾中,

mapconfig中處理地圖的一些相關配置,類似:

// 高德地圖

const

map3

=new

layer.tile()

})const mapconfig =

map.js中構造乙個class類, 提供一些地圖相關的方法供外部呼叫

export

default

class

olmap

extends

mapchangedrawtype()

clearlastdraw()

}

olmap中製作工具欄,丟擲元件供外部呼叫

"map" id=

"map"

:style=

"">

<

!-- 自定義工具欄 --

>

="tool-container"

>

="t_close"

>

<

/div>

"changetype('point')"

>

="icon" title=

"定點"

>

"./image/icon1.svg"

>

<

/div>

<

/li>

"changetype('hand')"

>

="icon" title=

"畫筆"

>

"./image/icon2.svg"

>

<

/div>

<

/li>

....

<

/template>

...methods:

,// 改變繪圖型別

changetype

(val))}

,}繪圖是圓還是線段等根據傳入的型別判斷,預設是手繪

* point:點

* linestring:線

* linearring:線性環

* polygon:多邊形

* multipoint:多點

* multilinestring:multilinestring

* multipolygon:多多邊形

* geometrycollection:幾何集合

* circle:圈

popover是自己封裝的乙個元件提供給工具欄作為切換的時候的下拉彈窗

單獨拿出乙個功能來說,就說說撤銷上一步操作吧

// 刪除上一次處於繪畫中的上乙個點

clearlastdraw()

}// 如果處於線段或多邊形繪畫中 撤銷上乙個點if(

this

.data.draw.finishcoordinate_)

}else

}

兩種情況:

1.如果繪圖已經完成,去找所有的繪圖,從中刪除最近的乙個feature。

2.如果繪圖是多邊形繪製到一半,會根據最近點下的點位,刪除那個點位

總結:具體的每個功能的實現請大家看原始碼,每個功能都有詳細的注釋,覺得有幫助的話就給我點個star,哈哈,謝謝

自定義工具類01

ftputil ftpclient 工具類 idutils 生成一切id 的策略的工具類。可以使用他生成名稱 jsonutils 物件與json 格式轉換的工具類 public class ftputil 切換到上傳目錄if ftp.changeworkingdirectory basepath f...

(sandbar dll)C 自定義工具條

td.sandbar.menubar menubar td.sandbar.sandbarmanager sandbarmanager td.sandbar.container topsandbardock td.sandbar.view private void form1 load object...

layui自定義工具欄

給大家分享的功能是layui自定義工具欄 功能效果 開啟資料 頭部工具欄區域 關鍵引數 引數型別 string dom boolean 引數說明 demo 指向自定義工具欄模板選擇器 直接傳入工具欄模板字元 true 僅開啟工具欄,不顯示左側模板 default 讓工具欄左側顯示預設的內建模板 在這...