C# 在asp.net中在地图上显示SQL server数据_C#_Asp.net

C# 在asp.net中在地图上显示SQL server数据

c# asp.net

C# 在asp.net中在地图上显示SQL server数据,c#,asp.net,C#,Asp.net,我有一个项目，需要实现一个地图接口。例如，我有一份印度众多患者的名单，其中显示了各种疾病。病人在不同的状态下被分开。行刑时，该疾病应显示印度地图。印度病人人数最多的州应该涂上不同的颜色。类似地，地图应该用不同的颜色绘制前五个州，这五个州的患者数量最多我想出了一个代码片段，它只显示了印度的静态地图。我需要在其中填充颜色，以显示包含最多患者数量的前五个州数据存储在sql server 2008中 <map id="latitude-and-longitude-map-of-india" n

我有一个项目，需要实现一个地图接口。例如，我有一份印度众多患者的名单，其中显示了各种疾病。病人在不同的状态下被分开。行刑时，该疾病应显示印度地图。印度病人人数最多的州应该涂上不同的颜色。类似地，地图应该用不同的颜色绘制前五个州，这五个州的患者数量最多

我想出了一个代码片段，它只显示了印度的静态地图。我需要在其中填充颜色，以显示包含最多患者数量的前五个州

数据存储在sql server 2008中

