首页 > 代码库 > OpenLayers开发记录(二)
OpenLayers开发记录(二)
继续上次关于OpenLayers开发记录的总结,谈一下其他类型图层、Marker以及类的使用。
3、创建矢量图层
问题1:矢量图层的创建
OpenLayers.Strategy.Fixed():一个简单的策略,一旦请求要素就不再请求新数据
OpenLayers.Protocol.WFS():通过WFS协议请求一个矢量数据
var cellspace = new OpenLayers.Layer.Vector("WFS", { strategies: [new OpenLayers.Strategy.Fixed()], projection: new OpenLayers.Projection("EPSG:900913"), // 坐标系要和map坐标系匹配 protocol: new OpenLayers.Protocol.WFS({ version: "1.0.0", url: "http://localhost:8080/geoserver3D/gczx/wfs", featureType: "cellspace2", // typeName: "gczx:cellspace2", // maxFeatures: 50, outputFormat: "GML2" }) });
问题2:矢量图层要素选择
需要使用OpenLayers.Control.SelectFeature控件。
代码
var selector = new OpenLayers.Control.SelectFeature(this.vlayer);// 为SelectFeature控件指定矢量图层 this.map.addControl(selector);//添加到map中 selector.activate();//激活要素选择器 // 注册Select事件 selector.onSelect = onFeatureSelect; // 注册取消Select事件 selector.onUnselect = onFeatureUnselect; // Feature取消选中事件响应 function onFeatureUnselect(feature) { that.map.removePopup(feature.popup);//从map中删除弹出框 feature.popup.destroy();//从要素中删除popup feature.popup = null;//设置为空 } // 实现图层选择弹出popup对话框 function onFeatureSelect(feature) { var selectedFeature = feature; //被选中的要素 var popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(),//位置 null, "<div style=‘font-size:.8em‘>Feature: " + feature.id + "<br />Area: " + feature.geometry.getArea() + "<br />X: " + feature.attributes.x + " Y: " + feature.attributes.y + "<br />Layer: " + feature.attributes.layer + "</div>",//显示的内容 null, true,//是否有关闭按钮 onPopupClose);//关闭时调用函数 feature.popup = popup;//要素属性添加popup that.map.addPopup(popup);//添加popup function onPopupClose(evt) { // 取消选择,会触发onFeatureUnSelect selector.unselect(selectedFeature); } }
问题3:矢量图层样式(后续补充)
4、创建Marker图层
问题1:创建Marker图层
//创建markers图层 var markers = new OpenLayers.Layer.Markers("Markers"); this.map.addLayer(markers); //创建图标 var size = new OpenLayers.Size(24, 24); var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h); var icon = new OpenLayers.Icon(‘../img/man24.png‘, size, offset); var halfIcon = icon.clone(); //创建marker var marker = new OpenLayers.Marker( new OpenLayers.LonLat(12734772.12866, 3571058.56591), halfIcon); //12734772.12866, 3571058.56591 //-232.95014 456.1636 marker.name = "Gebin"; marker.occupation = "master"; //注册鼠标按下事件 marker.events.register(‘mousedown‘, marker, function (evt) { var popup = new OpenLayers.Popup.FramedCloud("people", marker.lonlat, null, "<div style=‘font-size:.8em‘>Name: " + marker.name + "<br/>" + "Occupation:" + marker.occupation + "</div>", null, true, onPopupClose); marker.popup = popup; that.map.addPopup(popup); function onPopupClose(evt) { // 取消选择,会触发onFeatureUnSelect that.map.removePopup(marker.popup); marker.popup.destroy(); marker.popup = null; } OpenLayers.Event.stop(evt); }); markers.addMarker(marker); markers.setZIndex(800);//设置z方向顺序,继承自Layer
问题2:z-index问题
5、创建控件
问题1:常用控件
this.map.addControl(new OpenLayers.Control.PanZoomBar({ position: new OpenLayers.Pixel(2, 15) })); // 平移缩放工具条 this.map.addControl(new OpenLayers.Control.Navigation());// 导航工具条 this.map.addControl(new OpenLayers.Control.LayerSwitcher());// 图层切换 this.map.addControl(new OpenLayers.Control.MousePosition());// 鼠标位置 this.map.addControl(new OpenLayers.Control.OverviewMap());// 缩略图 this.map.addControl(new OpenLayers.Control.Scale());// 比例尺
6、marker移动
问题1:如何动态移动marker标记
在我们学习JavaScript的时候都尝试过使用setInterval()、setTimeOut()构建循环和动画,在OpenLayers提供的类中有一个叫做Tween的类,支持缓动动画。
创建Tween,简单代码
var tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);//参数为缓动的方式 // 回调对象,支持三个事件start, eachStep 和 done // 分别代表,开始缓动动画之前,缓动中的每一步,缓动动画结束后 var callbacks = { eachStep: function(value) { block.style.left = (value.x + viewportPosition[0]) + ‘px‘; block.style.top = (value.y + viewportPosition[1]) + ‘px‘; console.info(block.style.left +":"+block.style.top) ; } ,done:function(){ var tween1 = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);//重新建了一个tween进行新的动画 tween1.start( from1, to1,duration, {callbacks: callbacks}); } } tween.start(from, to, duration, {callbacks: callbacks});//启动缓动动画
移动Marker,主要修改eachStep()函数
eachStep: function(value) { var newLonLat = new OpenLayers.LonLat(value.x,value.y);// var newPx = that.map.getLayerPxFromLonLat(newLonLat);// try{ lineGeometry.addPoint(new OpenLayers.Geometry.Point(newLonLat.lon,newLonLat.lat));// marker.moveTo(newPx);// pathVectorFeature.layer.redraw();// } catch (e){ alert(newPx); } }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。