近期應客戶的要求， 需要在地圖中呈現熱力圖效果，我們知道在B/S中百度地圖可以直接呈現熱力圖，相對要容易很多。在C/S中呈現的並不是特別完美。
既然客戶有需求，就抽出半天時間給弄了一個熱力圖的組件。 近期跟GDI繪圖組件干上了。
沒啥技術含量的一個小組件。 就是一個繪圖，需要掌握GDI繪圖要素。 由於是GDI繪圖 在WPF中也會有獨到的優勢， 繪制熱力圖模版也可以進行完全自定義。
整理了一下發現代碼量也就400多行，還包含大量的回車符。支持地圖源切換，公里標記，以及創建熱力圖。
在不同的Zoom中呈現對應的數據信息。 下面有個GIF動態圖，相對比較大。 耐心等待。
此窗口用的WPF ,需要考慮經緯度坐標的對應轉換。
還需要注意在地圖中需要對坐標的一個數據轉換。
在網上隨便找了一個轉換坐標的處理。能用就行。 不做太精確。 等客戶的數據對接即可。
public static double pi = 3.14159265358979324;
public static double a = 6378245.0;
public static double ee = 0.00669342162296594323;
public static double[] transform(double wgLat, double wgLon)
{
double[] latlng = new double[2];
double dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
double dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
double radLat = wgLat / 180.0 * pi;
double magic = Math.Sin(radLat);
magic = 1 - ee * magic * magic;
double sqrtMagic = Math.Sqrt(magic);
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.Cos(radLat) * pi);
latlng[0] = wgLat + dLat;
latlng[1] = wgLon + dLon;
return latlng;
}
private static double transformLat(double x, double y)
{
double ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.Sqrt(Math.Abs(x));
ret += (20.0 * Math.Sin(6.0 * x * pi) + 20.0 * Math.Sin(2.0 * x * pi)) * 2.0 / 3.0;
ret += (20.0 * Math.Sin(y * pi) + 40.0 * Math.Sin(y / 3.0 * pi)) * 2.0 / 3.0;
ret += (160.0 * Math.Sin(y / 12.0 * pi) + 320 * Math.Sin(y * pi / 30.0)) * 2.0 / 3.0;
return ret;
}
private static double transformLon(double x, double y)
{
double ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.Sqrt(Math.Abs(x));
ret += (20.0 * Math.Sin(6.0 * x * pi) + 20.0 * Math.Sin(2.0 * x * pi)) * 2.0 / 3.0;
ret += (20.0 * Math.Sin(x * pi) + 40.0 * Math.Sin(x / 3.0 * pi)) * 2.0 / 3.0;
ret += (150.0 * Math.Sin(x / 12.0 * pi) + 300.0 * Math.Sin(x / 30.0 * pi)) * 2.0 / 3.0;
return ret;
}
貼出部分代碼
放了一個控件，以及三個button按鈕
private void MapExpansion_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
}
private void MapExpansion_OnTileLoadComplete(long ElapsedMilliseconds)
{
//Console.WriteLine("加載時間： " + ElapsedMilliseconds);
}
private void MapExpansion_OnTileLoadStart()
{
//Console.WriteLine("開始加載： " + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"));
}
public int MapProviderIndex
{
get
{
return (int)base.GetValue(MapExpansion.MapProviderIndexProperty);
}
set
{
base.SetValue(MapExpansion.MapProviderIndexProperty, value);
}
}
public static readonly DependencyProperty MapProviderIndexProperty = DependencyProperty.Register("MapProviderIndex", typeof(int), typeof(MapExpansion),
new FrameworkPropertyMetadata(0, new PropertyChangedCallback(MapExpansion.OnSourceMapProviderChanged)));
private static void OnSourceMapProviderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
mapExpansion.MapProvider = MapProviders.AMap;
mapExpansion.Refresh();
}
}
功能沒啥東西。
在就是融合用戶的數據部分， 可將對應的熱力點與地圖上的所有經緯度進行整合。
算法也沒啥東西。 根據具體的業務以及數據參數，進行處理熱力數據業務即可。
如果需要看具體效果。可以看頭條發了一個視頻展示的效果更多一些。
視頻效果地址：https://www.ixigua.com/7038095419494269455