关于地图:vueamap高德地图轨迹回放动画实现

如何在vue高德地图中实现如下成果,主动对多个坐标生成轨迹线,箭头主动在线上挪动的动画成果: 引入el-amap,增加renderPath办法用于渲染一个轨迹、巡航器。轨迹实例创立后被长期存储在window中,如果是期间须要切换轨迹巡航的话须要在创立实例前从新渲染下之前的轨迹,window.pathSimplifierIns&&window.pathSimplifierIns.setData([])初始化上一个轨迹: <el-amap vid="amapDemo" ref="map" :zoom="zoom" :center="center" ></el-amap>methods: { renderPath(d){ var that = this; AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) { window.pathSimplifierIns&&window.pathSimplifierIns.setData([]); //切换时先重置轨迹数据从新渲染 if (!PathSimplifier.supportCanvas) { alert('以后环境不反对 Canvas!'); return; } var pathSimplifierIns = new PathSimplifier({ zIndex: 100, map: that.$refs.map.$$getInstance(), //所属的地图实例 getPath: function(pathData, pathIndex) { return pathData.path; }, renderOptions: { keyPointTolerance:40, pathLineStyle: { dirArrowStyle: true }, getPathStyle: function(pathItem, zoom) { return { pathLineStyle: { strokeStyle: 'rgba(0,0,0,0)', borderWidth:0, lineWidth:0 }, pathLineSelectedStyle: { lineWidth:6 }, pathNavigatorStyle: { fillStyle: '#303133' } }; } } }); window.pathSimplifierIns = pathSimplifierIns; pathSimplifierIns.setData([{name:'抄表轨迹',path:d}]); //创立一个巡航器 window.navg0 = pathSimplifierIns.createPathNavigator(0, { loop: true, //循环播放 speed: 6000 }); window.navg0.start(); }); },}调用renderPath传入点坐标数组: ...

May 8, 2022 · 1 min · jiezi

关于地图:天地图修改主题颜色修改背景色

前言最近公司比较忙,也没工夫发些博文,最近正好因为我的项目须要大屏展现地图,大屏少数都是应用暗蓝色底图,目前天地图不提供暗蓝色瓦片,自带的JS API只反对black和indigo,但我的项目要求必须要用天地图。搜索引擎找了找解决方案,也是花里胡哨的各种形式都有,最初决定用CSS的filter解决这个问题,在博客记录下解决办法。 灵感https://blog.csdn.net/Corey_m...通过这篇博文的介绍,大略确定了方向,就是用filter:url()加上预约义成果的函数调整出最终成果。 办法关上:CSS Filter 编辑器上传天地图的截图到编辑器,调整下方预设及右侧参数将svg预设搁置在<body>中,将编辑器中CSS Code的栏目所生成的CSS,加在天地图的canvas下面如果预设没有想要的成果,能够应用SVG Gradient Map Filter,本人调出一个成果展现通过调整后的最终展现成果,谁能想到这居然是天地图呢?

April 14, 2022 · 1 min · jiezi

关于地图:百度专网地图助力中国联通智慧运营

随着产业互联网的蓬勃发展,政企数字化转型和智能化降级的步调一直放慢,专网环境下的地图服务日益成为刚需。尤其是对地图安全性要求较高的政企用户,既须要把业务零碎部署在数据安全性最大化的公有专网(如企业内网、公安网、视频专网等)环境中,又心愿享受到与互联网环境下体验统一的业余地图服务。为此,针对政企客户的专网业务利用开发,作为百度智能云的外围特色能力和重要赋能引擎的百度地图,推出了百度专网地图(DuGIS)这一专网 GIS 产品,并以此为根底,面向多个行业提供定制化解决方案。 中国联结网络通信有限公司(以下简称“联通团体”)是百度策略合作伙伴,单方长期在人工智能、大数据、云计算等畛域发展深刻单干。中国联结网络通信有限公司软件研究院(以下简称“联通软研院”)是在联通团体全面数字化转型的重要战略部署下于2015年7月成立,本部位于北京,设有济南、哈尔滨、西安、广州和南京五个分院。作为联通团体全面数字化转型的驱动者,数据和技术因素价值的赋能者,联通软研院以构建智慧经营大脑、畅通智慧经营体系为指标,心愿实现 IT 零碎五经六脉畅通,数据血液千场万景贯通,麻利赋能三个所有畅通。在此过程中,面向经营三大资源可视作为其中重点工作,旨在解决联通团体市场生产因素看不清、渠道网络布局难的痛点。 2021年初,联通软研院和百度智能云就构建联通团体对立的天文空间数据服务开放平台发展单干,以百度地图打造的百度专网地图(DuGIS)为切入点,实现市场、渠道、网络三大资源可视,并构建场景化专题利用。继2021年初的一期单干,百度智能云又于同年10月中标联通软研院数据中台可视化研发我的项目二期,具体单干次要包含以下三个方面: 一是为联通团体打造对立天文空间数据服务开放平台,撑持31省(市)分公司基于百度专网地图(DuGIS)实现业务利用开发和经营,帮忙其构建地图利用生态。百度专网地图(DuGIS)提供二三维一体化的 GIS 引擎,具备鲜活丰盛的 GIS 大数据能力、弱小的 API 订制开发能力、炫酷的 GIS 大数据可视化能力以及欠缺的时空数据管理和公布能力,可依据团体和31省(市)分公司的业务场景和具体需要进行定制部署,撑持各类利用开发,让联通用户即便在受限的专网环境内,也可应用及时更新的互联网数据和地图开发服务。 百度专网地图(DuGIS)解决方案架构 二是为解决上述联通团体市场生产因素看不清、渠道网络布局难的痛点,百度智能云利用自身行业当先的地图可视化技术和引擎,基于专网地图(DuGIS),为联通软研院定制化开发专题场景利用,对治理区域内网络、市场、渠道三大资源数据进行了全面整合和可视化出现,实现了“三图合一”,并深入了数据洞察的深度与广度,为以精准营销为目标业务数字化经营提供了无力撑持。 百度专网地图助力三大资源可视 三是通过提供时空数据托管平台、网格智能治理平台,定制开发智慧经营作战沙盘,贯通全量客户经营平台与掌沃通 APP,进一步赋能联通团体实现一图“看全数据,看清资源,看准市场”,买通“资源概览—模型构建—赋能一线”的全流程业务链。 截至目前,对立天文空间数据服务开放平台已撑持多省接入,无力撑持了各分公司波及地图调用的业务利用开发,月均调用量超过1500万次。专题场景利用已实现31省推广笼罩,数字化作战沙盘也在多省上线开明。 与联通软研院的单干,是百度智能云基于百度地图这一外围特色能力和重要引擎、赋能通信行业这一策略赛道的重要实际,致力于充分运用位置服务、GIS 引擎、开放平台和地图利用,为运营商经营剖析决策和一线业务人员营销进行赋能。基于该实际所造成的百度地图电信资源可视与经营解决方案也已利用于四川挪动、广东挪动等客户,成为电信行业数智化转型降级和降本增效的无效撑持。 百度地图电信资源可视与经营解决方案 将来,百度智能云将持续充分发挥在人工智能、大数据、云计算等方面的行业当先劣势,继续深耕运营商行业,推动产业高质量倒退。

January 18, 2022 · 1 min · jiezi

关于地图:百度地图与所托瑞安达成深度合作-共同推进商用车安全智能驾驶领域创新

随着5G、人工智能以及物联网技术的遍及,商用车智能驾驶将迎来新一轮的利用暴发期。近日,百度地图与所托瑞安达成深度单干,单方将立足各自劣势,围绕被动平安技术开展多种形式单干,独特推动商用车智能驾驶畛域的翻新利用。 所托瑞安是国产商用车智能驾驶畛域的领军企业,致力于商用车平安驾驶及大数据利用,通过多维度交融技术,实现商用车自适应控制、预见性巡航以及简单路况下的主动驾驶门路布局。 基于本次单干,所托瑞安将在其商用车智能驾驶和被动平安产品中,深度融入百度地图提供的ADAS Map地图数据及引擎服务,通过及时预判全方位行驶门路,并依据地图数据进行路线信息提取,从而精确获取车辆周边地位信息,为被动安全设备优化提供精准的策略根据,帮忙驾驶人员缩小不良行为操作,预警、躲避危险路况,无效晋升驾驶安全系数,升高车辆事变产生概率。 百度地图ADAS Map是面向商用车L2级辅助主动驾驶和被动平安推出的高精度超视距地图产品,通过在包含根底路网、货车限速等货车专用高精度路网根底上减少坡度、曲率等ADAS属性,实现货车路线信息更加精细化的出现。同时,百度地图ADAS Map还反对面向多场景的定制化开发,提供稳固、高效、平安、低资源耗费的OTA服务,不仅可能进行被动平安揭示,还可利用于车辆能源预管制等方面,帮忙车辆显著晋升燃油经济性和行驶安全性。 自2020年4月公布车用地图数据服务计划以来,百度地图继续深耕车载地图各垂直细分畛域,于日前正式推出商用车地图服务计划。依靠丰盛的地图数据积攒和弱小的AI能力,打造货车ADAS Map、货车车载导航、货车车载AR导航等外围产品,满足汽车行业在车载导航、辅助主动驾驶、被动平安、手车互联等多种场景下的智能化需要。针对商用车驾驶场景,百度地图提供从SD规范导航数据到HD主动驾驶地图数据的不同精度等级的高现势性全域车规级地图产品,为商用车主机厂磋商身打造实用货车通行路线、物理限度、交通限行、限速的货车车载导航,将ADAS Map与货车车机地图、实时动态数据相结合,进一步提高商用车驾驶体验。同时,融入挪动端地图SDK和丰盛的在线地图服务,反对商用车车企疾速构建手车互联利用。 百度地图商用车地图数据服务计划 作为中国当先的智能化地位服务平台,百度地图已与多家智能汽车标杆企业在车机前装、后装、车载地图利用等方面达成单干,笼罩乘用车、商用车和摩托车等垂直畛域。 将来,百度地图将继续夯实智能化位置服务实力,携手智能汽车行业踊跃拥抱新趋势,共建智能化将来。点击进入取得更多技术信息~~

December 1, 2021 · 1 min · jiezi

关于flutter:腾讯位置服务Flutter业务实践地图SDK-Flutter插件实现一

前言Flutter 作为目前通用的业界跨平台解决方案,开拓了一套全新的设计理念,通过自研的 UI 框架,反对高效构建多端平台上的利用,同时放弃着原生利用一样的高性能。在Flutter我的项目开发过程中,对插件的开发和复用可能进步开发效率,升高工程的耦合度。Flutter开发者能够引入对应插件就能够为我的项目疾速集成相干能力,从而专一于具体业务性能的实现。而在Flutter我的项目开发过程中面对通用业务逻辑拆分、或者须要对原生能力封装等场景时,开发者须要开发新的组件。 为缩小开发者同时开发Android和iOS利用的老本,晋升开发效率,升高集成地图SDK的门槛,腾讯位置服务团队也打算于业务实际中基于原生地图SDK能力封装一套地图Flutter插件,反对Flutter开发者跨平台调用地图SDK接口。笔者在2019年实习期间,曾基于过后的最新版本4.2.4的Android地图SDK,将地图SDK中一些罕用的根底的地图操作性能封装,构建了一套Android端的地图SDK Flutter插件。 现如今,地图SDK曾经迭代到了4.4.0版本,笔者也将地图Flutter插件进行了一次相干版本升级。本篇文章将介绍地图Flutter插件我的项目的构建、地图实例的加载以及demo示例出现。对于地图根底操作的性能封装细节将在后续文章中进行具体解说阐明。 地图Flutter插件我的项目的构建地图Flutter插件我的项目构造地图Flutter插件我的项目构架的整体构造如下图所示: android/ios目录:原生代码。对应为Android/iOS Flutter插件目录。lib目录:Dart 代码。Flutter开发者将会应用这里的Flutter插件实现的接口。example目录:地图SDK的demo程序。用于验证Flutter插件的可用性的应用示例。 地图Flutter插件依赖配置项Android端的Flutter插件配置项与官网对于Android地图SDK的配置阐明相似,须要配置android目录下的两个文件:build.gradle、AndroidManifest.xml。其中Android端的Flutter插件的包名为com.tencent.tencentmap,AndroidManifest.xml文件配置如下: <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.tencent.tencentmap"> <!-- 腾讯地图 sdk 要求的权限(开始) --> <!-- 拜访网络获取地图服务 --> <uses-permission android:name="android.permission.INTERNET" /> <!-- 查看网络可用性 --> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <!-- 拜访WiFi状态 --> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <!-- 须要内部存储写权限用于保留地图缓存 --> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <!-- 获取 device id 分别设施 --> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <!-- 获取日志读取权限,帮忙咱们进步地图 sdk 稳定性 --> <uses-permission android:name="android.permission.READ_LOGS" /> <!-- 腾讯地图 sdk 要求的权限(完结) --> <!-- 腾讯定位 sdk 要求的权限 (开始) --> <!-- 通过GPS失去准确地位 --> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <!-- 通过网络失去粗略地位 --> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <!-- 拜访网络. 某些地位信息须要从网络服务器获取 --> <uses-permission android:name="android.permission.INTERNET" /> <!-- 拜访WiFi状态. 须要WiFi信息用于网络定位 --> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <!-- 批改WiFi状态. 发动WiFi扫描, 须要WiFi信息用于网络定位 --> <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /> <!-- 拜访网络状态, 检测网络的可用性. 须要网络运营商相干信息用于网络定位 --> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <!-- 拜访网络的变动, 须要某些信息用于网络定位 --> <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" /> <!-- 拜访手机以后状态, 须要device id用于网络定位 --> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <!-- 腾讯定位 sdk 要求的权限 (完结) --> <application> <!-- 如果您key确认无误,却仍然受权没有通过,请查看您的key的白名单配置 --> <meta-data android:name="TencentMapSDK" android:value="Your key"/> </application></manifest>本文应用的Android端地图SDK版本为4.4.0。同时,本文Flutter插件的实现语言是基于Kotlin实现。build.gradle的依赖配置项如下: ...

April 2, 2021 · 2 min · jiezi

关于腾讯地图:微信小程序类快递自动填写收发货地址功能

开发场景获取以后地位信息或者某地的行政区划信息或者街道信息,实现相似电商平台填写收货地址性能。 技术选型微信小程序JavaScript SDK 微信小程序插件 确定业务逻辑及页面设计以简洁大气为主,款式抉择weui。 具体开发过程1、首先注册小程序,我以前有就没从新申请。 2、注册腾讯位置服务开发者 须要留神的是:集体开发者接口调用数是有限额的,收费额度1W,并发数5,申请成为企业用户可收费晋升更大配额。 3、依据文档开发。 文档写的比拟全,很多中央都是例子,不过须要留神以下几个点: 1)reverseGeocoder接口返回数据和文档不统一,须要依据理论返回值编写,另外有些字段在返回值中不肯定有,最好用hasOwnProperty进行判断后赋值。 2)实际上文档有点乱,须要查看多个中央的文档。 文档参考地址: https://developers.weixin.qq.... https://lbs.qq.com/miniProgra... JS代码//index.js//获取利用实例const app = getApp()const chooseLocation = requirePlugin('chooseLocation');var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');var qqmapsdk = new QQMapWX({ key: '申请的Key'}); Page({ data: { recommend:'无地址信息', address:'无地址信息', name:'无区划信息', adcode:'无代码信息', business_area_title:'无商圈信息', crossroad_title:'无路口信息', town:'无街道信息', jingweidu:'无经纬度信息', landmark:'无左近地标', }, onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target) } return { title: '行政区划、街道信息查问', path: '/page/index/index' } }, onShareTimeline: function(){ return { title: '行政区划、街道信息查问', } }, onLoad: function () { // 实例化API外围类 wx.getSetting({ success: (res) => { // res.authSetting['scope.userLocation'] == undefined 示意 初始化进入该页面 // res.authSetting['scope.userLocation'] == false 示意 非初始化进入该页面,且未受权 // res.authSetting['scope.userLocation'] == true 示意 地理位置受权 if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) { wx.showModal({ title: '申请受权以后地位', content: '须要获取您的地理位置,请确认受权', success: function (res) { if (res.cancel) { wx.showToast({ title: '回绝受权', icon: 'none', duration: 1000 }) } else if (res.confirm) { wx.openSetting({ success: function (dataAu) { if (dataAu.authSetting["scope.userLocation"] == true) { wx.showToast({ title: '受权胜利', icon: 'success', duration: 1000 }) //再次受权,调用wx.getLocation的API this.getLocation(); } else { wx.showToast({ title: '受权失败', icon: 'none', duration: 1000 }) } } }) } } }) } else if (res.authSetting['scope.userLocation'] == undefined) { //调用wx.getLocation的API this.getLocation(); } else { //调用wx.getLocation的API this.getLocation(); } } }) }, getLocation: function(){ var vm = this; wx.getLocation({ type:'gcj02', success: function(res){ app.globalData.latitude=res.latitude; app.globalData.longitude=res.longitude; vm.getaddressinfo(); }, fail:function(res){ console.log("获取经纬度失败"+JSON.stringify(res)) } }) }, onShow: function(){ var vm = this; const location = chooseLocation.getLocation(); if(location!=null){ app.globalData.latitude=location.latitude; app.globalData.longitude=location.longitude; this.getaddressinfo(); } }, getaddressinfo: function(){ let vm = this; qqmapsdk.reverseGeocoder({ location: { latitude: app.globalData.latitude, longitude: app.globalData.longitude }, get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数 success: function(res) {//胜利后的回调 var result = res.result; //举荐地址 app.globalData.recommend = result.formatted_addresses.recommend; // 行政区划 name app.globalData.name = result.ad_info.name; //惯例地址 address app.globalData.address = result.address; //行政区划代码 adcode app.globalData.adcode = result.ad_info.adcode; if(result.address_reference.hasOwnProperty("business_area")){ //商圈 business_area_title app.globalData.business_area_title = result.address_reference.business_area.title+" "+result.address_reference.business_area._dir_desc; } if(result.address_reference.hasOwnProperty("crossroad")){ //路口 crossroad_title app.globalData.crossroad_title = result.address_reference.crossroad.title+" "+result.address_reference.crossroad._dir_desc; } //街道 if(result.address_reference.hasOwnProperty("town")){ //路口 crossroad_title app.globalData.town = result.address_reference.town.title+" "+result.address_reference.town._dir_desc; } if(result.address_reference.hasOwnProperty("landmark_l2")){ app.globalData.landmark = result.address_reference.landmark_l2.title; } if(result.address_reference.hasOwnProperty("landmark_l1")){ app.globalData.landmark = result.address_reference.landmark_l1.title; } vm.setData({ recommend: result.formatted_addresses.recommend, name: result.ad_info.name, address: result.address, adcode: result.ad_info.adcode, business_area_title: app.globalData.business_area_title, crossroad_title: app.globalData.crossroad_title, town: app.globalData.town, jingweidu: result.location.lat+", "+result.location.lng, landmark: app.globalData.landmark, }); }, fail: function(error) { console.error(error); }, complete: function(res) { // console.log(res); } }) }, onUnload () { // 页面卸载时设置插件选点数据为null,避免再次进入页面,geLocation返回的是上次选点后果 chooseLocation.setLocation(null);}, getUserInfo: function(e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }, change: function(){ const key = '应用在腾讯位置服务申请的key'; const referer = '这是哪'; //调用插件的app的名称 const location = JSON.stringify({ latitude: app.globalData.latitude, longitude: app.globalData.longitude }); const category = '生存服务,娱乐休闲'; wx.navigateTo({ url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category }); },})成果 ...