<map id="latitude-and-longitude-map-of-india" name="latitude-and-longitude-map-of-india">
  <area shape="poly" alt="Jammu & Kashmir" coords="184,143,177,138,171,139,171,134,156,127,153,101,163,95,164,89,159,87,160,82,151,78,150,74,142,74,144,67,151,60,162,59,160,55,166,58,172,53,176,54,177,55,183,53,193,65,204,72,206,77,215,80,215,84,226,82,236,76,241,76,243,72,246,76,254,76,259,80,257,97,252,98,251,100,248,101,249,107,246,110,241,109,239,112,241,116,240,119,240,123,246,125,251,136,240,140,237,139,237,136,230,138,229,134,226,137,219,129,213,133,205,127,198,127,191,132,192,135,188,141"
                                            href="Jammu.aspx" title="Jammu & Kashmir" />
  <area shape="poly" alt="Himachal Pradesh" coords="202,165,203,161,198,159,197,160,194,156,192,148,188,146,188,141,192,135,191,133,197,127,205,127,213,134,218,129,226,136,230,134,231,138,236,149,236,154,239,162,227,162,222,166,221,177,212,176,210,170,205,167"
                                            href="Himachal Pradesh.aspx" title="Himachal Pradesh" />
  <area shape="poly" alt="Punjab" coords="156,183,159,181,159,175,171,164,171,153,172,148,181,144,183,142,188,142,188,146,192,147,193,154,197,160,199,159,203,161,202,165,207,168,207,176,201,180,196,183,195,189,183,189,181,190,176,184,168,185"
                                            href="Punjab.aspx" title="Punjab" />
  <area shape="poly" alt="Haryana" coords="187,212,183,201,182,197,171,196,169,185,176,184,180,190,183,189,194,189,196,183,207,177,207,168,211,172,212,176,218,177,213,183,211,191,212,203,212,204,206,207,206,211,211,213,215,211,217,217,216,222,207,226,207,219,206,216,202,220,197,218,194,224,191,221,193,214"
                                            href="Haryana.aspx" title="Haryana" />
  <area shape="poly" alt="Delhi" coords="213,208,212,203,205,208,206,211,211,213,215,211"
                                            href="Delhi.aspx" title="Delhi" />
  <area shape="poly" alt="Uttrakhand" coords="253,166,248,167,244,159,241,157,238,162,228,162,221,166,221,177,223,180,221,183,220,189,225,190,227,189,231,185,234,193,238,194,237,198,249,205,257,205,260,198,261,194,262,187,270,181,271,178,259,174,258,170"
                                            href="Uttrakhand.aspx" title="Uttrakhand" />
  <area shape="poly" alt="Uttar Pradesh" coords="228,241,220,240,215,243,215,240,220,238,217,237,218,232,211,225,217,221,217,215,214,210,211,204,211,190,214,180,220,176,223,180,221,183,220,189,225,190,228,188,231,185,234,193,238,194,237,198,249,205,257,205,263,209,267,208,279,216,286,222,290,222,299,225,302,229,310,231,313,228,319,229,328,244,320,246,325,249,322,251,323,254,331,259,322,262,312,270,312,275,315,280,313,283,312,290,309,294,302,292,302,288,302,280,296,280,293,278,288,276,287,273,281,272,278,272,276,275,271,274,270,273,263,273,261,267,253,272,246,270,243,272,239,269,237,267,232,269,238,281,240,284,238,288,233,286,230,286,228,278,228,275,231,272,230,268,234,265,237,263,238,258,243,250,239,245,235,243,229,242"
                                            href="Uttar Pradesh.aspx" title="Uttar Pradesh" />
  <area shape="poly" alt="Rajasthan" coords="112,278,104,264,105,260,98,258,96,255,96,252,98,244,90,242,87,239,87,234,96,224,101,217,107,219,108,223,111,224,116,222,124,221,132,211,133,206,142,201,144,200,150,189,150,185,155,183,169,185,171,195,171,196,182,197,187,212,193,214,191,221,194,224,197,218,202,220,206,216,207,220,207,226,211,224,211,225,218,232,217,237,220,238,215,240,215,243,221,240,227,241,225,243,208,254,202,259,200,262,203,268,211,268,214,267,214,273,205,274,206,279,210,280,208,284,205,284,206,291,201,288,195,288,188,295,183,294,185,291,188,291,187,284,189,283,188,279,179,280,180,274,179,273,175,277,173,277,171,282,172,285,171,287,173,287,173,297,167,302,170,306,164,308,152,299,148,295,149,290,144,288,146,284,144,281,141,284,126,278,111,278"
                                            href="Rajasthan.aspx" title="Rajasthan" />
  <area shape="poly" alt="Madhya Pradesh" coords="160,328,160,323,159,323,160,318,164,315,165,311,164,308,170,306,167,302,173,297,173,288,171,287,172,284,171,282,173,277,175,277,179,273,180,274,179,280,182,280,188,279,189,283,187,284,188,291,185,291,183,294,187,295,188,295,195,288,201,288,206,291,205,284,208,284,210,280,206,279,205,274,214,273,214,267,211,268,204,268,200,262,203,258,208,254,223,244,227,241,230,242,236,243,239,245,243,250,238,258,237,263,230,268,231,271,228,275,228,280,230,286,233,286,238,288,240,284,232,269,237,267,243,272,246,270,253,272,261,267,263,273,269,273,276,275,278,272,285,272,288,274,288,276,296,280,302,280,302,292,299,296,284,295,284,301,290,300,294,305,293,308,290,309,283,319,277,320,271,330,270,339,267,340,261,334,256,336,247,333,238,336,233,337,228,336,223,339,217,338,216,332,209,333,204,336,202,342,196,345,192,338,178,338,173,334,166,333,161,336,156,335,156,330"
                                            href="Madhya Pradesh.aspx" title="Madhya Pradesh" />
  <area shape="poly" alt="Gujarat" coords="125,338,109,348,99,346,79,327,84,325,87,325,87,324,77,324,74,318,75,316,80,320,95,315,101,307,101,305,98,308,86,311,70,304,66,294,68,294,73,291,71,291,64,294,63,290,73,288,73,284,88,284,90,286,94,287,98,283,102,283,104,286,107,286,111,283,111,278,126,278,141,284,144,281,146,284,144,288,149,290,148,295,157,303,164,308,165,311,164,315,160,318,159,323,160,323,160,328,156,330,156,335,160,336,159,338,153,342,156,347,156,351,151,352,150,350,148,352,147,360,144,360,142,357,136,359,136,356,140,351,139,348,137,341,135,338,135,336,141,332,134,332,137,327,135,325,137,323,129,321,128,327,125,328,126,330,128,331,129,334"
                                            href="Gujarat.aspx" title="Gujarat" />
  <area shape="poly" alt="Dadar & Nagar Haveli" coords="140,361,139,358,141,357,143,358,143,360"
                                            href="http://www.mapsofindia.com/lat_long/dadraandnagarhaveli/" title="Dadar & Nagar Haveli" />
  <area shape="poly" alt="Maharashtra" coords="147,433,144,422,141,401,137,385,137,373,134,364,136,359,139,359,140,361,144,360,146,360,147,360,148,352,150,350,151,352,156,351,156,347,153,342,160,338,160,336,161,335,166,333,168,334,173,334,178,338,192,338,196,345,202,342,204,336,209,333,216,332,217,338,223,339,228,336,234,337,242,335,247,333,255,336,261,334,267,341,264,345,268,351,267,358,265,360,267,362,266,366,273,371,272,376,267,373,263,380,263,387,258,386,256,380,258,377,257,372,253,370,250,373,245,370,240,370,235,367,230,367,228,376,223,377,222,381,223,384,218,390,217,394,214,394,212,391,210,396,206,397,203,402,197,405,196,411,183,408,182,411,185,413,184,418,179,418,175,419,172,417,171,420,167,424,162,423,161,425,164,430,164,433,160,439,155,440,154,438,150,439"
                                            href="Maharashtra.aspx" title="Maharashtra" />
  <area shape="poly" alt="Goa" coords="157,454,159,452,161,446,160,439,155,440,153,438,150,439,154,446,156,455"
                                            href="Goa.aspx" title="Goa" />
  <area shape="poly" alt="Karnataka" coords="169,489,165,470,162,461,157,455,159,452,161,445,160,439,164,433,164,429,161,425,162,423,167,424,171,420,172,417,175,419,178,418,184,418,185,413,182,411,183,408,196,411,197,405,203,402,206,397,210,396,212,391,214,394,217,394,218,402,215,404,215,407,218,408,214,414,216,416,215,424,212,426,216,430,215,436,209,436,208,441,207,446,209,447,209,451,204,452,204,459,205,464,206,469,209,465,213,465,212,469,207,471,207,474,211,474,213,472,215,475,219,474,223,472,227,473,226,476,231,478,231,482,234,483,235,486,228,492,222,490,217,496,217,499,215,502,215,502,219,502,219,507,215,508,215,510,206,510,203,513,196,511,190,505,186,506,179,500,177,494,169,490"
                                            href="Karnataka.aspx" title="Karnataka" />
  <area shape="poly" alt="Kerala" coords="209,572,211,568,210,565,210,561,209,558,213,552,214,549,210,548,211,537,210,536,203,537,205,528,201,525,203,522,202,520,198,520,198,517,194,515,194,512,196,511,190,505,186,506,179,500,177,494,169,490,178,509,185,519,191,536,197,550,194,551,201,565"
                                            href="Kerala.aspx" title="Kerala" />
  <area shape="circle" alt="Pondicherry" coords="257,518,2" href="http://www.mapsofindia.com/lat_long/pondicherry/"
                                            title="Pondicherry" />
  <area shape="poly" alt="Tamil Nadu" coords="230,558,237,557,242,554,246,555,246,553,241,553,240,550,246,542,248,536,257,536,257,519,256,520,255,519,255,516,256,509,256,504,262,497,266,488,264,479,261,478,255,483,250,483,247,487,238,487,235,490,235,494,231,494,228,492,222,490,217,496,217,499,215,501,215,502,219,502,219,507,215,508,215,510,206,510,203,513,195,511,194,512,194,515,198,517,198,520,202,520,203,522,201,525,205,528,203,537,210,536,211,538,210,548,214,549,212,554,209,558,210,562,210,566,211,568,209,573,215,577,225,570,227,563,229,559"
                                            href="Tamilnadu.aspx" title="Tamil Nadu" />
  <area shape="poly" alt="Andhra Pradesh" coords="260,447,265,438,269,436,276,438,282,427,289,428,297,425,300,419,297,416,307,408,317,401,327,392,338,381,339,378,337,377,331,382,331,384,323,382,319,376,315,380,315,383,310,386,309,392,306,390,303,393,300,389,299,394,298,397,292,398,288,400,288,404,286,406,285,410,282,412,275,415,272,418,268,417,266,419,268,422,267,423,261,419,259,424,248,426,244,432,238,435,232,436,227,439,219,439,215,436,209,436,207,446,209,447,209,452,204,452,204,459,206,469,209,465,213,465,212,469,207,471,207,474,211,474,213,472,215,475,220,474,223,472,227,473,226,476,230,478,231,478,231,482,234,483,235,486,228,492,230,494,235,494,235,490,238,487,247,487,250,483,255,483,261,478,264,479,262,472,261,467,262,463,261,456,260,448"
                                            href="Andhra Pradesh.aspx" title="Andhra Pradesh" />
  <area shape="poly" alt="Chhattisgarh" coords="298,365,290,361,291,365,295,375,295,383,288,392,284,394,282,401,282,402,277,402,272,394,270,389,266,388,264,389,262,387,263,386,263,380,267,373,272,376,273,371,266,366,267,363,265,360,267,358,268,351,264,345,267,341,266,340,269,339,270,339,271,329,277,320,283,319,290,309,293,308,294,305,290,300,284,301,284,295,299,296,302,292,309,294,313,289,322,299,324,297,325,309,330,309,326,315,325,315,325,320,318,324,315,334,312,342,302,343,297,350,299,361,302,363,302,366"
                                            href="Chhattisgarh.aspx" title="Chhattisgarh" />
  <area shape="poly" alt="Orissa" coords="362,363,352,366,343,372,337,377,331,382,331,384,324,382,323,382,319,376,315,380,315,383,310,386,309,392,306,390,303,393,300,389,298,397,292,398,285,401,282,401,284,394,289,391,295,383,295,374,291,364,290,361,299,365,302,366,302,362,302,363,299,361,297,350,302,343,312,342,318,324,325,320,328,320,333,319,339,318,341,317,341,324,344,325,347,323,353,324,356,326,358,322,357,315,364,318,370,322,375,325,383,331,373,335,372,338,375,350,369,355,364,360,361,361"
                                            href="Orissa.aspx" title="Orissa" />
  <area shape="poly" alt="Jharkhand" coords="381,286,385,282,385,274,385,267,383,264,380,264,374,269,372,278,364,279,364,282,361,282,360,279,356,276,351,276,349,279,343,282,340,283,336,282,329,284,326,280,321,280,314,281,313,285,313,289,322,299,324,297,325,309,330,309,326,315,324,315,325,320,330,320,341,317,341,323,341,324,344,325,347,323,353,324,356,326,358,322,357,315,364,318,369,322,371,318,369,314,365,311,365,308,360,308,358,305,353,303,354,299,358,298,361,299,364,295,370,295,371,291,375,292,377,289"
                                            href="Jharkhand.aspx" title="Jharkhand" />
  <area shape="poly" alt="Bihar" coords="351,243,349,242,349,239,344,240,341,240,339,238,335,237,332,236,332,230,327,230,324,228,319,229,328,244,320,246,325,249,322,251,323,254,331,259,322,262,312,270,312,275,315,280,314,281,326,280,329,284,336,282,340,283,349,279,351,276,356,276,360,279,361,282,364,282,364,279,372,278,374,269,380,264,383,264,385,261,387,261,387,258,383,253,390,246,389,243,386,245,374,245,369,244,366,245,359,242,351,244"
                                            href="Bihar.aspx" title="Bihar" />
  <area shape="poly" alt="West Bengal" coords="401,325,405,330,409,327,407,315,404,303,404,300,401,300,401,295,398,293,398,290,400,290,400,282,393,280,389,277,389,273,393,271,395,266,402,265,400,261,396,261,391,255,388,255,388,251,392,247,394,243,398,246,401,246,403,244,407,250,411,250,413,246,416,244,415,237,404,236,400,234,397,230,387,232,389,236,389,243,390,246,383,253,387,258,387,261,385,261,383,264,385,267,385,282,377,289,375,292,371,291,370,295,364,295,361,299,358,298,354,299,353,303,358,305,360,308,364,308,365,308,365,312,364,311,369,314,371,318,369,321,369,321,383,331,387,328,390,326,394,326,396,330,399,328,400,325"
                                            href="West Bengal.aspx" title="West Bengal" />
  <area shape="poly" alt="Sikkim" coords="386,228,388,218,395,213,399,217,397,224,400,227,398,230,386,233"
                                            href="Sikkim.aspx" title="Sikkim" />
  <area shape="poly" alt="Meghalaya" coords="462,263,466,261,463,258,462,255,458,253,454,253,455,247,450,247,440,253,435,251,422,251,417,253,418,262,430,264,448,263,451,262,455,263,458,265"
                                            href="Meghalaya.aspx" title="Meghalaya" />
  <area shape="poly" alt="Tripura" coords="460,280,459,288,454,290,453,294,452,295,451,302,449,302,446,298,446,300,440,289,443,283,451,279,457,276"
                                            href="Tripura.aspx" title="Tripura" />
  <area shape="poly" alt="Mizoram" coords="465,275,470,276,470,280,476,281,478,291,478,299,474,300,474,309,476,312,472,318,467,316,462,302,460,292,459,288,460,280,464,278"
                                            href="Mizoram.aspx" title="Mizoram" />
  <area shape="poly" alt="Manipur" coords="490,282,476,281,470,280,469,276,471,274,472,268,476,260,479,259,481,252,489,254,492,252,495,256,494,258,497,259,496,266,492,277"
                                            href="Manipur.aspx" title="Manipur" />
  <area shape="poly" alt="Nagaland" coords="483,248,485,239,494,230,501,225,502,232,500,234,501,240,501,247,499,253,495,256,492,252,488,254,481,252,479,260,476,260,476,257,473,254,480,248"
                                            href="Nagaland.aspx" title="Nagaland" />
  <area shape="poly" alt="Asom" coords="475,229,468,230,462,229,454,232,451,232,440,234,432,234,432,235,424,233,420,236,415,236,416,244,415,245,416,248,418,254,417,252,418,253,422,251,435,251,440,253,450,247,455,247,454,253,458,253,462,255,463,258,466,260,465,262,460,264,460,267,458,268,457,276,460,280,464,278,465,275,470,276,471,273,472,268,476,260,476,257,473,254,480,248,483,248,485,239,491,233,494,230,501,225,503,225,506,221,514,219,514,216,511,216,510,213,510,210,512,207,510,206,504,209,489,216,486,216,481,223,478,228,474,229"
                                            href="Assam.aspx" title="Asom" />
  <area shape="poly" alt="Arunachal Pradeh" coords="523,216,522,218,515,220,505,231,502,232,501,226,503,225,507,221,514,218,514,216,510,215,510,210,512,207,512,207,510,206,489,216,486,216,481,223,478,228,470,230,462,229,454,232,448,232,452,229,451,223,450,222,443,220,443,215,448,217,453,214,456,216,460,212,459,209,469,204,469,199,479,197,481,191,489,185,492,188,501,189,502,184,510,180,516,183,512,187,514,190,519,186,520,192,516,198,518,199,523,197,534,200,533,203,535,204,528,210,529,215,533,220,531,220,529,219,526,216"
                                            href="Arunachal Pradesh.aspx" title="Arunachal Pradeh" />
  <area shape="poly" alt="Telangana" coords="216,430,212,426,215,424,216,416,214,414,218,408,215,407,215,404,218,402,217,393,217,390,218,391,223,384,222,381,223,377,228,376,230,367,236,367,240,371,240,370,245,370,250,373,252,371,253,370,257,372,258,377,256,379,258,386,262,387,264,389,266,387,270,389,274,396,277,402,282,403,282,401,286,401,288,400,288,405,286,406,285,410,275,415,272,418,268,417,266,419,268,422,267,423,261,419,259,424,248,426,244,432,238,435,233,436,226,439,219,439,215,436,216,430"
                                            href="Telangana.aspx" title="Telangana" />
  <area shape="default" nohref="nohref" alt="" />
                                    </map>

