同一个页面多个Openlayers map对象-详细内容

文章内容

2021/6/8 17:55:57,作者: 黄兵

同一个页面多个Openlayers map对象

最近需要在一个页面上显示多个地图🗺对象，使用的是Openlayers。

下面是代码：

<script src="{{ url_for('static',filename='js/openlayers/v6.5.0/ol.js') }}"></script>
<script src="{{ url_for('static',filename='js/traceroute_location_map.js') }}"></script>
<script src="{{ url_for('static',filename='js/cloud_vendor.js') }}"></script>
<script>
    let tracerouteData ={{ traceroute|safe }};
    for (let i = 0; i < tracerouteData.length; i++) {
        let LongLat = [];
        let LongLatLocation = [];
        let traceroute = tracerouteData[i]['traceroute']
        let tracerouteId = tracerouteData[i]['id']
        for (let j = 0; j < traceroute.length; j++) {
            if (traceroute[j]['longitude']) {
                LongLat.push([traceroute[j]['longitude'], traceroute[j]['latitude']])
                LongLatLocation.push([traceroute[j]['longitude'], traceroute[j]['latitude'], traceroute[j]['area']])
            }
        }
        let initMap = 'map_' + tracerouteId;
        initMap = new ol.Map({
            target: 'map_' + tracerouteId,
            layers: [
                new ol.layer.Tile({                 // 瓦片图层
                    source: new ol.source.OSM()     // OpenStreetMap数据源
                })
            ],
            view: new ol.View({                     // 地图视图
                projection: 'EPSG:4326',
                center: [0, 0],
                zoom: 0
            }),
            controls: ol.control.defaults().extend([
                new ol.control.FullScreen(),
                new ol.control.ScaleLine(),
            ]),
        });
        initLayers(LongLat, LongLatLocation, tracerouteId, initMap);
    }
</script>

这里对每个数据进行循环，并初始化ol.Map()，初始完成Map对象之后开始初始化地图的图层：

let initLayers = function (LongLatData, LongLatLocationData, mapElementId, map) {
    //实例化矢量点要素，通过矢量图层添加到地图容器中
    let lineFeature = new ol.Feature(
        new ol.geom.LineString(LongLatData)
    );
    //设置点要素样式
    lineFeature.setStyle(createLabelStyle(lineFeature));

    //实例化一个矢量图层Vector作为绘制层
    let source = new ol.source.Vector({
        features: [
            lineFeature
        ]
    });
    //矢量标注图层
    let vectorLayer = new ol.layer.Vector({
        source: source
    });
    //将绘制层添加到地图容器中
    map.addLayer(vectorLayer);

    for (let i = 0; i < LongLatLocationData.length; i++) {
        //新建一个要素ol.Feature
        let coordinate = [LongLatLocationData[i][0], LongLatLocationData[i][1]]
        let newFeature = new ol.Feature({
            geometry: new ol.geom.Point(coordinate),  //几何信息
            name: LongLatLocationData[i][2]
        });
        newFeature.setStyle(createLabelStyle(newFeature));      //设置要素样式
        source.addFeature(newFeature);
    }
}

//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle(feature) {
    return new ol.style.Style({
        fill: new ol.style.Fill({               //填充样式
            color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({           //线样式
            color: '#007bff',
            width: 2
        }),
        image: new ol.style.Icon({
            anchor: [0.5, 35],              //锚点
            anchorOrigin: 'top-right',       //锚点源
            anchorXUnits: 'fraction',       //锚点X值单位
            anchorYUnits: 'pixels',         //锚点Y值单位
            offsetOrigin: 'top-right',      //偏移原点
            opacity: 0.75,
            src: '/static/images/location_32x32.png'  //图标的URL
        }),
        text: new ol.style.Text({
            textAlign: 'center',            //位置
            textBaseline: 'middle',         //基准线
            font: 'normal 14px 微软雅黑',    //文字样式
            text: feature.get('name'),      //文本内容
            fill: new ol.style.Fill({       //文本填充样式（即文字颜色)
                color: '#000'
            })
        })
    });
}