基于OpenLayers的WebGIS实例：添加标记要素

知秋

作图需求，基于环杭州湾区城市间的产业链空间投影数据，用表格和数据反映城市间的联系，想要将这种城市间的产业关联表现在地图上，提供的城市间产业关联的数据（数值已做处理）如图1。

接下来开始思考如何将该数据以地图的形式呈现出来。首先想到的是利用ArcGIS作图，但是本次作图是要表现要素（城市）间的关联性，如果在每个要素上添加一个饼状图，表现不直观而且没有方向感，如果手工划线勾箭头，或许可以实现，但不是本人的风格。

因此只能选择放弃ArcGIS，转而想到了OpenLayers——为WebGIS开发提供的JavaScript类库包，最好的开源地图引擎，用于实现标准格式发布的地图数据访问。OpenLayers灵活的地图表现形式，使我决定采用开发一个简单的WebGIS地图的方式来解决这个问题。

关于OpenLayers类库的介绍，本文不做具体说明，请查阅官方文档，我只负责丢链接——OpenLayers官方文档。

有了作图工具，然后思考作图总体思路，也就是要做出什么效果的图。设想如下：对于每个中心城市，选择一到两个关联度大的指向城市，用线条和箭头的方式表达城市间的相关性，线条粗细和颜色深浅代表关联度的大小（关联度大，线段粗，颜色深，颜色的作用是有层次感，便于识别），线段中间（或一侧）的箭头是流向方向，用黄色阴影表示流向的目的地，流入的越多，阴影部分越大。

下面介绍具体的实现方法。

1．数据准备及处理

本次任务需要准备的数据包括：

原始城市产业关联数据，格式为Excel；

地图底图，包括中国省级行政区划、地市级行政区划等矢量要素、河流水网（可选）等数据。

对于原始城市产业关联数据，可编码为JSON数据格式，方便后期数据读取和使用，格式示例如图2，其中，城市用首字母简单代替，“city”是中心城市，“neighbors”代表指向城市，“rv”表示关联度。

由于任务需求简单，本次作图不采用在线地图发布服务，使用QGIS工具（create web map插件）将ShapeFile矢量地图转换为可支持OpenLayers离线加载的GeoJSON数据格式。利用QGIS的该插件，可以直接将矢量地图发布为WebGIS，如图3，方便后续处理。

2. WebGIS编程开发

文档组织结构如图4所示。data存储数据等，images存储开发过程所需的图片素材，layers、resources和styles存放基于OpenLayers的WebGIS地图基本要素。

网页开发的基础就不多介绍了，想要做WebGIS，一定要有网页开发的基础，HTML、JavaScript、css等语言要熟悉。

现在已经有了基本的地图底图，要把表示城市关联的线段和箭头添加上去，首先要加载城市关联度json数据，然后根据城市关系构建线段图层要素，再根据线段及方向添加箭头，下面是实现代码。

1. // 加载关联度数据
   
2. var relations = eval('relations_fz');
   
3. 
   
4. // 创建OL要素集
   
5. var flightsSource = new ol.source.Vector({
   
6.         wrapX: false,
   
7.         loader: function() {
   
8.             for (var i = 0; i < relations.length; i++) {
   
9.             // 获取城市和指向城市
   
10.               var city = relations[i].city;
    
11.               var neighbors = relations[i].neighbors;
    
12.                
    
13.               var from = city_coords[city];
    
14. 
    
15.               // 在两个地点之间创建弧线要素
    
16.               for (var j = 0; j < neighbors.length; j++) {
    
17.                   var to = city_coords[neighbors[j]]
    
18.                   var arcGenerator = new arc.GreatCircle(
    
19.                       {x: from[0], y: from[1]},
    
20.                       {x: to[0], y: to[1]});
    
21. 
    
22.                   var arcLine = arcGenerator.Arc(10, {offset: 10});
    
23.                   if (arcLine.geometries.length === 1) {
    
24.                     var line = new ol.geom.LineString(arcLine.geometries[0].coords);
    
25.                     line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));
    
26.                      
    
27.                     var feature = new ol.Feature({
    
28.                       geometry: line
    
29.                        
    
30.                     });
    
31.                      
    
32.                     var dx = to[0] - from[0];
    
33.                     var dy = to[1] - from[1];
    
34.                     // 在线段的3/4处添加箭头，计算箭头的角度
    
35.                     var mx = from[0] + (to[0] - from[0]) / 4. * 3.;
    
36.                     var my = from[1] + (to[1] - from[1]) / 4. * 3.;
    
37.                     var rotation = Math.atan2(dy, dx);
    
38.                      
    
39.                     // arrows
    
40.                     point = new ol.geom.Point(to);
    
41.                     point.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));
    
42.                      
    
43.                     arrow_point = new ol.geom.Point([mx, my]);
    
44.                     arrow_point.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));
    
