好玩的NR地图节点

节点介绍 https://flows.nodered.org/node/node-red-contrib-web-worldmap

基于这个节点做了个高德定位的流,
第一个节点是用的trccar的安卓客户端,直接将数据传到NR里面,然后经过提取,GPS坐标系转换,最终显示到对应的地图上面。
trccar提交数据,设置服务器地址:: NR的地址:端口/123
查看地图地址::NR的地址:端口/map

这个节点很强大,很多东西都没仔细去研究,大家一起玩吧,可玩性非常高。
包括轨迹追踪这些都可以实现的。

[{"id":"91b5cef3.ccd06","type":"worldmap","z":"b798ba12.39c648","name":"","lat":"30","lon":"120","zoom":"14","layer":"","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"false","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"false","path":"/map","x":1150,"y":480,"wires":[]},{"id":"2a120a2.a73fff6","type":"function","z":"b798ba12.39c648","name":"高德自定义","func":"//算法来自https://blog.csdn.net/Admin_yi/article/details/70160875\nvar GPS = {\n    PI : 3.14159265358979324,\n    x_pi : 3.14159265358979324 * 3000.0 / 180.0,\n    delta : function (lat, lon) {\n        // Krasovsky 1940\n        //\n        // a = 6378245.0, 1/f = 298.3\n        // b = a * (1 - f)\n        // ee = (a^2 - b^2) / a^2;\n        var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。\n        var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。\n        var dLat = this.transformLat(lon - 105.0, lat - 35.0);\n        var dLon = this.transformLon(lon - 105.0, lat - 35.0);\n        var radLat = lat / 180.0 * this.PI;\n        var magic = Math.sin(radLat);\n        magic = 1 - ee * magic * magic;\n        var sqrtMagic = Math.sqrt(magic);\n        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);\n        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);\n        return {'lat': dLat, 'lon': dLon};\n    },\n\n    //GPS---高德\n    gcj_encrypt : function ( wgsLat , wgsLon ) {\n        if (this.outOfChina(wgsLat, wgsLon))\n            return {'lat': wgsLat, 'lon': wgsLon};\n\n        var d = this.delta(wgsLat, wgsLon);\n        return {'lat' : wgsLat + d.lat,'lon' : wgsLon + d.lon};\n    },\n    outOfChina : function (lat, lon) {\n        if (lon < 72.004 || lon > 137.8347)\n            return true;\n        if (lat < 0.8293 || lat > 55.8271)\n            return true;\n        return false;\n    },\n    transformLat : function (x, y) {\n        var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));\n        ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;\n        ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;\n        ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;\n        return ret;\n    },\n    transformLon : function (x, y) {\n        var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));\n        ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;\n        ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;\n        ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;\n        return ret;\n    }\n};\n\nAutoNavi = GPS.gcj_encrypt(Number(msg.payload.lat),Number(msg.payload.lon)); // 函数返回转换后的高德坐标\n\n\nmsg.payload = {\n    \"name\": msg.payload.name, //显示的坐标名字,不可重复\n    \"lat\": Number(AutoNavi.lat),\n    \"lon\": Number(AutoNavi.lon),\n    \"speed\": Number(msg.payload.speed),\n    \"bearing\": Number(msg.payload.bearing),\n    \"command\": {\n        \"lat\": Number(AutoNavi.lat),\n        \"lon\": Number(AutoNavi.lon),\n        \"map\": {\n            \"name\": \"AutoNavi1\", //地图名字,不可重复\n            \"url\": \"https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}\",\n            \"opt\": { \"maxZoom\":18, \"attribution\":\"Tiles &copy; 高德地图\" }\n        },\n        \"layer\": \"AutoNavi1\", //图层名字,不可重复\n        \"panlock\": false, //锁定图层不可移动\n        \"zoomlock\":false, //锁定图层不可缩放\n        \"zoom\": Number(msg.payload.zoom) //图层缩放比例\n    },\n    \"icon\": msg.payload.icon,\n    \"ttl\": Number(msg.payload.ttl)\n    \n};\n\nreturn msg;\n\n","outputs":1,"noerr":0,"x":990,"y":480,"wires":[["91b5cef3.ccd06","43aaf8dc.8ebb28"]]},{"id":"ca11ac17.17a5e","type":"function","z":"b798ba12.39c648","name":"获得坐标点","func":"\nmsg.payload = {\n    \"lat\": msg.req.query.lat,\n    \"lon\": msg.req.query.lon,\n    \"speed\": msg.req.query.speed,\n    \"bearing\": msg.req.query.bearing,\n    \"zoom\": 18, //地图缩放,18为最大\n    \"icon\": \"car\", //显示的图标\n    \"ttl\": 30, //最后坐标在地图上面的停留时间,单位秒\n    \"name\": \"监控1\"\n};\n\nreturn msg;\n","outputs":1,"noerr":0,"x":810,"y":480,"wires":[["2a120a2.a73fff6"]]},{"id":"43aaf8dc.8ebb28","type":"debug","z":"b798ba12.39c648","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1170,"y":440,"wires":[]},{"id":"c68cc04.1bf334","type":"http in","z":"b798ba12.39c648","name":"","url":"/123","method":"post","upload":false,"swaggerDoc":"","x":640,"y":480,"wires":[["a91bf34d.a559f","ca11ac17.17a5e","bed898b8.722218"]]},{"id":"a91bf34d.a559f","type":"debug","z":"b798ba12.39c648","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":790,"y":440,"wires":[]},{"id":"bed898b8.722218","type":"http response","z":"b798ba12.39c648","name":"","statusCode":"200","headers":{},"x":800,"y":520,"wires":[]}]

先点赞再看

为大佬点完所有的赞

加上萝卜定位节点美滋滋,感谢三木解锁新技能

又增加新玩法了,感谢三木

debug能显示经纬度坐标,web也打开也能显示地图,就是那目标看不见,不会玩,哈。

获取正确地址偏移值(地址对,图片不对):
longitude偏移值:-0.01185
latitude偏移值:-0.00328
msg.payload.longitude=parseFloat(msg.payload.longitude).toFixed(14) - 0.01185).toString()
msg.payload.latitude=(parseFloat(msg.payload.latitude).toFixed(14) - 0.00328).toString()

获取正确图片偏移值(地址不对,图片对):
longitude偏移值:-0.00632
latitude偏移值:-0.0062
msg.payload.longitude=(parseFloat(msg.payload.longitude).toFixed(14) - 0.00632).toString()
msg.payload.latitude=(parseFloat(msg.payload.latitude).toFixed(14) - 0.0062).toString()

用谷歌地图的坐标即可以。

:sob:车联网给的坐标是百度的,然后用三木大佬的这个高德节点,所以需要偏移值

image 如何使这个节点显示已连接,需怎么配置,望大佬指导