openlayer学习总结
- 最好的学习素材（http://openlayers.org/en/latest/examples/）
- 学习的主要点Map(View,Layer(Source(Feature(ol.geom.Point…))))
- 地图中主要的存在是图层Layer,这个Layer需要依赖于某个创建好的Map，图层中可以展示各种各样的点线面，对于这些点线面可以使用东西进行装饰他们，无论是点线还是面，都通通称呼为要素Feature，对于这个要素，可以动态的添加删除到Layer中。
- View主要是控制格式，坐标的格式，放大缩小,地图的中心等等，设置到Map中可以查看相应的ol.Map中去查看如何设置view，到ol.View中查看种种重要的东西。查看api和事例的Demo是个好东西。
Map的创建
var map = new ol.Map({
//目标div
// target: "mapView",
target: this.mapDiv,
//渲染方式
renderer: 'canvas',
//控件，比如放大缩小
controls: ol.control.defaults({
attribution: false
}),
view: new ol.View({
zoom: 6
}),
//layers: [roads, imagery]
//layers 代表主要显示的几个图层，我们一般通过函数添加
//这个也是Map的属性
});
创建Layer
Layer有好几种类型的tile(瓦片地图),Image(图像),Vector(画点线等等需要的图层)
Layer中的资源就是图层中信息，图片，或者我们添加的点线面等等数据
Image图层(来至于静态图片)
var baseLayer= new ol.layer.Image({
source:new ol.source.ImageStatic({
url:"test.jpg"
})
})Vector:
这里的style是设置整个图层中所有添加的要素的样式，你也可以单独的在要素中添加样式，这个style有三种形式 ol.style.Style | Array.< ol.style.Style> | ol.StyleFunction（A function that takes an ol.Feature and a {number} representing the view’s resolution. The function should return a ol.style.Style or an array of them. This way e.g. a vector layer can be styled.）
你可以返回一个数组的style或者一个函数当添加要素的时候通过判断逻辑进行处理。
这里的source:是我们接触的最多的部分，在向矢量图层中添加要素的时候都需要getSource()然后在进行添加要素。
var areaLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style:new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
zIndex:1
});Layer添加要素
添加要素一般都是在ol.geom.Point/ol.geom.LineString()等等，你可以去修饰这些要素添加style。
要素一般称为ol.Feature,Feature中你可以通过类似Map的属性设置你要保持的ID等交互需要的信息，点击Feature的时候可以获取得到相关的数据信息。
var jobId = feathure.get(“jobId”);这样的类似。
然后添加到图层中去，这里也可以单独设置要素的样式，如果之前设置图层style的时候使用function的形式可以接受到当前添加的要素feature的形式，根据属性进行特别的绘制。
var point = new ol.geom.Point([x,y]);
var feature = new ol.Feature({
geometry :point,
jobId :"关键的属性"
});
this.areaLayer.getSource().addFeature(feature);划线(将点的数据一个个的添加，具体的其他的方案可以参考api，比如wkt或者gjson等等，我没有用过哈哈)，然后添加到图层中去就好了。
var lineString = new ol.geom.LineString();
for(var i=0;i < param.length;i++){
var point = [param[i].x,param[i].y];
lineString.appendCoordinate(point);
}
var feature = new ol.Feature({
geometry : lineString
})
事件
事件的监听都是放置在Map上面的，我们可以通过监听，判断是否要处理，还可以自定义事件，分发下去。
监听点击或者渲染事件(时刻都在，可以在里面做些定时器做的事情)
（自定义事件）
http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/
map.on('click', function(evt) {
var pixel = evt.pixel;
var coordinate = map.getCoordinateFromPixel(pixel); //获取像素界别的坐标
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
})
//遍历地图上的所有的要素，判断当前点击的点在哪个要素上，如果存在返回，否则为空
if (feature && feature instanceof ol.Feature) {
//这里做相应的处理，弹出对话框，或者其他的自己处理
//也可以分发成自定义的事件,触发自定义的事件
document.dispatchEvent(new MapClick('map-click',feature));
}
});
map.on("map-click",function(events){
//可以在外面做些事情，方便封装
})
//让他继承Map的事件体系,这样在Map中就可以监听这个事件了
var MapClick = function(type,param){
ol.events.Event.call(this,type);
this.param = param;
}
ol.inherits(MapClick, ol.events.Event);拖动要素
官方上的例子很好直接可以使用，在放开的一瞬间处理自己的事件就好了。
下面是处理业务的时候的用的东西
/**
* descrption: 使用openLayer处理
* authohr: wangji
* date: 2017-07-24 20:00
*/
var radius = 0;
var MapConfig = function (opt) {
ol.Object.call(this);
this.setting = opt.setting||false;
this.mapDiv = opt.mapDiv || undefined;
this.imagePath =opt.imagePath || undefined;
this.extent = [-0.5, -1156.5, 1636.5, 0.5];
this.zoom = opt.zoom || 2
this.maxZoom = opt.maxZoom ||17;
this.situation = opt.situation ||0;
}
ol.inherits(MapConfig, ol.Object);
MapConfig.prototype.initMap = function () {
if(!this.imagePath){
return;
}
if(!this.mapDiv){
return;
}
var __that = this;
this.projection =new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: __that.extent
});
this.map = new ol.Map({
target: this.mapDiv,
render: 'canvas',
view: new ol.View({
projection: __that.projection,
center: ol.extent.getCenter(__that.extent),
zoom: this.zoom,
maxZoom: this.maxZoom
})
});
var baseLayer= new ol.layer.Image({//地图底图
source:new ol.source.ImageStatic({
url:__that.imagePath,
projection: __that.projection,
imageExtent: __that.extent
})
})
this.baseLayer=baseLayer;
this.map.addLayer(baseLayer);
if(__that.situation ==0){//某种情况可以拖动
__that.map.addInteraction(new app.Drag());
}
function createStyle(src,orgname) {
return new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 0.5],
crossOrigin: 'anonymous',
anchorOrigin:'bottom-right',
src: src,
})),
text: new ol.style.Text({
font:"14px serif",
text:orgname,
offsetX:0,
offsetY:30,
stroke: new ol.style.Stroke({color: 'black', width: 1})
}),
stroke: new ol.style.Stroke({
width: 3,
color: [255, 0, 0, 1]
}),
fill: new ol.style.Fill({
color: [0, 0, 255, 0.6]
})
});
}
this.ruuningJobFeature = [];//存储某个点可以让其闪烁
var areaLayer = new ol.layer.Vector({
source: new ol.source.Vector(),
style:function (feathure) {
var orgName = feathure.get("orgName");
if(__that.situation == 1){
var globalStatus = feathure.get("globalStatus");
if(globalStatus == 1){
__that.ruuningJobFeature.push(feathure);
return createStyle("test.jpg",orgName);//某种状态
}else if(globalStatus == 2){
return createStyle("test1.jpg",orgName);
}else{
return createStyle("test2.jpg",orgName);
}
}
},
zIndex:1
});//区域layer
this.areaLayer =areaLayer;
this.map.addLayer(areaLayer);
this.map.on('click',__that.mapListener,__that);
/**
*处理闪烁的流程
* 1.将需要处理的要素保存起来到一个数组中
* 2.地图渲染时都会触发postcompose事件进行监听
* 3.将保存的要素切换其Style
* 4.可以根据自增数据控制其切换的速度
*/
this.map.on('postcompose', function () {
if (__that.ruuningJobFeature.length > 0) {
radius++;
radius = radius % 100;
var style;
for (var i = 0; i < __that.ruuningJobFeature.length; i++) {
var orgName = __that.ruuningJobFeature[i].get("orgName");
if (radius < 60) {
src = "test.jpg";
style = createStyle(src,orgName)
} else {
style = new ol.style.Style({
text: new ol.style.Text({
font:"14px serif",
text:orgName,
offsetX:0,
offsetY:30,
stroke: new ol.style.Stroke({color: 'black', width: 1})
}),
stroke: new ol.style.Stroke({
width: 3,
color: [255, 0, 0, 1]
}),
fill: new ol.style.Fill({
color: [0, 0, 255, 0.6]
})
});
}
__that.ruuningJobFeature[i].setStyle(style);
}
}
})
}
MapConfig.prototype.mapListener = function(evt){
var __that = this;
var pixel = evt.pixel;
var coordinate = __that.map.getCoordinateFromPixel(pixel);
var feature = __that.map.forEachFeatureAtPixel(pixel,function(feature){//获取到点击的feathure
return feature;
})
if(feature && feature instanceof ol.Feature){
__that.dispatchEvent(new MapClick('map-click',feature));
}
}
MapConfig.prototype.addFeature = function (feature) {
if(feature && feature instanceof ol.Feature){
this.areaLayer.getSource().addFeature(feature);
}
}
MapConfig.prototype.removeFeature = function (feature) {
if(feature && feature instanceof ol.Feature ){
this.areaLayer.getSource().removeFeature(feature);
}
}
MapConfig.prototype.getPointFeatureFromXY = function (param) {
// debugger
var point = new ol.geom.Point([param.xCoord,param.yCoord]);
var feature = new ol.Feature({
geometry :point,
orgName:param.orgName,//自己设置的值
globalStatus:param.globalStatus
});
this.areaLayer.getSource().addFeature(feature);
}
/**
* @desction: 创建线
* @author: wangji
* @date: 2017/7/25
* @param:
* @return:
*/
MapConfig.prototype.generateLine = function(param){
if(param == null || param.length <=0 ){
return;
}
var lineString = new ol.geom.LineString();
for(var i=0;i< param.length;i++){
var point = [param[i].x,param[i].y];
lineString.appendCoordinate(point);
}
var feature = new ol.Feature({
geometry : lineString
})
var lineLayer = new ol.layer.Vector({
source : new ol.source.Vector(),
style : function (feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#49B4FF',
width: 2
})
})
];
return styles;
}
})
lineLayer.getSource().addFeature(feature);
this.map.addLayer(lineLayer);
}
//改变底层的图片
MapConfig.prototype.changeBaseLayerImage = function (ImpagePath) {
if(ImpagePath == undefined ||ImpagePath == ''){
return;
}
var __that =this;
var baseLayer= new ol.layer.Image({//地图底图
source:new ol.source.ImageStatic({
url:path+ImpagePath,
projection: __that.projection,
imageExtent: __that.extent
})
})
__that.map.removeLayer( __that.baseLayer);
__that.baseLayer = baseLayer;
__that.map.addLayer(baseLayer);
}
var MapClick = function(type,param){
ol.events.Event.call(this,type);
this.param = param;
}
ol.inherits(MapClick, ol.events.Event);
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);
/**
* 当鼠标向下的时候，判断当前是不是要素，是的话返回true开始拖拽
*/
app.Drag.prototype.handleDownEvent = function(evt) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {
return feature;
});
//记录当前的点和当前的要素的值
if (feature && feature instanceof ol.Feature) {
this.coordinate_ = evt.coordinate;
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) {
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() {
//拖动结束了，我们在这里做一些自己的处理
var objectId = this.feature_.get("orgId");
var coordinate = this.coordinate_;
//处理事件或者ajax请求等等
this.coordinate_ = null;
this.feature_ = null;
return false;
};