OpenLayers

GIS

事件绑定

一直不太懂OL的事件绑定原理。ol中的map可以看成是地图对象，包括所有的layers也是对象，存在于地图容器中（一个div中）。那么这个div中发生的鼠标移动（mousemove），鼠标点击（click），都可以被注册各种事件。OL的事件绑定到底有哪些方法？
可以直接在初始化map或者layer的时候加上eventListeners，这是比较好的做法。例如,事件监听器是一个键值对的形式{type:function(evt)}。其中evt可以获取事件对应的要素对象。

var map = new OpenLayers.Map({
    div: "map",
    allOverlays: true,
    layers: [layer1, layer2],
    zoom: 6,
    center: [0, 0],
    eventListeners: {
        featureover: function(e) {
            e.feature.renderIntent = "select";
            e.feature.layer.drawFeature(e.feature);
            log("Map says: Pointer entered " + e.feature.id + " on " + e.feature.layer.name);
        },
        featureout: function(e) {
            e.feature.renderIntent = "default";
            e.feature.layer.drawFeature(e.feature);
            log("Map says: Pointer left " + e.feature.id + " on " + e.feature.layer.name);
        },
        featureclick: function(e) {
            log("Map says: " + e.feature.id + " clicked on " + e.feature.layer.name);
        }
    }
});

This example shows how to use the 'featureclick', 'nofeatureclick', 'featureover' and 'featureout' events to make features interactive. Look at the feature-events.js source code to see how this is done.
Note that these events can be registered both on the map and on individual layers. If many layers need to be observed, it is recommended to register listeners once on the map for performance reasons.

第二种形式的注册：

map.events.register("mousemove", map, function(e) {
                var position = this.events.getMousePosition(e);
                OpenLayers.Util.getElement("coords").innerHTML = position;
            });

注册形式是 object.events.register(type,object,function(e){ })

目前针对在线编辑测试版需要 将数据库改为MongoDB，预计难度不大。目前图片上传还不够智能，需要加入标记点来表明图片位置。以及上传完成后，显示上传记录，记录可以放在一个活动窗口中，窗口中多标签，包括图像和具体信息。另外热点区域的编辑，需要多增加几种绘制方式，包括圆形、矩形和椭圆等等！包括Snap测距可以考虑！！进一步增加前端的科学测量功能。

map的事件中很多是浏览器事件，包括以下。比如click事件可以有属性xy，The pixel location of the event (relative to the the map viewport).，就是屏幕坐标

//浏览器事件常量
    BROWSER_EVENTS: [
        "mouseover", "mouseout",
        "mousedown", "mouseup", "mousemove", 
        "click", "dblclick", "rightclick", "dblrightclick",
        "resize", "focus", "blur"
    ],
    //屏幕坐标向地图坐标的转换
    function onMapClick(e){
     var lonlat = map.getLonLatFromViewPortPx(e.xy);
     }
    //给map注册click事件监听
    map.events.register("click", map, onMapClick);

map.layer.vector 矢量图层的事件是最丰富的，包括要素添加/删除前后的事件，要素被选择（featureselected、featureunselected）等等事件。可以有丰富的交互。具体的内容可以看 Event.js 这一块源码。可以更好地了解事件的监听与解除。

OL2几个发现

几个新的发现
API中已经把许多方法和事件做好，可以打造出丰富的交互的地图。
SelectFeature 控件中提供了select (feature)，将要素添加到selected 序列中，按照已选的样式渲染。Add feature to the layer’s selectedFeature array, render the feature as selected, and call the onSelect function.
很方便地触发选择要素的事件。另外控件中还有unselectAll(),以及多选Shift或者ctrl等。

该要素选择控件激活状态下当鼠标拖动发生在要素内部时 地图是无法响应鼠标事件的。
在文档中提到：

Handler.Feature is Handler to respond to mouse events related to a drawn feature. 这个类有个方法stopDown{Boolean} If stopDown is set to true, handled mousedowns do not propagate to other mousedown listeners.

如果设置为true， mousedown 事件不传递给其他监听器。

    SelectFeature.handlers.feature.stopDown = false;

这样设置，在features上mousedown的时候，会将这个down事件传递给 navigate控件！就可以拖动地图了~
这其实是一个事件冒泡的设定，Handler.Feature是对要素进行操控的对象，如果设定stopDown=true，就是阻止事件传播到 嵌套元素中，就是阻止事件冒泡。

在要素上拖动地图的例子很有启发性，如何实现一个浮动工具栏在地图容器上层 随意拖动。而不影响地图的拖动！只要拖动事件不传播给 嵌套元素即可。

OL3 API翻译

ol.Map 不负责地图的中心，zoomLevel和投影，而是由ol.View来控制。默认的投影是EPSG:3857。

Layer：OL3中的图层类别包括三种：ol.layer.Tile, ol.layer.Image and ol.layer.Vector。

以下是一个实例：如何设置feature的属性和几何对象

//设置map 的view
map.setView(new ol.View({ center:[0,0],zoom:2}))
//获取几何对象
vectorLayer.getSource().getFeatures()[11].getGeometry() 
//创建一个feature
var feature = new ol.Feature({
  geometry: new ol.geom.Polygon(polyCoords),
  labelPoint: new ol.geom.Point(labelCoords),
  name: 'My Polygon'
});
// get the polygon geometry
var poly = feature.getGeometry();
// Render the feature as a point using the coordinates from labelPoint
feature.setGeometryName('labelPoint');
// get the point geometry
var point = feature.getGeometry();

var vlayer=new ol.layer.Vector({
          source:new ol.source.GeoJSON(
          {
          //很关键的设置坐标系统
            projection:'EPSG:3857',
            url:'data/geojson/countries_big.geojson'
          }),
          style:function(feature,resolution){
            style.getText().setText(resolution < 5000 ? feature.get('cntry_name') : '');
            return styles;
          }
        });

webMap除了需要能解析各种格式的数据，还需要支持专题图的展示，对于专题图展示可以借助 要素服务，例如ArcGIS for Server 的要素服务（配置好的要素样式）。如果直接加载整个MapServer，就包含了整个地图的样式设置，包括不同Scale下的要素显示，Label显示。 但要素服务和 MapServer相比 不同的是 在前端通过矢量图层绘制，而不是一个动态地图服务图层，属于不同的图层类，有不同的图层方法。矢量图层可以在客户端更改要素样式，修改整个地图风格。 动态地图服务已经包含了很多功能，包括queryTask，RoutTask等.