maptalks地图工具节选、生成圆内随机点,生成多边形内随机点以及RGB颜色值与十六进制颜色码互相转换

地图工具

     /**
     * @description 轨迹开始动画
     * @param line 轨迹线geometry
     * @param point 点geometry
     * @param obj 可选参数 obj对象中time控制动画时长,bearing控制地图是否偏转
     */
    start(line:any,point:any,obj?:any) {
        line.animateShow({
            duration: obj.time*1000 || 10000,
            easing: "linear"
        },
        function(_frame:any, c:any) {
            currentCoordinate = c.copy();
            point.setCoordinates(currentCoordinate);
            if (preCoordinate) {
                if (!window.map.isInteracting()) {
                    window.map.setCenter(currentCoordinate);
                    // 转向
                    if(obj.bearing){
                        const bearing = MapTool.getBearing(preCoordinate, currentCoordinate);
                        window.map.setBearing(bearing);
                    }
                }
            }
            preCoordinate = c.copy();
        });
    },
    /**
     * @description 轨迹转向
     * @param c1 上一个点
     * @param c2 当前点
     */
    getBearing(c1:any, c2:any) {
        // eslint-disable-next-line no-undef
        const p1 = turf.point(c1.toArray()),
            // eslint-disable-next-line no-undef
            p2 = turf.point(c2.toArray());
        // eslint-disable-next-line no-undef
        const bearing = turf.bearing(p1, p2);
        if (Math.abs(window.map.getBearing() - bearing) < 30) {
            return window.map.getBearing();
        }
        return bearing;
    },
    /**
     * @description 绘制聚集圈
     * @param c 圆的圆心点
     * @param color 圈的颜色
     */
    drawJujiCircle(c:any,color?:any){
        let val:any;
        val = colorRevert(color);
        let colorNew = JSON.parse(val);
        return new ispace.Circle(c,15, {
            symbol: {
              lineColor: 'rgba(208, 194, 116,0)',
              polygonFill: {
                opacity: 0.5,
                type: "radial",
                colorStops: colorNew,
                // [
                //     // [0.0, "rgba(0,0,0,0)"],
                //     // [0.2, "rgba(255,54,0,0.2)"],
                //     // [0.6, "rgba(255,54,0,0.6)"],
                //     // [1.0, "rgba(255,54,0,1)"],
                // ],
              },
              polygonOpacity: 1,
              lineWidth: 0,
            },
        })
    },
    /**
     * @description 聚集圈沿轨迹运动
     * @param data 模拟数据
     * @param c 聚集圈的中心点
     * @param layer 图层
     * @param guijiTime 轨迹时间
     * @param speed 倍数,默认是正常1倍速
     */
    jujiCircleMove(data:any,c:any,layer:any,guijiTime:any,speed:number=1,color?:any){
        let arr=<any[]>[];
        for(let item of data){
            arr.push([item.lon,item.lat]);
        }
        // 聚集圈
        const rect3 = MapTool.drawJujiCircle(c,color).addTo(layer);
        // 运动轨迹
        let line = MapTool.drawLine(arr,"rgba(208, 194, 116,0.2)").addTo(layer);
        // 开始运动
        MapTool.start(line,rect3,{time:guijiTime*speed,bearing:false});
    },
    /**
     * @description 超员区域以及区域内人员点位撒点
     * @param geoJson 模拟数据
     * @param color 超员区域的填充色
     * @param layer 图层
     * @param pointsNum 超员区域内人员数量
     * @param imgUrl 图标
     */
    chaoyuan(geoJson:any,color:any,layer:any,pointsNum:number,imgUrl:string){
        let geometry = geoJson&&ispace.Geometry.fromJSON(geoJson);
        if(!geometry)return;
        geometry.setSymbol({
            polygonFill:color,
            polygonOpacity:0.6,
            lineColor:color
        })
        geometry.addTo(layer);
        let extent = layer.getExtent();
        
        // 超员人员点位
        for(let i=0;i<pointsNum;i++){
            var position = turf.randomPosition([extent.xmin,extent.ymin,extent.xmax,extent.ymax])
            MapTool.drawPoint(position,imgUrl).addTo(layer);
        }
        window.map.animateTo({
            zoom : 18,
            center :extent.getCenter(),
        }, {
            duration : 1000,
            easing : 'out'
        });
    },
    /**
     * @description 生成圆内随机点位
     * @param centerX 圆心x
     * @param centerY 圆心y
     * @param radius 半径
     * @returns 返回新的坐标点
     */
    getRandomCoordinate(centerX:number, centerY:number, radius:number) { 
        // 生成随机的极坐标角度 
        var angle = Math.random() * 2 * Math.PI; 
        // 生成随机的距离(在半径范围内) 
        var distance = (Math.random() * radius)/111300;
        // 根据极坐标计算新的坐标点 
        var x = centerX + distance * Math.cos(angle); 
        var y = centerY + distance * Math.sin(angle); 
        // 返回新的坐标点 
        return { x: x, y: y };
    },