45.                      
    
46.                     var arrow_feature = new ol.Feature({
    
47.                       geometry: arrow_point
    
48.                     });
    
49.                      
    
50.                     var point_feature = new ol.Feature({
    
51.                       geometry: point
    
52.                     });
    
53.                      
    
54.                     // 设置显示格式，根据输入数据动态调整线条粗细、透明度和箭头大小等
    
55.                     style_l = new ol.style.Style({
    
56.                                     stroke: new ol.style.Stroke({
    
57.                                         color: 'rgba(135, 20, 0, ' + relations[i].rv[j] * 3 + ')',
    
58.                                         width: relations[i].rv[j] * 80
    
59.                                     })
    
60.                                 })
    
61.                     style_p = new ol.style.Style({
    
62.                                   image: new ol.style.Icon({
    
63.                                       src: './images/point.png',
    
64.                                       anchor: [1, 0.5],
    
65.                                       rotateWithView: true,
    
66.                                       scale: relations[i].rv[j] * 0.75
    
67.                                     })
    
68.                                 })
    
69.                     style_ap = new ol.style.Style({
    
70.                                   image: new ol.style.Icon({
    
71.                                       src: './images/arrow.png',
    
72.                                       anchor: [0.5, 0.5],
    
73.                                       rotateWithView: true,
    
74.                                       rotation: -rotation,
    
75.                                       scale: relations[i].rv[j] * 0.3
    
76.                                     })
    
77.                                 })
    
78.                                  
    
79.                     // 添加至OL要素集
    
80.                     feature.setStyle(style_l);
    
81.                     point_feature.setStyle(style_p);
    
82.                     arrow_feature.setStyle(style_ap);
    
83.                  
    
84.                     flightsSource.addFeature(point_feature);
    
85.                     flightsSource.addFeature(arrow_feature);
    
86.                     flightsSource.addFeature(feature);
    
87.                   }
    
88.               }
    
89.             }
    
90.             //map.on('postcompose', animateFlights);
    
91.         }
    
92.       });
    
93.       
    
94. // 添加至地图
    
95. var flightsLayer = new ol.layer.Vector({
    
96.     source: flightsSource,
    
97. });
    
98. map.addLayer(flightsLayer);
    
99.    

复制代码

然后设置地图要素的Style，以城市样式为例。

1. var styleCache_={}
   
2. var style_province = function(feature, resolution){
   
3.     var value = ""
   
4.     var style = [ new ol.style.Style({
   
5.         stroke: new ol.style.Stroke({color: '#555', lineDash: [1,2,3,4,5,6], lineCap: 'square', lineJoin: 'bevel', width: 1.5}),
   
6.     })];
   
7.     if ("" !== null) {
   
8.         var labelText = String("");
   
9.     } else {
   
10.         var labelText = ""
    
11.     }
    
12.     var key = value + "_" + labelText
    
13. 
    
14.     if (!styleCache_[key]){
    
15.         var text = new ol.style.Text({
    
16.               font: '10px \'None\', sans-serif',
    
17.               text: labelText,
    
18.               textBaseline: "center",
    
19.               textAlign: "left",
    
20.               offsetX: 5,
    
21.               offsetY: 3,
    
22.               fill: new ol.style.Fill({
    
23.                 color: 'rgba(None, None, None, 255)'
    
24.               }),
    
25.             });
    
26.         styleCache_[key] = new ol.style.Style({"text": text})
    
27.     }
    
28.     var allStyles = [styleCache_[key]];
    
29.     allStyles.push.apply(allStyles, style);
    
30.     return allStyles;
    
31. };

复制代码

至此，WebGIS地图制作完成，可以交差了，本次任务结束。

转自 gaohr.win

jackieecon

thanks for sharing, learnt a lot!

lym6w0

谢谢您的分享！