客户端高性能矢量渲染专题


一、高性能矢量渲染图层Vector类简介

 SuperMap iClient for JavaScript 提供的 Vector 类支持采用 HTML5 的 Canvas 元素渲染矢量数据,并且提供了对渲染要素的添加、删除和选择操作, 从而为大数据量的矢量数据在无插件的 HTML 文档中,平滑、流畅的呈现,提供了新的解决方案。

二、高性能矢量渲染图层 Vector 类的使用说明

 Vector 类用 addFeatures、removeFeatures、removeAllFeatures、 redraw、getFeatureBy、 getFeatureById、getFeatureByFid、 getFeaturesByAttribute 等方法实现对要素的添加、删除、获取,方法的具体介绍和详细的使用说明请参见《API文档》, 下面以具体实例---车辆监控系统说明 Vector 的使用方法:

 长春市某公交公司现有797辆车在28条公交 线路上正常运作运送乘客,为了满足车辆安防和调度的需要, 现对797辆车进行实时监控, 进而达到降低运营成本、提高服务水平、提高企业 收益的目的。此实例通过使用 Vector 类的接口实现了 对大量车辆的实时在线查询和更新功能。

2.1、查询功能

电子地图上实时显示797辆车,公交公司管理部门可以远程监控所有车辆,具体实现方法如下:

(1).初始化两个图层 vectorLayer、vectorLayerCars,一个作为公交车路线图层,一个作为公交车图层。

//初始化公交车路线图层
vectorLayer = new SuperMap.Layer.Vector("Vector Layer", {
    renderers: ["Canvas"],
    styleMap: new SuperMap.StyleMap({"default": styleLine})
});
//初始化公交车图层
vectorLayerCars = new SuperMap.Layer.Vector("Vector Layer Cars", {
    renderers: ["Canvas2"],
    styleMap: new SuperMap.StyleMap({"default": stylePoint})
});
//为 vectorLayerCars 添加一个选择控件。
select = new SuperMap.Control.SelectFeature(vectorLayerCars, {
    onSelect: onFeatureSelect, 
    onUnselect: onFeatureUnselect
    }
);
map.addControl(select);
//要素被选中时调用此函数
function onFeatureSelect(feature) {
    selecedtBus = feature;
    popup = new SuperMap.Popup("chicken",
        selecedtBus.geometry.getBounds().getCenterLonLat(),
        new SuperMap.Size(300,42),
        "<div style='font-size:.8em; opacity: 0.8'><p>公交线路:" + selecedtBus.line.num + "路" + 
        "</p><p>当前位置:" + selecedtBus.geometry.x + "," + selecedtBus.geometry.y + "</p></div>", null, true);
    selecedtBus.popup = popup;
    map.addPopup(popup);
}
//清除要素时调用此函数
function onFeatureUnselect(feature) {
    map.removePopup(feature.popup);
    feature.popup.destroy();
    feature.popup = null;
    selecedtBus = null;
}

(2).定义查询的公交车路线,通过 SQL 查询方法查询公交路线,通过监听对 QueryBySQLService 支持的 两个从服务端返回结果事件 processCompleted 、processFailed,获取查询公交路线结果。

//定义查询公交线路
function queryBySQL() {
//清除当前图层所有feature要素
vectorLayer.removeAllFeatures();
var queryParam, queryBySQLParams, queryBySQLService;
//声明查询参数
queryParam = new SuperMap.REST.FilterParameter({
    name: "BusLine@Changchun#1",
    attributeFilter: "SmID > 0"}
),
//声明 SQL 查询参数,将 queryParam 赋给 queryBySQLParams
queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
    queryParams: [queryParam]
}),
//声明 SQL 服务对象
queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
    eventListeners: {
        "processCompleted": processCompleted, 
        "processFailed": processFailed
    }
});
//向服务端发送请求执行查询
queryBySQLService.processAsync(queryBySQLParams);
}            

(3). 定义 QueryBySQLService 的监听对象,用于显示公交路线图层和公家车图层,实现过程中 需要先分别定义一个公交路线的数组和公交车的数组,然后通过公交路线节点模拟公交车, 实例化公交车的运行方向和位置,最后添加公交车路线图层和公交车图层。