转化颜色(RGB颜色值与十六进制颜色码互相转换)

/**
 * @description RGB颜色值与十六进制颜色码互相转换
 * @param color 颜色值
 */
export function colorRevert(color:any) {
    if(color.indexOf('rgb')>-1){
        return getResColor(color);
    }else{
        let val = hexToRgb(color);
        return getResColor(val.rgb);
    }
}
function getResColor(color:any){
    if(color.indexOf('rgba')>-1){
        let val = color.split(",");
        return `[[0, "${val[0]},${val[1]},${val[2]},0)"],
                [0.2, "${val[0]},${val[1]},${val[2]},0.2)"],
                [0.6, "${val[0]},${val[1]},${val[2]},0.6)"],
                [1.0, "${val[0]},${val[1]},${val[2]},1)"]]`

    }else if(color.indexOf('rgb')> -1){
        let val = color.split(",");
        let transitionValBefore = val[0].slice(0,3)+'a'+val[0].slice(3);
        // 反括号在下标第几个
        let iconIndex = val[2].indexOf(")");
        // console.log(val[2].slice(0,iconIndex));
        // console.log(val[2].slice(-1));//截取从倒数第1个字符开始一直到结束
        // 0, "rgba(255,235,59),0)
        
        return `[[0, "${transitionValBefore},${val[1]},${val[2].slice(0,iconIndex)},0${val[2].slice(-1)}"],
                [0.2, "${transitionValBefore},${val[1]},${val[2].slice(0,iconIndex)},0.2${val[2].slice(-1)}"],
                [0.6, "${transitionValBefore},${val[1]},${val[2].slice(0,iconIndex)},0.6${val[2].slice(-1)}"],
                [1.0, "${transitionValBefore},${val[1]},${val[2].slice(0,iconIndex)},1${val[2].slice(-1)}"]]`

    }
}
// export function rgbToHex(val:any) {  //RGB(A)颜色转换为HEX十六进制的颜色值
//     var r, g, b, a,
//         regRgba = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/,    //判断rgb颜色值格式的正则表达式,如rgba(255,20,10,.54)
//         rsa = val.replace(/\s+/g, '').match(regRgba);
//     if (!!rsa) {
//         r = parseInt(rsa[1]).toString(16);
//         r = r.length == 1 ? '0' + r : r;
//         g = (+rsa[2]).toString(16);
//         g = g.length == 1 ? '0' + g : g;
//         b = (+rsa[3]).toString(16);
//         b = b.length == 1 ? '0' + b : b;
//         a = (+(rsa[5] ? rsa[5] : 1)) * 100;
//         return { hex: '#' + r + g + b, r: parseInt(r, 16), g: parseInt(g, 16), b: parseInt(b, 16), alpha: Math.ceil(a) };
//     } else {
//         return { hex: '无效', alpha: 100 };
//     }
// }
export function hexToRgb(val:any) {   //HEX十六进制颜色值转换为RGB(A)颜色值
    // 16进制颜色值的正则
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    // 把颜色值变成小写
    var color = val.toLowerCase();
    var result = '';
    if (reg.test(color)) {
        // 如果只有三位的值,需变成六位,如:#fff => #ffffff
        if (color.length === 4) {
            var colorNew = "#";
            for (var i = 1; i < 4; i += 1) {
                colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
            }
            color = colorNew;
        }
        // 处理六位的颜色值,转为RGB
        var colorChange = [];
        for (var i = 1; i < 7; i += 2) {
            colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
        }
        result = "rgb(" + colorChange.join(",") + ")";
        return { rgb: result, r: colorChange[0], g: colorChange[1], b: colorChange[2] };
    } else {
        result = '无效';
        return { rgb: result };
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,百度地图使用了一个球体来表示地球表面。然而,从提供的用中没有提到百度地图的球体可以改变颜色。百度地图主要用于显示地理信息,提供导航和位置服务,并没有提及球体颜色的相关信息。因此,百度地图的球体颜色不能被改变。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [百度地图切割算法讲解](https://blog.csdn.net/ztzi321/article/details/17542563)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [undefined](undefined)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [百度地图图块切割算法—论文节选](https://blog.csdn.net/soldan/article/details/17074757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值