我想在印度地图上显示我的SR数据。。但我不知道如何将这些数据从SQL调用到map页面

如何调用映射区域的Sql server数据OnClick事件

将我的数据在地图上显示为5种颜色类别，从最高类别到最低类别

希望2在从Sql Server 2008调用映像时显示此类型的数据列表项

我应该如何填写Sql Server 2008调用数据的颜色

我找到了一些关于改变这一点的文章，但这篇文章是基于java的。我不知道java下面是复杂级别的代码。有人能帮助在c#和asp.net上转换这些java代码吗

例：对于1-1000人，我必须显示红色。对于1000-5000人口，我必须显示蓝色

我使用的代码是这样的，但它不会根据人口的范围显示不同的颜色

var mapData = {
  "AF": 1000,
  "AL": 5000,
  "DZ": 20000,
  ...
};

     try{
                        $('#id').vectorMap(
                        {
                            map : 'world_mill_en',
                            series : {
                                regions : [ {
                                    initial : {
                                        fill : 'white',
                                        "fill-opacity" : 1,
                                        stroke : 'none',
                                        "stroke-width" : 0,
                                        "stroke-opacity" : 1
                                    },
                                    hover : {
                                        "fill-opacity" : 0.8
                                    },
                                    selected : {
                                        fill : 'yellow'
                                    },
                                    selectedHover : {},
                                    values : mapData,
                                    scale : [  '#C8EEFF', '#0071A4' ],
                                    normalizeFunction : 'polynomial'
                                } ]
                            },
                            onRegionLabelShow : function(e, el, code) {
                                el.html(el.html()+' (Population - '+mapData[code]+')');
                            }
                        });
            }
    catch(err){
            alert(err);
        }

