openlayers标注面要素

最新推荐文章于 2024-05-20 18:38:49 发布

AIGIS.

最新推荐文章于 2024-05-20 18:38:49 发布

阅读量673

点赞数 1

分类专栏： OpenLayers 文章标签： openlayers 标注面要素

本文链接：https://blog.csdn.net/xiangshangdemayi/article/details/122237183

版权

OpenLayers 专栏收录该内容

7 篇文章 7 订阅

订阅专栏

前言：最近有个需求，要标注面要素，搜索关于openlayers标注的教程，都是关于点要素的，标注面要素的几乎没有，最后openlayers官网找到了例子，自己再根据例子进行实现，这里记录一下。

引用大牛的话：在Openlayers3里面，有两种对地理位置点进行标注的方法，一种是通过创建矢量图层然后设置其样式的方法，还有一种就是创建Overlay覆盖层的方法；对于第一种方式，本质上创建的还是一个矢量对象，只是将其表现形式更换了一下，用Style样式进行包装；而第二种方式则是创建的一个单独的覆盖层，然后通过设置其属性进行某些信息的展示，大牛博客；

开始博文：

JavaScript Code

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

//首先准备一个地图
var map = new ol.Map(
    {
        target: 'map' ,

        view: new ol.View(
        {
            center: ol.proj.fromLonLat([ 107 . 91080 , 25 . 23199 ]),
            zoom: 6
        }
        ),
        controls: ol.control.defaults().extend([mousePositionControl])
    }
    );
//再准备一个图层，注意url里有个count参数，开始没注意，默认是50
var xiaobanmap = new ol.layer.Vector(
    {
        source: new ol.source.Vector(
        {
            url: 'http://39.105.11.71:8081/geoserver/text/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=text:T_GIS_GONGYILIN_PY&outputFormat=application/json' ,
            format: new ol.format.GeoJSON(),
            visible: false
        }
        )
    }
    );
// 获取所有面要素，因为是异步加载，所以要采用事件监听的方式来判定是否加载完成
var listenerKey = xiaobanmap.getSource().on( 'change' , function ()
    {
         if (xiaobanmap.getSource().getState() === 'ready' )
        { // 判定是否加载完成
             //获取所有小斑
            xiaobanFeatures = xiaobanmap.getSource().getFeatures();
             //获取区域名称，如果已经获取到了，就不用重复获取了
             if (!xian.length || !xiang.length || !cun.length)
            {
                getZQ();
            }
             else
            {
                 //标注小斑，需要用到区域数据:
                labelXiaoBan();
            }
            xiaobanmap.getSource().unByKey(listenerKey); // 注销监听器
        }
    }
    );
//图层加入到map对象中
map.addLayer(xiaobanmap);
//这种标注前端实时渲染的，所有要采用缓存技术，加快显示速度（灵感来源于openlayers聚合图，上面那位大牛的博客里有聚合标注的文章）
var xiaobanCache = {};
//创建小斑标注TODO:
function labelXiaoBan()
{
    xiaobanmap.setStyle(polygonStyleFunction);
}
//创建面标注
function polygonStyleFunction(features, resolution)
{
     var tname = cun[features.T.SHENG_DM + features.T.SHIZD_DM + features.T.XIAN_DM + features.T.XIANG_DM + features.T.CUN_DM];
     var lname = (tname ? tname : "" ) + features.T.XBH; //resolution（分辨率）大时显示较长的标注
     var sname = tname ? tname : "" ; //resolution（分辨率）小时显示较短的标注

     return ( function ()
    {
// if (!xiaobanCache[resolution])//缓存有bug，暂时弃用
//{ //如果缓存中没有就进行创建，如果有就直接返回
            xiaobanCache[resolution] = new ol.style.Style(
                {
                    stroke: new ol.style.Stroke(
                    {
                        color: 'blue' ,
                        width: 1
                    }
                    ),
                    fill: new ol.style.Fill(
                    {
                        color: 'rgba(0, 0, 255, 0.1)'
                    }
                    ),
                    text: createTextStyle(features, resolution,
                    {
                        lname: lname,
                        sname: sname
                    }
                    )
                }
                );
//}
         return xiaobanCache[resolution]
    }
    )();

}
//创建文本样式
var createTextStyle = function (feature, resolution, name)
{
     return new ol.style.Text(
    {
        textAlign: 'center' ,
        textBaseline: 'middle' ,
        font: 'verdana' ,
        text: getText(resolution, name),
        fill: new ol.style.Fill(
        {
            color: 'blue'
        }
        ),
        stroke: new ol.style.Stroke(
        {
            color: '#ffffff' ,
            width: 3
        }
        ),
        offsetX: parseInt( 0 , 10 ),
        offsetY: parseInt( 0 , 10 ),
        placement: 'point' , //point 则自动计算面的中心点然后标注  line 则根据面要素的边进行标注
        overflow: false , //超出面的部分不显示
    }
    );
};
//根据比例显示文本
var getText = function (resolution, name)
{
     if (resolution > 37 )
    { //分辨率大于37，不标注
         return "" ;
    }
     else if (resolution > 9 )
    { //分辨率在9-37之间，显示短标注
         return name.sname;
    }
     else if (resolution > 0 )
    { //分辨率在0-9之间，显示长标注
         return name.lname;
    }
};

好了，现在我们来看下效果：

resolution值为 38时，不显示标注

resolution值为 12时，显示短标注

resolution值为 6时，显示长标注

最后：附上官网例子地址： openlayers官网例子
后记：年底了，最近一段时间很忙，996，人都要废了，每天晚上回去很累，但是依然要坚持学习，备考软考，明天就要考了，准备的也差不多了，希望一次过吧。在一线城市，人总是忙碌的，如果不能坚持学习，迟早是要被淘汰的。一线城市忙充电，不是胡说的。加油吧，骚年！坚持在博客记录所得，一是为了进行整理，二是希望能在以后自己回过头来看时，不至于觉得一无所有。