openLayers地圖外掛的寫法
/**
* FROM:xph
* 主要功能:
* 1 簡單載入離線地圖(因為百度地圖演算法問題,僅支援google)
* 2 地圖元素載入,點和線
* 3 事件操作,單擊,懸浮,右鍵
* 4 OL常用API呼叫,remove方法,地圖移動
* 庭博
* date:20180928
*/
(function($){
var defaultPrams = {
centerCoordinate:[116.388888888889,40.1438888888889]//地圖中心點[經度,緯度]
,zoom:10 //地圖載入級別
,id:'map' //容器ID
,maxZoom:10 //最大放大級別
,minZoom:10 //最小縮放級別
,url:"" //離線地圖載入路徑
,zoomShowOrHide:true //右上角地圖+-控制
,showOLpage:true
}
var map;
/**
* OL畫圖
*/
$.fn.drawMap = function(params){
defaultPrams = $.extend({},defaultPrams, params);
var offlineMapPath = defaultPrams.url;
//設定離線地圖路徑
var source = new ol.source.XYZ({
url:offlineMapPath
});
var mapLayer = new ol.layer.Tile({
source: source,
visible:true
});
/*預設屬性*/
map = new ol.Map({
layers: [
mapLayer
],
view: new ol.View({
center: ol.proj.transform(defaultPrams.centerCoordinate, 'EPSG:4326', 'EPSG:3857'),
zoom:defaultPrams.zoom,
minZoom:defaultPrams.min,
maxZoom:defaultPrams.max
}),
target: defaultPrams.id,
controls:ol.control.defaults({
zoom:defaultPrams.zoomShowOrHide,
attribution:defaultPrams.showOLpage
})
});
}
/**
* 畫線
*/
$.fn.drawLine = function(param){
var x = ol.proj.transform(param.startCoordinate,'EPSG:4326', 'EPSG:3857');
var y = ol.proj.transform(param.endCoordinate,'EPSG:4326', 'EPSG:3857');
var lineFeature = new ol.Feature({
geometry:new ol.geom.LineString([x,y]),
featuretype:'line'
});
lineFeature.setId(param.id);
var sourceVector = new ol.source.Vector({
features:[lineFeature]
});
sourceVector.set("name","sourceVector")
var lineLayer=new ol.layer.Vector({
source:sourceVector,
style:new ol.style.Style({
stroke:new ol.style.Stroke({
width:param.width,
color:param.color
})
}),
maxResolution:param.maxResolution,
name:param.layerName,
zIndex:param.zIndex
});
map.addLayer(lineLayer);
}
/**
* 畫點
*/
$.fn.drawPoint = function(param){
var f = new ol.Feature({
geometry:new ol.geom.Point( ol.proj.transform(param.pointCoordinate,'EPSG:4326', 'EPSG:3857')),
featuretype:'point'
});
f.setId(param.id);
var sourceVector = new ol.source.Vector({
features:[f]
});
sourceVector.set("name","sourceVector")
var layer = new ol.layer.Vector({
source:sourceVector,
style:new ol.style.Style({
image:new ol.style.Icon({
src:param.pagePath,
scale:param.scale
})
}),
name:param.layerName,
zIndex:param.zIndex
});
map.addLayer(layer);
}
/**
* 刪除元素
*/
$.fn.removeLayer = function(param){
map.getLayers().getArray().forEach(function(e) {
var layerName = e.get('name');
if(layerName = param.layerName){
var sourceVector= e.getSource();
var keys =sourceVector.getKeys();
if(keys.length>0){
var f = sourceVector.getFeatureById(param.id);
if(f){
sourceVector.removeFeature(f);
}
}
}
});
}
/**
* 移動地圖
*/
$.fn.moveTo = function(param){
//獲取檢視
var view = map.getView();
var destination = ol.proj.transform(param.movetoCoordinate,'EPSG:4326', 'EPSG:3857')
view.animate({
center: destination,
duration: 1000
});
}
/**
* 右鍵事件
*/
$.fn.rightEvent = function(fn){
$(map.getViewport()).on("contextmenu",fn);
}
/**
* 點選事件
* fn:回撥函式
*/
$.fn.clickEvent = function(fn){
map.on("singleclick",fn)
}
/**
*懸浮事件
*/
$.fn.mouseOnEvent = function(fn){
map.on("pointermove",fn);
}
/**
* 清除所有
*/
$.fn.clearAll = function(){
map.getLayers().getArray().forEach(function(e) {
var sourceVector= e.getSource();
var keys =sourceVector.getKeys();
if(keys.length>0){
var features = sourceVector.getFeatures();
features.forEach(function(f){
sourceVector.removeFeature(f);
})
}
});
}
})(jQuery);