介绍 腾讯位置服务在多平台为开发者提供了丰富的地图展现形式,帮助从属于不同领域的开发人员轻松完成构建地图并在其基础上打造专属内容的工作。 同时配合海量数据、个性化定制、可视化等能力满足各个行业场景下对地图的需求。 Javascript API GL是基于WebGL技术打造的3D版地图API,3D化的视野更为自由,交互更加流畅。 --引入Javascript API GL,参数说明参见下文--> <script src="https://map.qq.com/api/gljs? -- 定义<em>地图</em>显示容器 --> <div id="container">
腾讯位置服务在半年前推出JavaScript API GL beta版,这期间很多开发者将其采用到自己的项目中,同时为我们反馈使用问题与建议,帮助JavaScript API GL得到快速成长。 JavaScript API GL是新一代基于WebGL实现的高性能三维渲染引擎而封装的一套3D版本地图API,借助GPU的计算能力实现海量数据渲染,满足3D视角下的地图展示,旨在让地图呈现给用户最真实的世界 3D效果与流畅体验于一身 缩放由18级扩大到20级,地图查看、交互操作更精细; 支持无级缩放,过程平滑,再无顿挫。 文字实时渲染,碰撞消失淡进淡出,过程优雅自然。 显卡:集成显卡 浏览器版本:Chrome 75.0 (32位) 性能对比: 2D API JavaScript API GL 点标注 3k 20w 线段 1k 15w 多边形 500 1w 文本标注 3k 10w 功能全面升级,场景支持丰富 除了体验与性能方面,JavaScript API GL在功能方面也做了大幅度升级,更为完备,包括点、线、面绘制,自定义图层叠加、个性化样式及应用工具等,使开发者可以更加容易的实现产品构思
Kepler.gl制作常规地图非常简单方便,稍微摸索一下仪表盘界面就可以get到用法,但有些特殊的地图则需要额外对数据进行处理或使用Kepler.gl中的一些隐藏功能,譬如之前写过的Python+Kepler.gl 本文将要介绍的「时间轮播地图」也是一种比较特殊的地图,下面我们就将结合实际例子进行介绍。 2 Python+Kepler.gl制作时间轮播地图 2.1 实例:Uber出行乘客上下车信息 我们以Uber官方提供的2015年某日纽约乘客上下车数据为例,对应文章开头Github仓库中的data.csv , data={'layer1': raw}) # 生成Kepler.gl网页 map1.save_to_html(file_name='时间轮播地图示例1.html', data={'layer1': raw}) # 导出网页 在外部打开前面导出的html文件,初始界面如图2: 图2 首先删除掉侧边栏Kepler.gl自动识别创建出的全部图层,我们自己手动创建所需的图层,以OD线为例: 图3
适老化专题的第一期已经完成了对微信、支付宝、百度大字版、百度关怀版的实测体验,本期将以地图导航类应用为主,模拟老年人出行需求、使用场景、操作习惯,主要对百度地图关怀版、高德地图、腾讯地图关怀版进行上手体验 一、百度地图关怀版 本次体验的百度地图关怀版版本号是1.0.5,通过网页浏览器搜索下载,手机型号是华为手机nova 9。此款应用是单独推出面向老年人的地图导航类App。 与百度地图相比,百度地图关怀版字号、地图图标、按钮等元素变大,在查找地点、路线推荐、路线导航页面均做了适老化适配,【设置】界面简洁,内附使用帮助说明,方便老年用户理解与操作。 2)在保留地图核心功能的同时,关怀版在功能上为老年用户做了精简,删减了金币商城、校园地图等低频功能。 3)【查找地点】功能输入框区域变大,位置明显,点击后可以设置常用地址,并支持修改常用地址。 3)在搜索地点、路线推荐页面已做适老化适配。
目录 前言 问题描述:地图中心点位置偏移 剥丝抽茧:问题排查过程 1. 初步怀疑 API 的问题 2. 与项目大屏动态地图宽度功能的冲突 3. 一开始,我觉得奇怪,甚至怀疑是百度地图 JavaScript API GL 本身有问题,但经过一番研究后,才发现是自己代码中的一个细节问题引发了这个 bug。 问题描述:地图中心点位置偏移 在项目中,我们使用了百度地图 JavaScript API GL 来加载一张行政区的地图,并且需要通过代码动态控制地图的中心点和缩放级别。 为了验证这个猜想,我用定时器改变了宽高,加入了打印日志,发现地图确实会重新加载,导致瓦片和点位发生错位。 3. 百度地图 API 提供了一个非常有用的事件 tilesloaded,表示瓦片加载完成。
准备 使用腾讯位置服务需要申请服务密钥 注意:此案例中需使用webservice,建议使用IP/域名授权方便测试,生产环境如需使用签名校验方式授权参考此处 JavaScript API GL官方文档 'building3d', //三维建筑 // 'point', // 隐藏POI文字 'label' // 道路文字 设置了边界范围后,拖拽、缩放等操作无法将地图移动至边界外,默认为null 3. 添加标记和文本 效果 ? , color: green, }, { path: [paths[2], paths[3] ], color: red, }, { path: [paths[3], paths[4]
1、用于放置百度地图的div,不能有任何一个父级元素设置 position:fixed,否则会报错:Uncaught TypeError: Cannot read property 'offsetLeft ' of null并且拖动地图视角,不会加载新地方的地图。 2、在承载地图的div或者任何一个父级元素display:none时(即地图未显示时),设置map.centerAndZoom(),百度地图会把我们设置的中心点放到地图视野的左上角,而不是视野的中心。 所以需要在地图显示时再设置map.centerAndZoom() 3、接第二条,尽量var map = new BMap.Map("baiduMap");也在地图div显示的时候做吧,否则只把map.centerAndZoom 刚开始用百度地图(最怕用第三方的api了,总是有很多bug,但是又没权限去解决),所以应该还会有要加上来的东西
1 简介 kepler.gl作为开源地理空间数据可视化神器,也一直处于活跃的迭代开发状态下。 而在前不久,kepler.gl正式发布了其2.4.0版本,下面我们就来对其重要的新特性进行介绍: 图1 2 kepler.gl 2.4.0重要新特性 2.1 增量时间窗口 在这次更新中,为时间序列数据的可视化新增了 「增量时间窗口」功能,在上一个版本2.3.2中,当我们的数据集带有时间类型字段时,在添加对应的Filters之后,显示出的时间窗口是这个样子的: 图2 而在2.4.0版本中,时间窗口如图3所示: 图 3 在如图4一样从默认的「Moving Time Window」模式切换到「Incremental Time Window」模式之后,就可以使用增量时间窗口模式,画面中的数据会从起点开始持续叠加: 图 4 2.2 Python接口新增_repr_html_()方法 而这个更新不仅针对原生的kepler.gl,还针对其面向Python的接口keplergl新增_repr_html_()方法,使得将kepler.gl
关于openlayers加载离线百度地图的东东好几年前就做过了,不过当时做的是2.0版本的。 自从好久没有去做可视化分析之后,也很少接触这些前端的JS的东西了。 于是刚好选用了百度迁徙后面的底图。 由于百度的JS包东西太多,需要的东西太复杂,于是就选用openlayers来进行测试。果然还是非常流畅。 } if(y<0){ y = "M"+(-y); } //## 核心代码处,将百度地图的调用网址修改为离线的地图瓦片服务网址
1 简介 kepler.gl作为开源地理空间数据可视化神器,也一直处于活跃的迭代开发状态下。而在前不久,kepler.gl正式发布了其2.4.0版本,下面我们就来对其重要的新特性进行介绍: ? 图1 2 kepler.gl 2.4.0重要新特性 2.1 增量时间窗口 在这次更新中,为时间序列数据的可视化新增了增量时间窗口功能,在上一个版本2.3.2中,当我们的数据集带有时间类型字段时,在添加对应的 图2 而在2.4.0版本中,时间窗口如图3所示: ? 图3 在如图4一样从默认的Moving Time Window模式切换到Incremental Time Window模式之后,就可以使用增量时间窗口模式,画面中的数据会从起点开始持续叠加: ? : 107.441431, "pitch": 0, "zoom": 3,
.aspx代码例如以下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”插入地图.aspx.cs” Inherits=”插入地图” %> DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head runat=”server”> <title></ 116.321565, 39.979607); var _m1 = new BMap.Marker(_p); map.addOverlay(_m1); //3.
接入导航SDK,以百度为例,apk包体积能增加小几十兆之多,上一版本还是几兆的apk,迭代一版本直接几十兆了,落差之大,难以接受。 虽说当下流量不值钱了,但是下载时长越久,客户丢失率越高。 最关键的是,当下地图并非一家独大,客户应该有自主选择的权利,你集成了百度,但用户却钟爱于高德,这极为尴尬。 (packageName)) return true; } } return false; } 3, 百度地图 参数说明: 参数以字符串拼接的方式即可,这里用StringBuffer拼接,比String易读些。 文档 百度地图 高德地图 腾讯地图 https://blog.csdn.net/Ever69/article/details/82427085
碰撞检测应该是在游戏等场景中很常见且基础的功能,本文记录了在JavaScript API GL遇到了这类碰撞问题的调研和实现的过程。 需求场景 用户在地图上实现MultiLabel文本标注覆盖物时,会由于两个label坐标过近,或者地图的旋转、缩放产生的变化而相互重叠。 确定算法 在JSAPI GL中,label并不是在三维空间中的,而是绘制在屏幕上的,只是会根据用户视角的移动实时计算出label在屏幕坐标中所处的位置,然后在每一帧中进行绘制。 是基于WebGL技术打造的3D版地图API,3D化的视野更为自由,交互更加流畅。 同步推出基于Javascript API GL的 位置数据可视化API库,欢迎体验。
公司做大数据展示需要用百度地图,使用的一点心得体会: 1.首先是百度官网申请ak秘匙,我这里有两个 2.百度地图例子参考多看 http://lbsyun.baidu.com/index.php? title=jspopular/guide/widget 3.百度地图 JavaScript API 要熟 http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html #a3b9 4.百度地图个性化地图在线编辑(非常有用,里面的案例怎么设置的一定要参考) 使用指南:http://lbsyun.baidu.com/img-editor.html 在线编辑地址:http: //lbsyun.baidu.com/custom/ 5.echarts万能图表,相当实用 下面总结一些操作百度的方法: 1.百度地图去掉marker覆盖物或者去掉maker的label文字 var marker 建议使用方法1和方法2,方法3只是隐藏而不是清除 2.百度地图获取所有覆盖物 map.getOverlays() let allOverlay = map.getOverlays() for
百度地图api api地址 http://lbsyun.baidu.com/ 注册账号 查看api 要先进行注册账号和申请密钥(ak)才可使用该服务,接口无使用次数限制,请放心使用 创建应用 申请账号为开发账号 point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图 设置地图的旋转角度和倾斜角度 map.setHeading(64.5); //设置地图旋转角度 map.setTilt(73); //设置地图的倾斜角度 变更地图类型为地球 map.setMapType (BMAP_EARTH_MAP); // 设置地图类型为地球模式 添加控件 添加缩放控件 var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件 = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w<em>3</em>.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="<em>百度</em><em>地图</em>,<em>百度</em><em>地图</em>API,<em>百度</em><em>地图</em>自定义工具,<em>百度</em><em>地图</em>所见即所得工具 " /> <meta name="description" content="<em>百度</em><em>地图</em>API自定义<em>地图</em>,帮助用户在可视化操作下生成<em>百度</em><em>地图</em>" /> <title>百度地图API自定义地图</title> createMap(){ var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 var point = new
一、牛人们的想法 下面是我参考的有关的博客,下面将一一列举 1.MarkerCluster之百度地图版 http://hi.baidu.com/liongg/item/d8adece188fbfb11585dd89f http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/ 4.百度地图官网上已经有JS版的标注物聚合实例与原文件 ,建议看百度地图上的代码,规范且函数注释明确。 百度地图javascript开源库: http://developer.baidu.com/map/library.htm ? 二、我的思路 1.下面以一个流程图来表述我的想法。 ? 工程demo代码下载,地图标注物聚合.zip 4.下面是程序的实例图片 ?
本文基于一个百度地图上的需求实现,记录下百度地图使用中的点滴,后续会持续更新。 地图上自定义可点击的展示框 ? 地图.gif 需求:在地图上展示区县的数据并可以点击查看下一级区域的数据: 实现的过程: 使用百度地图SDK逆向地址解析所有网络返回的地区的经纬度(市级别的地级区在逆向解析的时候,需要加上上一层的市名称 由于百度地图自带的BMKAnnotationView 中默认的是大头针,可以设置自定义图片(替换大头针),但是就是无法在地图上放置Label显示文字,本来想让所有大头针的气泡都默认弹出(设置 selected 隐藏百度地图的Logo ? 知道百度地图SDK中的类继承关系有助于我们了解、使用、自定义设置百度地图。 ---- 可看的相关文章 百度地图绘制点标记(大头针) 百度地图深度使用
同一天,百度地图419全城热恋全民狂欢活动在10个城市启动,百度地图正在有条不紊地描绘全新的未来。 百度地图变身为酒店OTA平台 互联网平台让传统旅游服务价格透明,传统代理商的利润越来越低。 百度地图引导用户将价格放在次要位置,强大的精准获客能力和零佣金的商业模式,对于酒店行业来说,无异于一个升级版的OTA,对整个行业将会起到正向作用。 百度地图更想做成生活服务入口 百度地图是中国唯一一家定位为O2O入口的地图平台。除了成为用户本地生活服务消费之外,百度地图还希望能够让用户“生活在别处”更方便。 现在,电子地图为什么不能成为我们的生活服务管家呢? 百度地图聚合百度系生态资源 百度地图在过去,更像是一个百度系业务的支撑工具:去哪儿、糯米、外卖等平台都需要百度地图inside。 腾讯地图、高德地图对于腾讯和阿里巴巴同样有这样的价值。 百度地图的野心更大,除了power百度系业务之外,百度地图还想整合百度系资源,或者说成为百度系资源的出口之一。
MapVThree Editor类 是一个功能强大超好用的地图编辑工具,让你用几行代码就能实现专业的地图绘制和编辑功能! 为什么要聊这个? 最近在做地图相关的项目时,总会遇到这样的需求:需要让用户在地图上画点什么,比如标记区域、规划路线、添加标注点等等。 它把复杂的地图编辑功能都封装好了,你只需要调用几个简单的 API,就能实现专业级的地图编辑体验。是不是听起来就很棒? 3️⃣ 点 (Point)editor.type = mapvthree.Editor.DrawerType.POINT;editor.start();适合添加标记点、地标等场景。 feature-id-123', { fillColor: '#00ff00', fillOpacity: 0.8, strokeColor: '#000000', strokeWidth: 3,