function processCompleted(queryEventArgs) {
    var i, j, feature,
    result = queryEventArgs.result;
    features = [];
    cars = [];
    orientation = 1;
    if (result && result.recordsets) {
        for (i=0; i<result.recordsets.length; i++) {
            if (result.recordsets[i].features) {
                for (j=0; j<result.recordsets[i].features.length; j++) {
                    feature = result.recordsets[i].features[j];
                    feature.style = null;
                    feature.num = j;
                    features.push(feature);
                    for(var k = 0, len = feature.geometry.components.length; k < len; k++) {
                        //创建公交车对象
                        var car = new SuperMap.Feature.Vector(feature.geometry.components[k].clone());
                        //定义公交车的 style
                        car.style = {pointRadius: 10, stroke: false};
                        var cargeometry = car.geometry;
                        //定义公交车基本信息,包括公交车的路线、速度和速度向量、当前节
                        //点位置和下一结点位置、通过速度向量计算的旋转角度、移动步数
                        car.line = feature;
                        car.orientation = orientation; 
                        car.currentIndex = k;
                        if(feature.geometry.components[car.currentIndex + car.orientation]) {
                            car.nextPoint = feature.geometry.components[k + car.orientation];                                
                            var dx = car.nextPoint.x - cargeometry.x;
                            var dy = car.nextPoint.y - cargeometry.y;
                            var distance = Math.sqrt(dx * dx + dy * dy);
                            car.speed = parseInt(Math.random() * 5 + 2) * car.orientation;
                            if(car.speed == 0) {car.speed == 10};
                            car.moves = distance / car.speed;
                            car.vx = dx / car.moves;
                            car.vy = dy / car.moves;
                            var angle = Math.atan2(dx, dy);
                            car.style.rotate = angle;
                            //分配不同的公交车图片
                            if (Math.abs(car.speed < 4)){
                                car.style.externalGraphicSource = car1;
                            }
                            if (Math.abs(car.speed) >= 4 && Math.abs(car.speed <  5)){
                                car.style.externalGraphicSource = car2;
                            }
                            if (Math.abs(car.speed >= 5)){
                                car.style.externalGraphicSource = car3;
                            }
                            car.stop = false;
                        }else{
                            car.stop = true;
                            car.style.externalGraphicSource = car3;
                        }
                        orientation *= -1;
                        cars.push(car);
                    }
                }
            }
        }
    }
//将公交路线绘制到公交路线图层上
vectorLayer.addFeatures(features);
//将公交车绘制公交车图层上
vectorLayerCars.addFeatures(cars);
}

显示效果图如下所示:

2.2大量车辆实时在线更新功能

公交公司管理部门监控某一时间段内797辆车的运行状态 , 电子地图上显示每辆车每30秒的位置变化情况,实现代码如下:

(1)开始实施监控,通过公交车的基本信息(如速度,定位信息)改变其位置,实施方法为先全部 清除(removeAllFeatures)显示公交车的图层,再定义公交车的属性信息(方向、速度等), 最后将改变后的公交车数组通过 addFeatures 方法加入至公交车图层。

//开始监控
function monitor() {
    document.getElementById("monitor").onclick = "";
    if(selecedtBus) {
        map.removePopup(selecedtBus.popup);
    }
    vectorLayerCars.removeAllFeatures();
    redraw = false;
    for(var i =0, len = cars.length; i < len; i++) {
        var car = cars[i];
        var cargeometry = car.geometry;
        if(!car.stop) {
            if(car.moves < 1) {
            cargeometry.x = car.nextPoint.x;
            cargeometry.y = car.nextPoint.y;
            //更新公交车的信息
            var feature = car.line;                            
            car.currentIndex += car.orientation;
            if(feature.geometry.components[car.currentIndex + car.orientation]) {
                car.nextPoint = feature.geometry.components[car.currentIndex + car.orientation];                                
                var dx = car.nextPoint.x - cargeometry.x;
                var dy = car.nextPoint.y - cargeometry.y;
                var distance = Math.sqrt(dx * dx + dy * dy);
                car.moves = Math.abs(distance / car.speed);
                car.vx = dx / car.moves;
                car.vy = dy / car.moves;
                var angle = Math.atan2(dx, dy);
                car.style.rotate = angle;
            }else{
                car.stop = true;
                car.style.fillColor = "rgb(150,150,150)";
            }
            }else{
                cargeometry.x += car.vx;
                cargeometry.y += car.vy;
                car.moves--;
            }
        }
        //只要有车移动就需要重绘。
        if(!car.stop) {
            redraw = true;
        }
    }
    //将公交车绘制到公交车图层上
    vectorLayerCars.addFeatures(cars);
    if(selecedtBus) {
        //将选中的公交车的信息添加到地图上
        vectorLayerCars.selectedFeatures.push(selecedtBus);
        popup = new SuperMap.Popup("chicken",
            selecedtBus.geometry.getBounds().getCenterLonLat(),
            new SuperMap.Size(300,42), "<div style='font-size:.8em; opacity: 0.8'><p>公交线路:" +
            selecedtBus.line.num + "路" +
            "</p><p>当前位置:" + selecedtBus.geometry.x + "," + selecedtBus.geometry.y + "</p></div>",
            null, true);
        selecedtBus.popup = popup;
        map.addPopup(popup);
    }
}

(2)通过监听公交车图层的 feature 添加完成事件(addFeaturesCompelte), 以实时调用 clearFeatures 方法实现公交车的动态监控。

function addFeaturesCompelte(args) {
    if(redraw) {
        timerid = setTimeout(monitor, 50);
    }
}

(3) 通过 onclick 事件停止监控。

//停止监控
function stopMonitor() {
    window.clearTimeout(timerid);
    document.getElementById("monitor").onclick = monitor;
    redraw = false;
}

三、专题小结

以上车辆监控实例通过高性能矢量渲染 Vector 类实现了对大量车辆的在线查询和 实时更新功能,满足了用户需求的同时,也带给用户平滑、流畅的视觉效果。

通过实例也验证了高性能矢量绘制图层 Vector 类在大量数据显示、 实时更新等功能上的优异性能和流畅稳定的呈现, 为用户提供了客户端大量动态数据展示的解决方案。

版权所有 © 2000-2016  北京超图软件股份有限公司