OpenLayers学习-示例学习1:Map

Posted on   |   In   |  

先学下OpenLayers 再分析源代码
一来是之前一直用公司的js地图api开发, 有时会感觉有些受限. 希望通过源代码学下js实现
二来在职研考过了, 怎么也是地质大学的 多少也得学点儿gis的东西吧…先按自己的理解分类记录下
这份东西每天晚上弄到12点弄了一个礼拜, 弄完以后感觉主要还是要从openlayers学些组织代码 解决具体问题的方法, 这点上openlayers做的太nb了
放个笔记的GitHub地址: https://github.com/ruantao1989/read_OpenLayers

一: Map操作:

1.设置中心点及zoom

1
2
3
4
map.zoomToMaxExtent();
//或
var lon = 9,lat = 49,zoom = 5;
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

2.获取中心点

1
var center = this.map.getCenter();

3.获得分辨率

1
var resolution = this.map.getResolution();//经纬度和像素坐标转换用的

4.根据url的传参定位地图(可以逆向生成url)

1
2
//true时候url会跟着地图的变化而动态生成, false只会在点击固定连接时才生成一次
map.addControl(new OpenLayers.Control.Permalink({anchor: true}));

5.限制缩放级别

1
2
3
4
5
6
7
8
9
10
11
12
var options = {
    scales: [50000000, 30000000, 10000000, 5000000] 
    resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125]
};
map = new OpenLayers.Map('map' , options);
//或
map = new OpenLayers.Map({
        div: "map",
        projection: "EPSG:900913",
        controls: [],
        fractionalZoom: true//限制级别,这个需要在Layer中设置zoom级别
    });

6.鼠标拾取事件

1
2
var size = map.getSize();
    map.events.on({mousemove: function(event) {...}

7.比例尺

1
2
3
4
5
6
7
8
new OpenLayers.Control.ScaleLine()
//中文
OpenLayers.INCHES_PER_UNIT["公里"] = OpenLayers.INCHES_PER_UNIT["km"]
OpenLayers.INCHES_PER_UNIT["米"] = OpenLayers.INCHES_PER_UNIT["m"]
new OpenLayers.Control.ScaleLine({
    topOutUnits:"公里",
    bottomOutUnits:"米"
});

8.骨头棒zoom范围

1
2
3
4
map = new OpenLayers.Map('map', {
    controls: [],
    numZoomLevels: 6//六级
});

9.添加删除气泡

1
2
3
4
5
//添加气泡
map.addPopup(popup, true);
//删除
map.removePopup(feature.popup);//地图上删掉feature中的popup
    feature.popup.destroy();//析构

10.声明事件监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var map = new OpenLayers.Map({
    ... ...
    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);
        }
    }
});

11.zoom值取整

1
map.zoomTo(Math.round(map.zoom));

12.全屏地图

1
2
3
4
5
html, body, #map {
    margin: 0;
    width: 100%;
    height: 100%;
}

13.Ajax跨域

1
2
//这个回头得看看源码
OpenLayers.ProxyHost = "/proxy/?url=";

14.添加气泡

1
2
3
4
5
6
7
8
map.addPopup(new OpenLayers.Popup.FramedCloud(
    "chicken", 
    map.getLonLatFromPixel(event.xy),
    null,
    event.text,
    null,
    true
));

15.叠加全都图层

1
2
//而不是按需显示
new OpenLayers.Map('map', {allOverlays: true});

16.渲染在指定dom上

1
map.render("container_id");

17.设置地图最大范围

1
2
3
4
//拖动边界
var extent = new OpenLayers.Bounds(8, 44.5, 19, 50);
map.setOptions({restrictedExtent: extent});
//map.setOptions({restrictedExtent: null});

18.左右俩图联动

1
2
3
map.events.register('moveend', map, function(){
    map2.setCenter(map.getCenter(), map.getZoom());
});

19.使用模版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//${getSize}相当于context.getSize(feature)
var context = {
    getColor: function(feature) {
        var region = parseInt((feature.geometry.x + 180) / 120);
        return colors[region];
    },
    getSize: function(feature) {
        return feature.attributes["type"] / map.getResolution() * .703125;
    }
};
var template = {
    pointRadius: "${getSize}", // using context.getSize(feature)
    fillColor: "${getColor}" // using context.getColor(feature)
};

20.zoom值的计算

1
2
3
4
minResolution: "auto",
minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
maxResolution: "auto",
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)