• 滴滴热力图-JS版 (基于高德地图)


    // 地图开始
    //创建地图
    var lnglat = [116.4717292786, 39.9997419717];
    var map = new AMap.Map('map_container', {
    resizeEnable: true,
    center: lnglat,
    zoom: 3
    });
    var latDistance = 1.0 / 111322 * Math.cos(45*Math.PI / 180);//每一米代表多少度
    var lonDistance = 1.0 / 111322;
    // var longitude = 73.450605; // 116.4717292786;
    // var latitude = 53.600613; // 39.9997419717;
    var radius = 1000;//1000米
    var left_lng = 0, up_lat=0, right_lng=0, down_lat=0;


    var path = [];
    $.ajax({ // 接口获取边界值集合
    type: "post",
    url: 'border',
    data: $("form").serialize(), //参数值
    dataType: 'json',
    success: function (resp) {
    if (resp.code != 0) {
    layer.msg(resp.msg);
    } else {
    //限定边界值
    left_lng = resp.left_lng; // 左边经度
    up_lat = resp.up_lat; // 下边纬度
    right_lng = resp.right_lng; // 右边经度
    down_lat = resp.down_lat; // 下边经度
    // 根据三角函数 边界值 计算分段长度
    var dis_long = Math.ceil(AMap.GeometryUtil.distance([left_lng, up_lat], [right_lng, down_lat]));
    var count_lenth = Math.ceil(dis_long/(2*radius));
    // console.log([left_lng, up_lat], [right_lng, down_lat], dis_long, 2*radius, count_lenth);
    // 划区域
    $.each(resp.data, function(i_list, result_list){
    // 画六边形
    draw_other_lng_lat(left_lng, up_lat, count_lenth, result_list);
    var path = [];
    $.each(result_list, function (i_r, result) {
    //
    var latLng = new AMap.LngLat(result[0],result[1]);
    path.push(latLng);
    });
    // 画边界
    draw_list(path, '','#1c22ff');
    });
    }
    },
    });

    function draw_other_lng_lat(longitude, latitude, count_lenth, result_list) {
    longitude = Number(longitude);
    latitude = Number(latitude);
    // for (var i_total=0; i_total<count_lenth; i_total+=10) {
    sleep(300).then(()=> { // 睡眠1s
    for (var i = 0; i <= count_lenth; i++) {
    var mLongitude = longitude + i * 1.5 * radius * lonDistance;
    for (j = 0; j <= count_lenth+6; j++) {
    var mLatitude = latitude - 2 * j * radius * Math.sin(60 * Math.PI / 180) * latDistance;
    if (i % 2 != 0) {
    mLatitude += radius * Math.sin(60 * Math.PI / 180) * latDistance;
    }
    console.log(1);
    var inRing = AMap.GeometryUtil.isPointInRing([mLongitude,mLatitude], result_list); // 是否在多边形内

    if(inRing == true) {
    drawing(mLongitude, mLatitude, result_list);
    }
    }
    }
    });
    // }
    }

    function drawing(longitude, latitude, result_list) {
    var height = radius * Math.sin(60*Math.PI / 180) * latDistance;
    var lng1 = longitude - radius / 2 * lonDistance, lat1 = latitude + height;
    var lng2 = longitude + radius / 2 * lonDistance, lat2 = latitude + height;
    var lng3 = longitude + radius * lonDistance, lat3 = latitude;
    var lng4 = longitude + radius / 2 * lonDistance, lat4 = latitude - height;
    var lng5 = longitude - radius / 2 * lonDistance, lat5 = latitude - height;
    var lng6 = longitude - radius * lonDistance, lat6 = latitude;

    var inRing1 = AMap.GeometryUtil.isPointInRing([lng1,lat1], result_list); // 是否在多边形内
    var inRing2 = AMap.GeometryUtil.isPointInRing([lng2,lat2], result_list); // 是否在多边形内
    var inRing3 = AMap.GeometryUtil.isPointInRing([lng3,lat3], result_list); // 是否在多边形内
    var inRing4 = AMap.GeometryUtil.isPointInRing([lng4,lat4], result_list); // 是否在多边形内
    var inRing5 = AMap.GeometryUtil.isPointInRing([lng5,lat5], result_list); // 是否在多边形内
    var inRing6 = AMap.GeometryUtil.isPointInRing([lng6,lat6], result_list); // 是否在多边形内*/

    // if(inRing1 == true || inRing2 == true || inRing3 == true || inRing4 == true || inRing5 == true || inRing6 == true) {
    var latLng1 = new AMap.LngLat(lng1, lat1);
    var latLng2 = new AMap.LngLat(lng2, lat2);
    var latLng3 = new AMap.LngLat(lng3, lat3);
    var latLng4 = new AMap.LngLat(lng4, lat4);
    var latLng5 = new AMap.LngLat(lng5, lat5);
    var latLng6 = new AMap.LngLat(lng6, lat6);
    var path = [
    latLng1,
    latLng2,
    latLng3,
    latLng4,
    latLng5,
    latLng6
    ];
    // 添加一个多边形
    draw_list(path);
    // }
    }

    // 分段画图 添加一个多边形
    function draw_list(path, fillColor='#fff', strokeColor='black') {
    var polygon = new AMap.Polygon({
    path: path,
    fillColor: fillColor, // 多边形填充颜色
    borderWeight: 1, // 线条宽度,默认为 1
    strokeColor: strokeColor, // 线条颜色
    });

    map.add(polygon);
    }

    // 释放内存 休息
    function sleep(ms) {
    return new Promise(resolve =>
    setTimeout(resolve, ms)
    )
    }
    // 地图结束
  • 相关阅读:
    maven私服
    docker
    mysql ip
    jenkins安装
    centeros7防火墙操作
    centeros7 gitlap安装
    nexus安装及使用(maven私服掌握)
    idea永久激活使用
    redis密码验证
    Nginx服务优化配置
  • 原文地址:https://www.cnblogs.com/yanggege/p/11655740.html
Copyright © 2020-2023  润新知