- MapContext.addGroundOverlay贴的图在地图上为什么图片和原图不一样?
使用该api时,得到的贴图和原图不一样,导致贴图在地图上有偏差,看起来像是原图被挤压了,是不是我算的坐标的代码不对? 成果图: [图片] 为了看的更明显,改成了黑色背景,可以明显看到直角不再是直角: [图片] 原图:http://dl.dpgrid.com/wxapp/dom/zcl-wuhan.jpg 整体代码: <template> <view> <map id="myMap" :latitude="markers[0].latitude" :longitude="markers[0].longitude" scale="16" :markers="markers" :ground-overlays="groundOverlays" @markertap="onMarkerTap" enable-satellite :min-scale="16" :max-scale="18"></map> <view v-if="showImage" class="image-container"> <movable-area class="movable-area"> <movable-view class="movable-view" scale scale-min="1" scale-max="4" direction="all"> <image :src="imageUrl" mode="aspectFit"></image> </movable-view> </movable-area> <view class="close-btn" @click="hideImage">×</view> </view> </view> </template> <script> export default { data() { return { markers: [ { id: 1, latitude: 30.4701, longitude: 114.4301, iconPath: '/static/alarmLocation.png', width: 50, height: 70 } ], imageUrl: '', iconSrc: '/static/alarmLocation.png', showImage: false, mapContext: null, groundOverlayOptions: { area1: { id: 1, src: 'https://dl.dpgrid.com/wxapp/dom/zcl-wuhan.jpg', pixelScale: 0.00000496465716626, width: 1916, height: 1832, topLeftLng: 114.33830699979174, topLeftLat: 30.75189899769226, }, area2: { id: 2, src: '', pixelScale: 0, width: 0, height: 0, topLeftLng: 0, topLeftLat: 0, } }, }; }, onLoad(options) { try { this.mapContext = wx.createMapContext('myMap', this); if (!this.validateOptions(options)) { throw new Error('无效的参数'); } const imageUrl = `https://dl.dpgrid.com/${options.img}`; this.imageUrl = imageUrl; this.updateMarkerPosition(options); // this.addGroundOverlay(options.type); this.addGroundOverlay('area1'); } catch (error) { console.error('初始化失败:', error.message); } }, methods: { validateOptions(options) { return options?.latitude && options?.longitude && options?.img // && options?.type; }, updateMarkerPosition(options) { // 不进行WGS84到GCJ02的转换 // const gcj02Coords = this.wgs84ToGcj02(Number(options.longitude), Number(options.latitude)); // 进行WGS84到GCJ02的转换 const gcj02Coords = this.wgs84ToGcj02(Number(options.longitude), Number(options.latitude)); const newMarkers = [{ id: 1, // latitude: Number(options.latitude), // longitude: Number(options.longitude), latitude: gcj02Coords.lat, longitude: gcj02Coords.lng, iconPath: this.iconSrc, width: 50, height: 70 }]; this.replaceMarkers(newMarkers); }, replaceMarkers(newMarkers) { // console.log('替换为新marker', newMarkers); this.markers = newMarkers }, onMarkerTap() { this.showImage = true; }, hideImage() { this.showImage = false; }, addGroundOverlay(type) { const overlayOption = this.groundOverlayOptions[type]; if (!overlayOption) { console.log('未找到对应的覆盖物配置'); return; } const bounds = this.calculateBoundsFromTfw( overlayOption.pixelScale, overlayOption.width, overlayOption.height, overlayOption.topLeftLng, overlayOption.topLeftLat ); // console.log('计算的边界值:', bounds); this.mapContext.addGroundOverlay({ id: overlayOption.id, src: overlayOption.src, bounds: bounds, success: (res) => { console.log('添加覆盖物成功', res); }, fail: (err) => { console.log('添加覆盖物失败', err); } }); }, calculateBoundsFromTfw(pixelScale, width, height, topLeftLng, topLeftLat) { const wgs84NE = { lng: topLeftLng + (pixelScale * width), lat: topLeftLat }; const wgs84SW = { lng: topLeftLng, lat: topLeftLat + (-pixelScale * height) }; const wgs84NW = { lng: topLeftLng, lat: topLeftLat }; const wgs84SE = { lng: topLeftLng + (pixelScale * width), lat: topLeftLat + (-pixelScale * height) }; // 输出四个角的GCJ02坐标 console.log('贴图四个角的GCJ02坐标:'); console.log('西北角:', wgs84NW.lat, wgs84NW.lng); console.log('东北角:', wgs84NE.lat, wgs84NE.lng); console.log('西南角:', wgs84SW.lat, wgs84SW.lng); console.log('东南角:', wgs84SE.lat, wgs84SE.lng); const gcj02NE = this.wgs84ToGcj02(wgs84NE.lng, wgs84NE.lat); const gcj02SW = this.wgs84ToGcj02(wgs84SW.lng, wgs84SW.lat); return { northeast: { latitude: gcj02NE.lat, longitude: gcj02NE.lng }, southwest: { latitude: gcj02SW.lat, longitude: gcj02SW.lng } }; }, wgs84ToGcj02(lng, lat) { const PI = 3.14159265358979324; const a = 6378245.0; const ee = 0.00669342162296594323; if (this.outOfChina(lat, lng)) { return { lng, lat }; } let dLat = this.transformLat(lng - 105.0, lat - 35.0); let dLng = this.transformLng(lng - 105.0, lat - 35.0); const radLat = lat / 180.0 * PI; let magic = Math.sin(radLat); magic = 1 - ee * magic * magic; const sqrtMagic = Math.sqrt(magic); dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI); dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI); return { lat: lat + dLat, lng: lng + dLng }; }, outOfChina(lat, lng) { if (lng < 72.004 || lng > 137.8347) { return true; } if (lat < 0.8293 || lat > 55.8271) { return true; } return false; }, transformLat(x, y) { let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x)); ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0; ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0; return ret; }, transformLng(x, y) { let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x)); ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0; ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0; return ret; } } }; </script> <style> map { width: 100%; height: 100vh; } .image-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background-color: rgba(0, 0, 0, 0.5); } .movable-area { width: 100%; height: 100%; } .movable-view { width: 100%; height: 100%; } image { width: 100%; height: 100%; } .close-btn { position: fixed; top: 30px; right: 30px; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: rgba(0, 0, 0, 0.5); color: #fff; border-radius: 50%; font-size: 24px; z-index: 101; cursor: pointer; } </style>
02-24 - 关于微信开发者工具的加固代码的功能,想知道加固后的源码却没有地方可以看吗?
只能看到加固后的映射文件:projectmaps,想知道加固后的源码却没有地方可以看,既然是加固,我们开发者肯定想看到加固后对应的效果,特别是代码片段加固前后的对比,还有code_obfuscation_config.json每次都要重新生成,假如我有上百上千文件需要加固呢,尝试过使用javascript-obfuscator混淆代码,但是混淆之后微信开发者工具直接编译失败了。。 这是我的javascript-obfuscator混淆配置: { "compact": true, "controlFlowFlattening": false, "deadCodeInjection": false, "debugProtection": false, "debugProtectionInterval": 0, "disableConsoleOutput": false, "identifierNamesGenerator": "hexadecimal", "log": false, "numbersToExpressions": false, "renameGlobals": false, "selfDefending": false, "simplify": true, "splitStrings": false, "stringArray": true, "stringArrayCallsTransform": false, "stringArrayCallsTransformThreshold": 0.5, "stringArrayEncoding": [], "stringArrayIndexShift": true, "stringArrayRotate": true, "stringArrayShuffle": true, "stringArrayWrappersCount": 1, "stringArrayWrappersChainedCalls": true, "stringArrayWrappersParametersMaxCount": 2, "stringArrayWrappersType": "variable", "stringArrayThreshold": 0.75, "unicodeEscapeSequence": false } 使用的是javascript-obfuscator官方默认的配置 然后这是我的混淆脚本: cd C:\zjx\dpcloud-wxapp\dpcloud-wxapp\build robocopy C:\zjx\dpcloud-wxapp\dpcloud-wxapp\unpackage\dist\build\mp-weixin C:\zjx\dpcloud-wxapp\dpcloud-wxapp\unpackage\dist\build\mp-weixin-confound /E /XD projectmaps /XF code_obfuscation_config.json javascript-obfuscator C:\zjx\dpcloud-wxapp\dpcloud-wxapp\unpackage\dist\build\mp-weixin-confound --config setting.json --output C:\zjx\dpcloud-wxapp\dpcloud-wxapp\unpackage\dist\build\mp-weixin-confound --exclude vendor.js --exclude uview-ui 参考链接: javascript-obfuscator:https://obfuscator.io/ uniapp 一键发行代码并混淆代码:https://blog.csdn.net/weixin_43965251/article/details/127439523?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522C2ED1BC8-9823-4949-B285-9EC2E972BDD3%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=C2ED1BC8-9823-4949-B285-9EC2E972BDD3&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-127439523-null-null.142^v100^pc_search_result_base1&utm_term=hbuilder%20%E6%B7%B7%E6%B7%86%E4%BB%A3%E7%A0%81&spm=1018.2226.3001.4187 还有加固代码后的反查流程是加固后必定报错还是说只是用来找错误的
2024-09-25 - 通过调用接口发布的公众号文章无法在公众号看到,什么时候更新API支持下?
大概去了解下都知道,现在很多需求是同步公众号文章到网站或者其他地方,好的解决方法肯定是发布的同时调用接口在微信公众号同步发布。但是,我发现调用接口之后的文章和在后台正常发布的文章不一样。只能在后台发表记录看到。公众号历史记录里看不到。去查了下才知道是已发布和已群发(如今是已发表)性质不一样。什么是发布:https://developers.weixin.qq.com/community/develop/doc/00066cdc8a0be0eb4bec936c751809发布是公众号内容发表形式的一种。不同于群发,发布的内容不会通过推送消息触达给关注的粉丝,也不会占用群发的次数。需要主动转发,相当于只是生成了一个永久链接,而需求肯定是要群发啊。想知道官方什么时候能更新下API支持下这个业务场景。个人在找原因途中发现的最接近现在的文章是2023年11月份的:https://developers.weixin.qq.com/community/develop/doc/000e2e6cae0c00d91cb08c7666b800?highLine=%25E6%258E%25A5%25E5%258F%25A3%25E5%258F%2591%25E5%25B8%2583%25E6%2596%2587%25E7%25AB%25A0 https://developers.weixin.qq.com/community/develop/doc/000a208c6ac9685e13b0d8a7366800?highLine=%25E6%258E%25A5%25E5%258F%25A3%25E5%258F%2591%25E5%25B8%2583%25E6%2596%2587%25E7%25AB%25A0 [图片][图片]
2024-03-04 - 项目基于electron和quasar,打包成exe文件后,微信扫码授权后没有重定向,怎么办?
项目是基于electron和quasar开发的,要求实现微信扫码登录的功能,我是引用wxlogin.js和实例化wxlogin实现显示二维码的,我在重定向的页面加了个postmessage向父级页面传参,然后父级页面接收进行获取token的操作。在本地把项目跑起来是可以实现微信扫码登录的,但是打包成exe之后,微信扫码之后只会多一个绿色的勾,也就是说我扫码是有反馈的,但是授权之后就没反应了。也不报错,我在重定向页面添加的的日志输出,手机扫码授权之后也没有输出出来。就好像是完全没有跳转。但是查看发出去的get请求,返回的数据里状态码是405,也有code。这种情况问题是出在哪呢。我后续解决这个方法是不是得去监听这个get请求来获取code,但是这个get请求又该怎么监听呢。请教大佬们。。
2023-11-29