OpenLayers基础教程——popup弹出框

在OpenLayers中，一般使用ol.Overlay实现popup弹出框，弹出框一般用于显示地图上兴趣点的一些属性信息，如下图所示。下面开始介绍实现方法。

在SqlServer中新建一张省会数据表——ProvincialCapital，字段如下表所示：

测试数据如下：

1	杭州市	330100	 Hangzhou	浙江	   0571	  310026   120.153576	30.287459
2	苏州市	320500	 Suzhou	    江苏	   0512	  215002   120.619585	31.299379
3	合肥市	340100	 Hefei	    安徽	   0551	  230001   117.283042	31.86119
4	上海市	310100	 Shanghai	上海	   021	  200000   121.472644	31.231706

新建一个ashx文件，加入如下代码：

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;

namespace WebApplication1.ashx
{
    /// 

    /// GetDataHandler 的摘要说明
    /// 
    public class GetDataHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 查询数据
            DataTable dataTable = new DataTable();
            using (SqlDataAdapter adapter = new SqlDataAdapter("select * from ProvincialCapital", ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()))
            {
                adapter.Fill(dataTable);
            }

            // 转换为实体列表
            List list = new List();
            foreach (DataRow dataRow in dataTable.Rows)
            {
                list.Add(new ProvincialCapital
                    {
                        CityName = Convert.ToString(dataRow["CityName"]),
                        ProvinceCode = Convert.ToString(dataRow["ProvinceCode"]),
                        Pinyin = Convert.ToString(dataRow["Pinyin"]),
                        Attribution = Convert.ToString(dataRow["Attribution"]),
                        CityCode = Convert.ToString(dataRow["CityCode"]),
                        PostCode = Convert.ToString(dataRow["PostCode"]),
                        Longitude = Convert.ToDouble(dataRow["Longitude"]),
                        Latitude = Convert.ToDouble(dataRow["Latitude"])
                    });
            }

            context.Response.Write(JsonConvert.SerializeObject(list));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    public class ProvincialCapital
    {
        /// 

        /// 城市名称
        /// 
        public string CityName { get; set; }

        /// 

        /// 省份编码
        /// 
        public string ProvinceCode { get; set; }

        /// 

        /// 拼音
        /// 
        public string Pinyin { get; set; }

        /// 

        /// 归属
        /// 
        public string Attribution { get; set; }

        /// 

        /// 城市编码
        /// 
        public string CityCode { get; set; }

        /// 

        /// 邮编
        /// 
        public string PostCode { get; set; }

        /// 

        /// 经度
        /// 
        public double Longitude { get; set; }

        /// 

        /// 纬度
        /// 
        public double Latitude { get; set; }
    }
}