美文网首页开源
基于OpenLayers实现地理围栏 谷歌百度高德地图都可以

基于OpenLayers实现地理围栏 谷歌百度高德地图都可以

作者: zcty0701 | 来源:发表于2018-11-01 09:30 被阅读161次

    前言.因为项目有点特殊,需要接入谷歌地图实现地理围栏,因为谷歌地图的地理围栏接口相关接口并不完善,于是就换了一个思路,利用OpenLayers来实现地理围栏 openlayers 中文地址 http://weilin.me/ol3-primer/ch02/index.html

    `X9(1OM@MU089}IGC$C4$FA.png
    这是效果实现图,以下是思路
    1.第一步肯定是用户在地图上随意画一个圈,然后我们能获取这个圈在地图上的坐标,否则这一切并没有意义。
    参考文章 http://weilin.me/ol3-primer/ch09/09-07.html
    不过我这里对文章的代码略作改动
     var lineDraw = new ol.interaction.Draw({
            type: 'Polygon',
            source: lineLayer.getSource(),    // 注意设置source,这样绘制好的线,就会添加到这个source里
             freehand: true,
        });
    

    注意这里的 type: 'Polygon', 和文章不一样 其他的设置样式什么的自行参考;
    改动完毕,运行一下 在 获取位置,得到效果图如下


    image.png

    好了, 到这能正确正常的获取用户在地图上随意画的圆圈的坐标了

    2.我们要如何在地图上显示用户随意画的地理围栏
    第一步,加载地图和geojson文件。geojson文件是地图格式文件,用户加载用户之前画的地理围栏。
    http://geojson.io/#map 网站生成一个 geojson文件即可,随后把我们在第一步获取到的位置进行替换

    "geometry": {
                "type": "Polygon",
                "coordinates": 
                [[[ ]]] //你之前获取的坐标数据
            }
    
    image.png

    没什么特殊需求不要改geojson文件里面的其他内容, 只修改coordinates里面的数据就好


    image.png

    起一个ajax获取数据 然后加载到地图上


    image.png
    image.png
    到这个步骤 基本上已经能正常的获取用户在地图上画的地理围栏了
    接下来 加载谷歌地图
    image.png
    var googleMapLayer = new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
    
                    })
                });
    
    

    加载谷歌地图 ,也可以加载其他地图,我是因为项目需要才加载谷歌地图

    map.once('postrender', function(event) {
                        var t = this;
                        console.log(layer2.getSource().getFeatures()[0].getGeometry().intersectsCoordinate([11578910.355723355, 3502000.669399493]));
    
                    });
    

    监听地图加载完成,然后随意检测一个点是否在地理围栏里面

    map.on('singleclick', function(evt) {
                        var coordinate = evt.coordinate;
                        var hdms = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
                        
                        var coordinate = evt.coordinate;
                        var userDogColler = userindex.getClosestPoint(coordinate);
                        var t = ol.proj.transform(userDogColler, 'EPSG:3857', 'EPSG:4326');
                         console.log('点击的地方距离围栏多少+',jwdjs(hdms[0],hdms[1],t[0],t[1]),'+M')  
                        //console.log(userindex.getClosestPoint(coordinate))
    
                        console.log(userindex.intersectsCoordinate(coordinate))
    
                    });
    

    给地图添加点击事件,然后获取点击的坐标,判断到地理围栏的距离 ,这里我采用的算法是经纬度算法 jwdjs()

    function jwdjs(lat1, lng1, lat2, lng2) {
                    var EARTH_RADIUS = 6378137.0; //单位M 地球的周长
                    var PI = Math.PI;
    
                    function getRad(d) {
                        return d * PI / 180.0;
                    }
    
                    function getGreatCircleDistance(lat1, lng1, lat2, lng2) {
                        var radLat1 = getRad(lat1);
                        var radLat2 = getRad(lat2);
    
                        var a = radLat1 - radLat2;
                        var b = getRad(lng1) - getRad(lng2);
    
                        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
                        s = s * EARTH_RADIUS;
                        s = Math.round(s * 10000) / 10000.0;
    
                        return s;
                    }
                    return getGreatCircleDistance(lat1, lng1, lat2, lng2)
    
                }
    

    到这基本上就能实现效果图所示的效果了 ,其他无效代码都删了

    相关文章

      网友评论

        本文标题:基于OpenLayers实现地理围栏 谷歌百度高德地图都可以

        本文链接:https://www.haomeiwen.com/subject/nzdtxqtx.html