运动轨迹的demo封装

基于上一篇文章使用OpenLayers3来展示一段运动轨迹的封装拓展

样式参数什么的都写的乱七八糟的，只是简单的实现一下。

    
    

    
    
    
    
    
    
    

    



    

    
谷歌卫星图（默认）
    
谷歌地形图
    
点击
    
这是一个侧边栏
    
00:09:35
    

        
XXXXXX 张三
LIVE
        
XXXXXX 张三
LIVE
        
XXXXXX 张三
LIVE
    
    

        
检查点
49
3.7KM
        
1.
张三
10:45
        
2.
李四
10:45
        
3.
王五
10:45
    
    

        
        
王五
        
10:45
        
-2:09
    
    

现在需要对地图进行封装修改了一遍代码， 以下是修改的地方。

var mapDic = {};// 管理地图
var lineDic = {};// 管理线的数据
var pointDic = {};// 管理点的数据
var featureLineDic = {};// 管理线的源: Feature
var featurePointDic = {};// 管理点的源: Feature
// 创建地图控件
// 此处的id, 就是对应div的id
// obj: id, layer, centerX, centerY, zoom, layer, minZoom, maxZoom, extent
function creatMap(obj) {
    var map = new ol.Map({
        layers: [
            obj.layer,
        ],
        target: obj.id,
        view: new ol.View({
            center: [obj.centerX, obj.centerY], //3857坐标系
            zoom: obj.zoom,//当前的放大度数
            minZoom: obj.minZoom,//最小放大度数
            maxZoom: obj.maxZoom,//最大放大度数
            // extent: obj.extent, // Jon: 限制中心的程度，换句话说，中心不能超出这个范围, 前后值一样(minx=maxx, miny=maxy)的话就无法移动。
        }),
        logo: false, // 禁用地图标志
    });
    mapDic[obj.id] = map;
}

// 封装一个方法，来创建全局变量的内容
// arr: 传入的数组数据, key: 管理所用的key
function createNewGeom(arr, key, id) {
    //实例一个数据源获取feature
    //实例化一个矢量图层Vector作为绘制层
    var source = new ol.source.Vector();// 这个东西本来是在外边放的，现在放在里边，不知道会有什么需要优化的地方
    //实例一个线(标记点), Point 点, LineString 线, Polygon 多边形
    var geomLine = new ol.geom.LineString();
    var geomPoint = new ol.geom.Point([arr[3][0], arr[3][1]]);
    //添加标记点
    for (var i = 0; i < arr.length; i++) {
        geomLine.appendCoordinate(arr[i]);
    }
    // 加入管理数组中，方便外部调用
    lineDic[key] = geomLine; 
    pointDic[key] = geomPoint;

    var LineStringFeature = new ol.Feature(geomLine); //绘制线的数据
    var pointFeature = new ol.Feature(geomPoint); //绘制点的数据
    featureLineDic[key] = LineStringFeature;
    featurePointDic[key] = pointFeature;

    //将线添加到Vector绘制层上
    source.addFeature(LineStringFeature);
    source.addFeature(pointFeature);

    //将线添加到Vector绘制层上
    var vectorLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#f00',
                width: 4
            }),
            image: new ol.style.Icon({
                src: 'images/map.png',
                anchor: [0.5, 35], //相对位置
                anchorYUnits: 'pixels',
            }),
        })
    });
    console.log("mapDic = ", mapDic);
    mapDic[id].addLayer(vectorLayer); //将绘制层添加到地图容器中
}

var obj = {
    id: "map", 
    layer: layer1, 
    centerX: 10711315.612909358, 
    centerY: 1900873.5099405567, 
    zoom: 17, 
    minZoom: 5, 
    maxZoom: 19, 
    extent: null,
}
// 创建地图
creatMap(obj);
// 创建运动轨迹
createNewGeom(arr, "one", "map");