OpenLayers之多源数据加载六:静态地图及应用

    此处说的静态地图指没有经过地理投影什么的普通地图,比如一些规划图,室内建筑图,平面示意图等等,这些图一般都不会很大,但常用于一些演示系统中。会涉及到一些简单的定位,标注等。

    OpenLayers也充分考虑到了这样的需求,提供了对应的source类:ol.source.ImageStatic。示例请看下面这个地图,显示的是成都熊猫基地的平面图:

    因为应用于OpenLayers中,所以地图可以放大、缩小,具备相应的功能,对于演示而言,无疑加快了开发效率。对应的代码如下:

    <div id="map"></div>

    <script>
        //地图设置中心,设置到成都,在本地离线地图offlineMapTiles刚好有一张zoom为4的成都瓦片
        var center = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');
        //计算熊猫基地地图映射到地图上的范围,图片像素为550*344,保持比例的情况下,把分辨率放大一些
        var extent = [
            center[0] - 550 * 1000 / 2, 
            center[1] - 344 * 1000 / 2, 
            center[0] + 550 * 1000 / 2, 
            center[1] + 344 * 1000 / 2
            ];
        //创建地图
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: center,
                zoom: 7
            })
        });
        //加载熊猫基地静态图层
        map.addLayer(new ol.layer.Image({
            source: new ol.source.ImageStatic({
                url: 'img/pandaBase.jpg', // 熊猫基地地图
                imageExtent: extent          //映射到地图的范围
            })
        }));
    </script>

    代码中有详细注释,可帮助理解,要应用静态地图,需要注意设置图片在地图中占据的extent。如果没有这个设置,图片就不能和位置关联在一起,也就不能应用于OpenLayers中。

    大家肯定非常关心extent的计算[center[0] - 550 * 1000 / 2, center[1] - 344 * 1000 / 2, center[0] + 550 * 1000 / 2, center[1] + 344 * 1000 / 2],为什么这样计算?这个地方我想让图片本身的大小和地理范围产生联系,图片的大小为550*334像素,在此基础上同比放大1000倍,作地理范围。当然也可以不用放大,直接作为地理范围,只是这样需要放大地图到很高的层级才能看到它。有了这样的映射关系后,图片能保持长宽比不变,从而不变形。

    为什么引入center,除以2相关的计算?这是一个简单计算,目的在于设置图片显示在地图中心。

    把地图加载出来只是第一步,我们最重要的是在地图上定位,并处理相应的业务。比如我们希望在图片[390, 145]像素位置添加一个活动图标表示这个地方有现场活动,就像下面这样:

    看到图片上的小旗帜没有,它就是新加上去的活动图标。那么我们是如何做到的呢:

    <div id="map2"></div>
    
    <script>
        // 地图设置中心,设置到成都,在本地离线地图 offlineMapTiles刚好有一张zoom为4的成都瓦片
        var center2 = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');
        // 计算熊猫基地地图映射到地图上的范围,图片像素为 550*344,保持比例的情况下,把分辨率放大一些
        var extent2 = [
            center2[0] - 550 * 1000 / 2, 
            center2[1] - 344 * 1000 / 2, 
            center2[0] + 550 * 1000 / 2, 
            center2[1] + 344 * 1000 / 2
        ];
        //创建地图
        var map2 = new ol.Map({
            view: new ol.View({
                center: center2,
                zoom: 7
            }),
            target: 'map2'
        });
        //加载熊猫基地静态地图层
        map2.addLayer(new ol.layer.Image({
            source: new ol.source.ImageStatic({
                url: 'img/pandaBase.jpg',           //熊猫基地地图
                imageExtent: extent2                //映射到地图的范围
            })
        }));
        //创建一个用于放置活动图标的layer
        var activityLayer = new ol.layer.Vector({
            source: new ol.source.Vector()
        });
        //创建一个活动图标需要的Feature,并设置位置
        var activity = new ol.Feature({
            geometry: new ol.geom.Point([center2[0]- 550*1000/2 + 390 * 1000, center2[1]-344*1000/2 + (344 - 145) * 1000])
        });
        //设置Feature的样式,使用小旗帜图标
        activity.setStyle(new ol.style.Style({
            image: new ol.style.Icon({
                src: 'img/flag_right.png',
                anchor: [0, 1],
                scale: 0.2
            })
        }));
        //添加活动Feature到layer上,并把layer添加到地图中
        activityLayer.getSource().addFeature(activity);
        map2.addLayer(activityLayer);
    </script>

    注释足够帮助大家理解代码意图,我想最关键的在于activity这个feature的位置为什么要这样计算:

    [center2[0]- 550*1000/2 + 390 * 1000, center2[1]-344*1000/2 + (344 - 145) * 1000]。如果翻译成下面这样,你可能会更容易理解:extentLeft+picX,extentTop+picY,此处的picX和picY显然是需要在图片像素位置的基础上放大1000倍,才能对应于地理位置。center[0]-550*1000/2对应的就是extentLeft,center[1]-344*1000/2对应的是extentBottom,并不是extentTop,所以我们要做一个简单的计算(344-145)*1000,而不是直接用145*1000。

    从图片的像素坐标转换为地图的地理坐标,关键在于通过像素大小,映射到一个地图的extent,希望能理解这个过程。在此基础上,就能充分应用OpenLayer3的功能了。

    

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值