有人回答了这篇文章。答案如下: 根据您的区域和颜色创建一个JSON，其中包含这样的计数和颜色代码

var colorData = {
     "1" : "#C8EEFF", 
     "2" : "#0071A4",
     "3" : "#C8EEFF", 
     "4" : "#0071A4",
     "5" : "#C8EEFF", 
     "6" : "#0071A4"
}

并将此JSON传递给scale:colorData

请建议将此代码转换为asp.net。提前感谢

使用

MAP

标记很难做到这一点，因为它本身不支持对热点（可单击区域）着色。你可以试试这个插件：看起来很有前途。它允许您为热点着色，并进行高亮显示和着色

显示地图的其他想法：

推荐：基于平铺的地图，如传单和地图盒。例如：

SVG。以下是一些免费的印度SVG地图：我复制了其中的一部分，作为一个非常简单的概念证明，展示了如何通过单击SVG路径来显示数据：

HTML画布。（不推荐）

用于从SQL Server获取数据：看起来您已经绑定到GridView以显示原始数据。这很好-然后必须将网格中的记录与特定状态的形状对象相关联。如果继续使用

MAP

标记，则必须首先将

id

属性分配给每个

区域

元素。然后，您可以使用JavaScript（以及上面的插件）将每个数据点关联到一个状态形状

