前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >唐宋文学诗人分布展示

唐宋文学诗人分布展示

作者头像
lzugis
发布2018-10-23 11:23:21
4220
发布2018-10-23 11:23:21
举报

概述:

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

效果:

获取的数据

概览

放大后

详细信息

实现:

1、数据获取

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

2、实现

本示例实现代码如下:

代码语言:javascript
复制
		    $.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);  
			    });  
		    });
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年06月18日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档