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

2020-03-18 21:30:57

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

前言.因为项目有点特殊,需要接入谷歌地图实现地理围栏,因为谷歌地图的地理围栏接口相关接口并不完善,于是就换了一个思路,利用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)

            }

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



  • 2019-10-15 05:53:20

    xUtils 里的DbUtils使用心得

    使用xUtils做Android数据库开发非常简便和得心应手,而且它本身还支持很多查询功能,比如一对多,select count和自定义sql查询等,并且支持事务(默认关闭) 下面是官方sample给的代码和我的一些使用心得 首先是两个实体类,对应两张表,这两张表中有一对多的关系

  • 2019-10-15 09:18:48

    腾讯 Android 面试笔试总结

    Activity中的几种启动模式 Android消息机制 IntentService 事件分发 Android性能优化、内存优化 内存优化 View的绘制 Eventbus原理 Rxjava的操作符有哪些,说说他们的作用 线程锁 锁方法和类对象啥的有啥区别 AsyncTask原理 说说MVP和MVVM的特点 Android中用到的观察者模式有哪些地方 说说google新出的Lifecycle框架 okhttp原理 Retrofit原理 RecyclerView源码、缓存分析 Binder机制 Android Jetpack Kotlin Activity中的几种启动模式

  • 2019-10-15 09:20:49

    SpringBoot注解梳理

    @SpringBootApplication:包含了@ComponentScan、@Configuration和@EnableAutoConfiguration注解。其中@ComponentScan让spring Boot扫描到Configuration类并把它加入到程序上下文。 @Configuration 等同于spring的XML配置文件;使用Java代码可以检查类型安全。 @EnableAutoConfiguration 自动配置。 @ComponentScan 组件扫描,可自动发现和装配一些Bean。 @Component可配合CommandLineRunner使用,在程序启动后执行一些基础任务。 @RestController注解是@Controller和@ResponseBody的合集,表示这是个控制器bean,并且是将函数的返回值直 接填入HTTP响应体中,是REST风格的控制器。 @Autowired自动导入。 @PathVariable获取参数。 @JsonBackReference解决嵌套外链问题。 @RepositoryRestResourcepublic配合spring-boot-starter-data-rest使用。

  • 2019-10-15 09:52:00

    动图解释递归,按值传递和按引用传递的区别,线性查找和二分查找,二叉查找树

    对于大部分人,数据结构一直是一个短板,当然我也是,不是学不会,而是容易忘,就拿最简单的排序来说吧,当时学习的时候明明已经弄得很清楚了,过了一段时间不用又忘记了,还要重新再看一遍,不知道有多少小伙伴和我有一样的烦恼。今天让我们用用动图的方式学习一下数据结构中的递归和二分查找吧,这种讲解方式非常生动,而且非常容易记住和理解。