唐宋文学诗人分布展现

概述：

本文实现唐宋诗人分布数据的获取与webgis的展现。

效果：

获取的数据

概览

放大后

详细信息

实现：

一、数据获取

本文的数据是从搜韵获取而来的，地址为http://sou-yun.com/poetlife.html，为方便你们使用，将数据保存到了百度云盘，下载信息为：连接：http://pan.baidu.com/s/1b3fa4e 密码：xik1

二、实现

本示例实现代码以下：

		    $.get("../data/poets.json",function(result){
		    	var markers = result.Traces[0]["Markers"];
		    	console.log(markers);
		    	var features = [];
		    	for(var i=0,len=markers.length;i<len;i++){
		    		var marker = markers[i];
		    		var geom = new ol.geom.Point([marker.Longitude, marker.Latitude]);
		    		geom.transform('EPSG:4326', 'EPSG:3857');
		    		var feature = new ol.Feature({
  						geometry: geom,
  						detail: marker.Detail,
  						title: marker.Title,
  						uri:marker.RequestUri
					});
		    		features.push(feature);
		    	}
		    	var vectorSource = new ol.source.Vector({
				    features: features
				});
				var vector = new ol.layer.Vector({
					source: vectorSource,
					style: function(feature, res){
						var title = feature.get("title");
			            return new ol.style.Style({  
			              	image: new ol.style.Icon({
            					anchor: [0, 0],
            					src: "img/red.png"
            				}),
            				text: new ol.style.Text({
								text: title,
								offsetX:15,
								offsetY:30,
								textAlign:"center",
								fill: new ol.style.Fill({
									color: '#ffffff'
								}),
								stroke: new ol.style.Stroke({
									color: '#0000ff',
									width: 2
								})
							})
			            }) 
					}
				});
				map.addLayer(vector);
				
				var select = new ol.interaction.Select({  
			        condition: ol.events.condition.click  
			    });  
			    map.addInteraction(select);  
			    
			    var container = document.getElementById('popup');  
			    var content = document.getElementById('popup-content');  
			    var title = document.getElementById('popup-title');  
			    var closer = document.getElementById('popup-closer');  
			    closer.onclick = function(){  
			        container.style.display = 'none';  
			        closer.blur();  
			        return false;  
			    };  
			    var overlay = new ol.Overlay({  
			        element: container  
			    });  
			    map.addOverlay(overlay);  
			      
			    select.on('select', function(e) {  
			        var feature = e.target.getFeatures().item(0);  
			        var coordinate = feature.getGeometry().getCoordinates();  
			        overlay.setPosition(coordinate);  
			        //districtname,districtcode,latitude,longitude,name,address,picinfo  
			        $(content).html("").append(feature.get("detail"));  
			        container.style.display = 'block';  
			        title.innerHTML = feature.get("title");  
			        title.style.display = 'block';  
			        map.getView().setCenter(coordinate);  
			    });  
		    });

---------------------------------------------------------------------------------------------------------------

技术博客

CSDN：http://blog.csdn.NET/gisshixisheng

博客园：http://www.cnblogs.com/lzugis/

在线教程

http://edu.csdn.Net/course/detail/799

Github

https://github.com/lzugis/

联系方式

q       q:1004740957

e-mail:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)

             337469080(Android)