Openlayers3仿链家网效果(二)

发表于 更新于

接着上一篇的demo,经过几天的折腾，基本上完成了类似链家网的效果.上一篇文章的地址Openlayers3仿链家网效果

实现思路

不同 Zoom 加载不同的图层

通过 view 的 chaneg:resolution 事件，在不同 zoom 下加载不同的图层

1
2
3
4
5
6
7
8
9
10
11
var changeViewToZoom = function () {
    var view = map.getView();
    view.on('change:resolution', function (event) {
        var zoom = view.getZoom();
        if (zoom >= xxxZoom) {
            // 加载图层
        } else {
            // 加载其他图层
        }
    });
};

圆圈的绘制

根据圆圈的中心点坐标和半径绘制圆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
 *  添加圆圈图层
 */
function genarateCircleLayer(CircleObjArrs, title) {
    if (typeof arguments[2] != 'undefined') {
        return createCircleLayer(createCircleSource(CircleObjArrs, arguments[2]), title);
    }
    return createCircleLayer(createCircleSource(CircleObjArrs), title)
}


function createCircleLayer(source, title) {
    var circleLayer = new ol.layer.Vector({
        title: title,
        source: source,
        style: circleStyleFunction
    });
    return circleLayer;
}


function createCircleSource(CircleObjArrs) {
    var view = map.getView();
    var zoom = view.getZoom();
    var CircleSource = new ol.source.Vector();
    var radius = 1 / Math.pow(2, zoom - 6);
    // 判断是否定义 radius,否则才用默认值
    if (typeof (arguments[1]) != 'undefined') {
        radius = arguments[1];
    }
    for (var i = 0; i < CircleObjArrs.length; i++) {
        var feature = new ol.Feature({
            geometry: new ol.geom.Circle(CircleObjArrs[i].center, radius),
            text: CircleObjArrs[i].text
        });
        CircleSource.addFeature(feature);
    }

    return CircleSource;
}

展示效果

展示效果包括:圆圈样式的切换,和圆圈下的图层显示.圆圈下的图层是在绘制圆圈的时候就一同加载了,只是样式设置透明，让它隐藏起来了,当鼠标移动到圆圈上，改变圆圈的样式的同时也改变了图层的样式，从而使得图层展示出来.主要调用forEachFeatureAtPixel方法，遍历当前坐标系下的所有feature,然后根据type切换不同样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
var displayFeature = function (pixel) {
    var features = [];
    map.forEachFeatureAtPixel(pixel, function (feature, layer) {
        if (layer.getVisible()) { // 当图层被隐藏之后,光标下该图层忽略
            features.push(feature);
        }
    });

    var len = features.length;
    if (len > 1) {
        for (var i = 0; i < len; i++) {
            var text = features[i].getProperties().text;
            var type = features[i].getGeometry().getType();
            features[i].setStyle(getSelectedPropertyStyle(type, text));
        }
    } else {
        var featureArr = map.getLayers().getArray();
        var featureArr_len = featureArr.length;
        for (var j = 0; j < featureArr_len; j++) {
            if (typeof featureArr[j].setStyle !== 'undefined') {
                var source = featureArr[j].getSource();
                features_by_source = source.getFeatures();

                var feature_len = features_by_source.length;

                for (var m = 0; m < feature_len; m++) {
                    if (typeof features_by_source[m].getProperties().text === 'undefined') {
                        text = 'none';
                    } else {
                        var text = features_by_source[m].getProperties().text
                    }
                    var type = features_by_source[m].getGeometry().getType();
                    features_by_source[m].setStyle(getUnselectedPropertyStyle(type, text));
                }
            }
        }
    }
};

var getUnselectedPropertyStyle = function (type, text) {
    var style = null;
    if (type == 'Circle') {
        style = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(57,172,106,0.9)',
                opacity: '0.05'
            }),
            text: new ol.style.Text({
                font: '14px sans-serif',
                text: text,
                textAlign: 'center',
                rotateWithView: true,
                fill: new ol.style.Fill({
                    color: '#FFFFFF'
                }),
                stroke: new ol.style.Stroke({
                    color: '#FFFFFF',
                    width: 1
                })
            })
            // radius:100
        })
    }
    if (type == 'MultiPolygon' || type == 'Polygon') {
        style = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(255, 255, 0, 0)',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 0, 0)'
            })
        })
    }
    return style;
};

var getSelectedPropertyStyle = function (type, text) {
    var style = null;
    if (type == 'Circle') {
        style = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(228,57,60,0.9)',
                opacity: '0.05'
            }),
            text: new ol.style.Text({
                font: '14px sans-serif',
                text: text,
                textAlign: 'center',
                // rotateWithView:true,
                fill: new ol.style.Fill({
                    color: '#FFFFFF'
                }),
                stroke: new ol.style.Stroke({
                    color: '#FFFFFF',
                    width: 1
                })
            })
        })
    }
    if (type == 'MultiPolygon' || type == 'Polygon') {
        style = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'green',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'rgba(57,172,106,0.1)'
            })
        })
    }
    return style;
};