唐宋文学诗人分布展示

概述：

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

效果：

获取的数据

概览

放大后

详细信息

实现：

1、数据获取

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

2、实现

本示例实现代码如下：

    $.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:[e-mail]

公众号:lzugis15

Q Q 群:452117357(webgis)

             337469080(Android)