March 26, 2021 · 2 min · jiezi

关于地图:腾讯地图手把手教你实现微信小程序路线规划

前言本文旨在以mpvue框架为根底,探讨地图类小程序的开发思路。 原作者利用mpvue + 腾讯地图的能力做了一个地铁路线布局的小程序,次要提供寰球次要城市的地铁线网图及游览介绍,其中国内城市反对查看地图和路线布局。 目前腾讯位置服务也推出了路线布局插件、地铁图插件,实现更加简略便捷,感兴趣的可点击查看。 运行截图 mpvue 介绍 及我的项目搭建mpvue = miniprogram + vue framework,说白了就是用vue框架开发小程序。mpvue最近降级为2.x版本,反对微信、支付宝、百度和头条小程序。和传统形式相比,mpvue开发具备以下长处: 彻底的组件化开发能力:进步代码复用性 残缺的 Vue.js 开发体验不便的 Vuex 数据管理计划:不便构建简单利用快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload反对应用 npm 内部依赖应用 Vue.js 命令行工具 vue-cli 疾速初始化我的项目H5 代码转换编译成小程序指标代码的能力就集体应用体验来看,还是挺丝滑顺畅的,传统web利用开发无缝切换至小程序开发,根本零门槛。要留神的就是小程序的限度及和vue的差别: 小程序应用绝对像素 rpx 进行款式布局局部css选择符不反对,目前只反对 #id | .class | tag | tag,tag | ::after ::before,所以要特地留神组合式生命周期,mpvue将小程序和vue的生命周期混在一块,详情见 mpvue.com/mpvue/#_3 ,目前这个中央还有很多坑,比方在小程序page unload时,vue实例却没被销毁,导致下次进入页面时,页面状态不变,必须在unLoad时手动重置状态等mpvue 会封装小程序数据对象,通常以$mp结尾,如event.$mp.detail.target等小程序的组件和vue组件有差别,不要空想vue组件的个性都能用,如slot,异步组件等等vue store 和 wx localstorage 最好不要弄混,要依据不同须要抉择不同的存储形式不要用vue路由,要采纳小程序原生的导航机制而后,咱们搭建开发环境,mpvue脚手架是开箱即用的: # 全局装置 vue-cli# 个别是要 sudo 权限的$ npm install --global vue-cli@2.9# 创立一个基于 mpvue-quickstart 模板的新我的项目# 老手一路回车抉择默认就能够了$ vue init mpvue/mpvue-quickstart my-project# 装置依赖,走你$ cd my-project$ npm install$ npm run dev接着,欠缺文件构造,减少 config、store、mixins等模块,如图: ...

March 5, 2021 · 3 min · jiezi