C# WebForm地图线路绘制求助：MySQL读取数据后无法连接站点

Hey there! Let's figure out why your lines aren't showing up between stations in your WebForm app. I've looked over your code and spotted a few key issues that are probably causing the problem—let's break them down and fix them step by step.

Key Problems in Your Current Code #

1. Incorrect Loop Indexing
   Your inner loop starts at j=1 and runs while j < stationCount, then accesses stationNumber[i, j+1]. If stationCount is the length of your station array, j+1 will eventually go out of bounds (since arrays are 0-indexed). That means stationID2 might be 0, and your code skips drawing the line entirely.

2. WebForms vs. WinForms Drawing Misconception
   You're using this.CreateGraphics()—that's a WinForms approach! In WebForms, this method doesn't render anything to the client's browser. Instead, you need to draw to a Bitmap on the server, then send that image to the client (like converting it to Base64 or saving it to a file).

3. Missing Validation for Station Coordinates
   If your code can't find a matching stationID in the stationID array, the start/end coordinates stay at 0. This would draw lines to the top-left corner of your canvas instead of between actual stations.

Corrected Code for Drawing Lines #

Here's a revised version of your DrawLines method that fixes these issues:

private void DrawLines()
{
    // Create a bitmap to draw on (this works for WebForms)
    using (Bitmap mapBitmap = new Bitmap(800, 600))
    using (Graphics g = Graphics.FromImage(mapBitmap))
    {
        // Initialize your pens
        Pen whiteBackgroundPen = new Pen(Color.White, 1);
        Pen northernLinePen = new Pen(Color.Black, 3);
        Pen centralLinePen = new Pen(Color.Red, 3);
        Pen victoriaLinePen = new Pen(Color.Blue, 3);
        Pen circleLinePen = new Pen(Color.Gold, 3);

        // Fill the background first
        g.FillRectangle(whiteBackgroundPen.Brush, new Rectangle(0, 0, 800, 600));

        // Loop through each route line
        for (int lineIndex = 0; lineIndex < lineCount; lineIndex++)
        {
            // Get the number of stations for the current line (avoid using global stationCount)
            int stationsInLine = stationNumber.GetLength(1);
            
            // Loop through adjacent station pairs (0 to stationsInLine-2 to avoid index overflow)
            for (int stationPairIndex = 0; stationPairIndex < stationsInLine - 1; stationPairIndex++)
            {
                int stationID1 = stationNumber[lineIndex, stationPairIndex];
                int stationID2 = stationNumber[lineIndex, stationPairIndex + 1];

                // Skip invalid station IDs
                if (stationID1 <= 0 || stationID2 <= 0)
                    continue;

                // Find coordinates for both stations
                int startX = -1, startY = -1;
                int endX = -1, endY = -1;
                for (int stationIndex = 0; stationIndex < stationID.Length; stationIndex++)
                {
                    if (stationID[stationIndex] == stationID1)
                    {
                        startX = stationX[stationIndex];
                        startY = stationY[stationIndex];
                    }
                    if (stationID[stationIndex] == stationID2)
                    {
                        endX = stationX[stationIndex];
                        endY = stationY[stationIndex];
                    }
                }

                // Only draw if both stations were found
                if (startX != -1 && startY != -1 && endX != -1 && endY != -1)
                {
                    // Select the correct pen based on line name
                    Pen activePen = whiteBackgroundPen;
                    switch (lineName[lineIndex])
                    {
                        case "Northen":
                            activePen = northernLinePen;
                            break;
                        case "Central":
                            activePen = centralLinePen;
                            break;
                        case "Victoria":
                            activePen = victoriaLinePen;
                            break;
                        case "Circle":
                            activePen = circleLinePen;
                            break;
                    }

                    // Draw the line between the two stations
                    g.DrawLine(activePen, startX, startY, endX, endY);
                }
            }
        }

        // Send the bitmap to your WebForm's Image control
        using (MemoryStream ms = new MemoryStream())
        {
            mapBitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
            string base64Image = Convert.ToBase64String(ms.ToArray());
            // Assume you have an Image control on your page with ID "imgRouteMap"
            imgRouteMap.ImageUrl = $"data:image/png;base64,{base64Image}";
        }
    }
}

Additional Tips for Your MySQL GetLines Method #

To make sure your data is correct (which is critical for drawing lines):

• Sort stations in order: When querying stations for a route, sort them by their actual position on the line (e.g., using a station_order column in your MySQL table). If the stations are out of order, the lines will connect incorrectly.
• Validate data integrity: Ensure every station ID in stationNumber exists in your stationID array, and that each station has valid X/Y coordinates stored in stationX/stationY.

That should get your route lines showing up properly between stations. Let me know if you run into any other snags!

内容的提问来源于stack exchange，提问作者Dimitrina Petkova