百度地图 |
您所在的位置：网站首页 › 百度地图画线测距怎么用 › 百度地图 |
百度地图
|
这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战 简介在地图项目的开发中，往往会伴随大量的数据展示。这时候使用地图api提供的覆盖物函数绘制元素，在页面上会生成大量的DOM元素导致页面变卡。 为了解决大量数据展示，百度地图开发了一套处理数据可视化的框架MapVGL。使用webGL的技术在canvas中绘制图形，能有效的提高页面性能。 MapVGL MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。 而且支持three.js，就是说三维模型也可以通过图层的方式加入地图中。 其核心就是，通过地理信息数据，生成可视化图层。然后把可视化图层添加在地图上层进行管理。 需注意的是，地理信息数据格式是规定好的。必须具有geometry字段来定义坐标信息，同时可通过properties字段添加附件信息。geometry字段数据格式使用的是GeoJSON的规范。 { "geometry": { "type": "Point",// 数据类型 "coordinates": [125.6, 10.1] }, "properties": { "name": "哈哈" } } 开始使用 通过标签引入地图api地址和mapvgl地址，这里的ak是你在地图服务中心注册的。不了解的可以点 这里 初始化地图 // 百度地图API功能 var map = new BMapGL.Map('bmap') // 创建Map实例 // 初始化地图,设置中心点坐标和地图级别 map.centerAndZoom(new BMapGL.Point(121.480509, 31.23592), 10) // 启用 鼠标滚轮事件 map.enableScrollWheelZoom() 开始使用mapvgl加载点图层 通过View()构造函数绑定地图实例，生层图层管理器。 创建可视化图层，并添加到图层管理器中。这里使用的点图层PointLayer。mapvgl内置了很多图层，以方便开发者直接使用，不用关心webGL绘制的具体实现。 根据地理信息数据格式，创建要使用的点数据。格式错误无法加载数据。 把数据传入可视化图层中。 // 2. 创建MapVGL图层管理器 var view = new mapvgl.View({ map: map }) // 3. 创建可视化图层，并添加到图层管理器中 var layer = new mapvgl.PointLayer({ color: 'rgba(153,50,204, 1)', blend: 'lighter', size: 11 }) view.addLayer(layer) // 4. 准备好规范化坐标数据 var data = [] for (var i = 0; i < 1000; i++) { data.push({ geometry: { type: 'Point', coordinates: [Math.random() * 25 + 100, Math.random() * 25 + 20] } }) } // 5. 关联图层与数据 layer.setData(data) |
【本文地址】
今日新闻 |
推荐新闻 |