OpenLayers学习笔记6——使用jQuery UI实现查询并标注（功能实现篇）

标签：javascript   openlayers   webgis   地理信息   二维   

本篇博客接上篇是关于OpenLayers的地图标注及弹出窗（marker+popup），先来看下效果图：

下面给出代码，都写了注释，不做过多解释了：

///添加标记
function addMarke(x, y, attribute)
{

    //设置marker样式
    var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    style_mark.graphicWidth = 64;
    style_mark.graphicHeight = 64;
    style_mark.externalGraphic = "img/marker/tax.png";
    style_mark.fillOpacity = 0.5;
    style_mark.graphicOpacity = 1;
    /*
     style_mark.title = title;
     */
    //根据坐标点和样式创建一个矢量要素
    var point = new OpenLayers.Geometry.Point(x, y);
    var pointFeature = new OpenLayers.Feature.Vector(point, null, style_mark);
    pointFeature.attributes = attribute;

    //创建标注图层(矢量图层)
    if (markerLayer == null)
    {
        markerLayer = new OpenLayers.Layer.Vector("MarkeVector");
        map.addLayers([markerLayer]);
    }
    //将矢量要素添加至标注图层
    markerLayer.addFeatures([pointFeature]);

    //创建一个选择要素的控件（与marker绑定,从markerLayer图层中选择要素）
    if (selectControl == null)
    {
        selectControl = new OpenLayers.Control.SelectFeature(markerLayer,
            {
                hover: false,
                onSelect: onFeatureSelect,
                onUnselect: onFeatureUnselect
            });
        map.addControl(selectControl);
        selectControl.activate();

    }
}
//清除所有标记
function clearAllMarke()
{
    if (selectControl != null)
    {
        map.removeControl(selectControl);
        //销毁此对象
        selectControl.deactivate();
        selectControl = null;
    }
    if (markerLayer != null)
    {
        map.removeLayer(markerLayer);
        markerLayer = null;
    }
}

//创建popup显示的html
function createContentHTML(feature)
{
    var attr = feature.attributes;
    var contentHTML = "<div style='text-align: center;background-color: white'>";
    for (var b in attr)
    {
        contentHTML += b + ": " + "<textarea id='attributeValue' style='height 30px;font-size: 14px;text-align: center;vertical-align: middle;align-content: center'>" + attr[b] + "</textarea>" + "</br>";
    }

    return contentHTML + "</div>";

}

// Feature 选中事件响应
function onFeatureSelect(feature)
{

    selectedFeature = feature;
    var featureAttribute = feature.attributes;
    var popupContent = createContentHTML(feature);

    popup = new OpenLayers.Popup.CSSFramedCloud(
        null,                                          //Id
        feature.geometry.getBounds().getCenterLonLat(),//popup位置
        null,                                           //contentSize：popup内容大小
        popupContent,                                  //contentHTML：popup展示的内容，html字符
        null,
        true,                                          //closeBox：是否显示关闭按钮
        onPopupClose);                                 //closeBoxCallback：关闭按钮事件
    feature.popup = popup;
    map.addPopup(popup);

}
//关闭弹窗
function onPopupClose(evt)
{
    selectControl.unselect(selectedFeature);
}
// Feature取消选中事件响应
function onFeatureUnselect(feature)
{
    map.removePopup(feature.popup);
    feature.popup.destroy();
    feature.popup = null;
}

 var lonlat = corTransform(120.48299, 36.1129);
    var lonLatStr = lonlat.toShortString();
    var lonLatArr = lonLatStr.split(",");
    var lon = lonLatArr[0];
    var lat = lonLatArr[1];
    var att = {
        名称: "山东省青岛第二中学",
        地址: "山东省青岛市崂山区松岭路70号",
        电话: "0532-88907255",
        类别: "教育学校:中学"

    };
    addMarke(lon, lat, att);

OpenLayers学习笔记6——使用jQuery UI实现查询并标注（功能实现篇）

标签：javascript   openlayers   webgis   地理信息   二维   

原文地址：http://blog.csdn.net/giser_whu/article/details/46429223