这是一个非常简单的概念证明。您在问题中链接的地图图像与您的

地图

尺寸不匹配，所以我只是伪造了它

单击

显示代码段

，然后向下滚动并单击

运行代码段

查看它。然后在地图周围单击。我只为几个州定义了数据，但你应该明白了

$（“区域[shape='poly']）。在（“单击”，函数（）{
var stateName=$（this.prop（“alt”）；
var displayText=stateName；
var$stateRow=$（“#数据体tr”）.filter（函数（）{
返回$（this）.data（“state”）==stateName；
});
if（$stateRow&&$stateRow.length）{
//找到数据；显示它
//代码只是概念性的证明；最好使用JSON数据或比屏幕抓取表更干净的东西
var cancerCases=$stateRow.children（'：第n个子项（2'））.text（）；
var aidsCases=$stateRow.children（':n第n个子项（3）'）.text（）；
var sarsCases=$stateRow.children（':n第n个子项（4'））.text（）；
displayText+='\n癌症病例：'+cancerCases+'\nAIDS病例：'+aidsCases+'\nSARS病例：'+sarsCases；
}否则{
displayText+='\n没有为此状态定义数据'；
}
警报（显示文本）；
return false；//暂时禁用导航…如果需要，在此处执行操作
});
img{
高度：600px；
/*img和地图不匹配；这只是一个展示概念证明的黑客，而不是精确的尺寸*/
}
运输署，
th{
填充：6px 12px；
}
th{
背景色：#ccc；
}

陈述
癌症病例
爱滋病个案
非典型肺炎个案
旁遮普省
4564554
55466
23434
泰兰加纳
43453
3422
3346
恰尔肯德邦
6234
25234
665427
拉贾斯坦邦
362
432
7982
北方邦
44300
45345
24324
向我们展示您所做的尝试。通过此操作，我的地图将显示静态数据，这意味着仅显示印度地图，然后单击“州”按钮。它显示了特定的状态。代码如下：Plz建议该项目背后的一些想法
var colorData = {
     "1" : "#C8EEFF", 
     "2" : "#0071A4",
     "3" : "#C8EEFF", 
     "4" : "#0071A4",
     "5" : "#C8EEFF", 
     "6" : "#0071A4"
}