javascript 气泡 气泡样式

在百度地图和谷歌地图中，点击地图中某个要素便会以气泡的形式，显示出要素信息，在ArcEngine中亦可以气泡的样式显示文字信息，如下图所示：

可以看出，实际上它是一个Element，绘制在Map控件中，它有文字部分和气泡背景部分构成，气泡背景是一个IBalloonCallout，它加上文字则可构成一个ITextElement效果就是上图所示，代码如下：

1、创建气泡背景

/// <summary>
        /// 创建气泡背景
        /// </summary>
        /// <param name="x"></param>
        /// <param name="y"></param>
        /// <param name="color"></param>
        /// <returns></returns>
        public static IBalloonCallout createBalloonCallout(double x, double y, IColor color)
        {
            　　ISimpleFillSymbol sfs = new SimpleFillSymbol();//填充类型
            　　{
                　　　　sfs.Color = color;
                　　　　sfs.Style = esriSimpleFillStyle.esriSFSSolid;
            　　}
            　　IPoint p = new ESRI.ArcGIS.Geometry.Point();//显示点
            　　{
                　　　　p.PutCoords(x, y);
            　　}
            　　IBalloonCallout bc = new BalloonCallout();
            　　{
                　　　　bc.Style = esriBalloonCalloutStyle.esriBCSRectangle;//气泡形状为圆弧矩形 

                　　　　bc.Symbol = sfs;//气泡背景填充样式

                　　　　bc.LeaderTolerance = 10;//锚点和气泡显示文字的距离

                　　　　bc.AnchorPoint = p;//设置气泡锚点
            　　}
            　　return bc;
        }

2、绘制气泡样式

/// <summary>
        /// 创建气泡图形元素
        /// </summary>
        /// <param name="mapctrl"></param>
        /// <param name="x"></param>
        /// <param name="y"></param>
        /// <param name="text"></param>
        /// <param name="textColor"></param>
        /// <param name="backgroundColor"></param>
        /// <returns></returns>
        public static ITextElement createTextElement(AxMapControl mapctrl, double x, double y, String text, IColor textColor, IColor backgroundColor)
        {
            　　IBalloonCallout bc = createBalloonCallout(x, y, backgroundColor);//创建气泡
            　　ITextSymbol ts = new TextSymbol();
            　　{//创建文字符号类型和赋值颜色
                　　　　ts.Color = textColor;
            　　}
            　　IFormattedTextSymbol fts = ts as IFormattedTextSymbol;
            　　{//创建格式化文字符号
                　　　　fts.Background = bc as ITextBackground;//设置文字背景颜色
            　　}
            　　ts.Size = 8;//气泡文字大小
            　　IPoint point = new ESRI.ArcGIS.Geometry.Point();
            　　{//创建气泡显示点
                　　　　double width = mapctrl.Extent.Width / 13;   //外接Envelope的宽
                　　　　double height = mapctrl.Extent.Height / 20; //外接Envelope的高                　　　　point.PutCoords(x + width, y + height);
            　　}
            　　ITextElement te = new TextElement() as ITextElement;
            　　{//创建文字图形元素,设置文字绘制点
                　　　　te.Symbol = ts;//设置气泡背景
                　　　　te.Text = text; //设置显示文字
            　　}
            　　te.ScaleText = true;//文字大小随地图变化
            　　IElement e = te as IElement;
            　　{
                　　　　e.Geometry = point;//文字元素显示位置
            　　}
            　　return te;
        }

 这样绘制的气泡样式只能显示文字，不能显示图片等，如果要先显示图片，则只能自定义一个窗体来做气泡控件，还有一个问题是，随着地图的缩放操作，该气泡样式会变形，解决办法，只能是先把老的样式删掉，然后在地图缩放操作后又重新绘制一次。