diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js index ccd840b..ffe6d22 100644 --- a/ruoyi-ui/src/main.js +++ b/ruoyi-ui/src/main.js @@ -64,8 +64,12 @@ Vue.component('ImageUpload', ImageUpload) Vue.component('ImagePreview', ImagePreview) +window._AMapSecurityConfig = { + securityJsCode:'bb574d0ee2e8504331eb78c44ee9bcec', +} AMapLoader.load({ 'key': '268909dc36fd438908a64ebe057bfb17', + 'securityJsCode':'bb574d0ee2e8504331eb78c44ee9bcec', 'version': '2.0', 'plugins': ['AMap.Scale','AMap.GeoJSON','AMap.MarkerClusterer','AMap.PolygonEditor','AMap.Polygon','AMap.CircleEditor'] }).then((AMap) => { diff --git a/ruoyi-ui/src/utils/coordtransform.js b/ruoyi-ui/src/utils/coordtransform.js new file mode 100644 index 0000000..e2df589 --- /dev/null +++ b/ruoyi-ui/src/utils/coordtransform.js @@ -0,0 +1,153 @@ +/** + * Created by Wandergis on 2015/7/8. + * 提供了百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换 + */ +//UMD魔法代码 +// if the module has no dependencies, the above pattern can be simplified to +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define([], factory); + } else if (typeof module === 'object' && module.exports) { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like environments that support module.exports, + // like Node. + module.exports = factory(); + } else { + // Browser globals (root is window) + root.coordtransform = factory(); + } +}(this, function () { + //定义一些常量 + var x_PI = 3.14159265358979324 * 3000.0 / 180.0; + var PI = 3.1415926535897932384626; + var a = 6378245.0; + var ee = 0.00669342162296594323; + /** + * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换 + * 即 百度 转 谷歌、高德 + * @param bd_lon + * @param bd_lat + * @returns {*[]} + */ + var bd09togcj02 = function bd09togcj02(bd_lon, bd_lat) { + var bd_lon = +bd_lon; + var bd_lat = +bd_lat; + var x = bd_lon - 0.0065; + var y = bd_lat - 0.006; + var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI); + var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI); + var gg_lng = z * Math.cos(theta); + var gg_lat = z * Math.sin(theta); + return [gg_lng, gg_lat] + }; + + /** + * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换 + * 即谷歌、高德 转 百度 + * @param lng + * @param lat + * @returns {*[]} + */ + var gcj02tobd09 = function gcj02tobd09(lng, lat) { + var lat = +lat; + var lng = +lng; + var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI); + var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI); + var bd_lng = z * Math.cos(theta) + 0.0065; + var bd_lat = z * Math.sin(theta) + 0.006; + return [bd_lng, bd_lat] + }; + + /** + * WGS84转GCj02 + * @param lng + * @param lat + * @returns {*[]} + */ + var wgs84togcj02 = function wgs84togcj02(lng, lat) { + var lat = +lat; + var lng = +lng; + if (out_of_china(lng, lat)) { + return [lng, lat] + } else { + var dlat = transformlat(lng - 105.0, lat - 35.0); + var dlng = transformlng(lng - 105.0, lat - 35.0); + var radlat = lat / 180.0 * PI; + var magic = Math.sin(radlat); + magic = 1 - ee * magic * magic; + var sqrtmagic = Math.sqrt(magic); + dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); + dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); + var mglat = lat + dlat; + var mglng = lng + dlng; + return [mglng, mglat] + } + }; + + /** + * GCJ02 转换为 WGS84 + * @param lng + * @param lat + * @returns {*[]} + */ + var gcj02towgs84 = function gcj02towgs84(lng, lat) { + var lat = +lat; + var lng = +lng; + if (out_of_china(lng, lat)) { + return [lng, lat] + } else { + var dlat = transformlat(lng - 105.0, lat - 35.0); + var dlng = transformlng(lng - 105.0, lat - 35.0); + var radlat = lat / 180.0 * PI; + var magic = Math.sin(radlat); + magic = 1 - ee * magic * magic; + var sqrtmagic = Math.sqrt(magic); + dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI); + dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI); + var mglat = lat + dlat; + var mglng = lng + dlng; + return [lng * 2 - mglng, lat * 2 - mglat] + } + }; + + var transformlat = function transformlat(lng, lat) { + var lat = +lat; + var lng = +lng; + var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)); + ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; + ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0; + ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0; + return ret + }; + + var transformlng = function transformlng(lng, lat) { + var lat = +lat; + var lng = +lng; + var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)); + ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0; + ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0; + ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0; + return ret + }; + + /** + * 判断是否在国内,不在国内则不做偏移 + * @param lng + * @param lat + * @returns {boolean} + */ + var out_of_china = function out_of_china(lng, lat) { + var lat = +lat; + var lng = +lng; + // 纬度3.86~53.55,经度73.66~135.05 + return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55); + }; + + return { + bd09togcj02: bd09togcj02, + gcj02tobd09: gcj02tobd09, + wgs84togcj02: wgs84togcj02, + gcj02towgs84: gcj02towgs84 + } +})); diff --git a/ruoyi-ui/src/views/board/senso/index.vue b/ruoyi-ui/src/views/board/senso/index.vue index 46df105..02663a3 100644 --- a/ruoyi-ui/src/views/board/senso/index.vue +++ b/ruoyi-ui/src/views/board/senso/index.vue @@ -110,6 +110,9 @@ import { getHistoryData, getLinkDevices } from '@/api/board/senso' +import { + wgs84togcj02 +} from '@/utils/coordtransform' let map = null export default { @@ -211,10 +214,18 @@ export default { let dataList = data.historyData?.dataList || [] if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) { this.isMap = true - dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).forEach(e => { + let mapData = dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e=>{ + let [lng,lat] = wgs84togcj02(e.longitude,e.latitude) + return { + ...e, + longitude:lng, + latitude:lat + } + }) + mapData.forEach(e => { this.setMarker([e.longitude, e.latitude], e.ts) }) - this.setPolyline(dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => { + this.setPolyline(mapData.map(e => { return [e.longitude, e.latitude] })) // this.tableData = data.historyData?.dataList