百度地图

其他

百度前端工程师教你如何在地图上实现炫光可视化效果
https://zhuanlan.zhihu.com/p/127204910
百度地图升级7：mapV的引用 - 曲线加流动动画
https://blog.csdn.net/Hei_lovely_cat/article/details/106919514
Vue中加载mapv和mapvgl_李疆的博客-CSDN博客
https://blog.csdn.net/qq_40323256/article/details/105881002
只显示杭州市的地图
https://segmentfault.com/q/1010000003806665

官方文档

百度地图JSAPI WebGL v1.0类参考/百度地图 WebGL 配置参考
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a3b0
mapvgl配置
https://mapv.baidu.com/gl/docs/IconLayer.html
演示地址/在线示例
https://mapv.baidu.com/gl/examples/#%E7%BA%BF%E5%9B%BE%E5%B1%82
百度开放平台使用文档
http://lbsyun.baidu.com/solutions/mapvdata
百度地图开发资源
http://lbsyun.baidu.com/index.php?title=open/dev-res

官方服务

百度地图github
https://github.com/huiyan-fe/mapvgl/issues
百度地图工单
http://lbsyun.baidu.com/apiconsole/fankui/list#/home

code


import as mapv from ‘mapv’
import as mapvgl from ‘mapvgl’
import initMap from ‘../../../utils/commonMapgl’
// import hangzhou from ‘../../../utils/hangzhou.json’
import chongqingJson from ‘../../../utils/chongqing.json’
// 初始化mapvgl
handleInitMapvgl () {
let initData = initMap({
tilt: 60,
heading: -22.3,
// center: [106.541075, 29.564519], // 重庆
center: [106.536275, 29.564519], // 重庆（自定义）
// center: [111.858773,27.848930], // 湖南
// center: [120.20000, 30.26667], // 杭州
zoom: 17,
enableMapClick: false,
isFixed: true
})
this.map = new mapvgl.View({ map: initData })
this.map.startAnimation()
this.handleDrawThree()
},
// 基础面图层
handleDrawThree () {
let shaperLayer = new mapvgl.ShapeLayer({
color: ‘rgba(56, 88, 195, 1)’,
blend: ‘lighter’,
style: ‘windowAnimation’,
opacity: 1
})
this.map.addLayer(shaperLayer)
let polygons = []
let len = chongqingJson.length
for (let i = 0; i < len; i++) {
let line = chongqingJson[i]
let polygon = []
let pt = [line[1] 512, line[2] 512]
for (let j = 3; j < line.length; j += 2) {
pt[0] += line[j] / 100 / 2
pt[1] += line[j + 1] / 100 / 2
polygon.push([pt[0], pt[1]])
}

  1.             polygons.push({<br />                    geometry: {<br />                        type: 'Polygon',<br />                        coordinates: [polygon]<br />                    },<br />                    properties: {<br />                        height: line[0] / 2<br />                    }<br />                })<br />            }<br />            shaperLayer.setData(polygons)<br />        }<br />_var_ darkStyle = [{<br />    featureType: 'background',<br />    elementType: 'geometry',<br />    stylers: {<br />        color: '#07135b'<br />        // color: '#6495ed'<br />        // color: '2b578b'<br />    }<br />}, {<br />[commonMapgl.js](https://www.yuque.com/attachments/yuque/0/2021/js/1208551/1609743721812-2168ec86-d212-4eff-9faf-02cd6b740ada.js?_lake_card=%7B%22uid%22%3A%221609743721699-0%22%2C%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2021%2Fjs%2F1208551%2F1609743721812-2168ec86-d212-4eff-9faf-02cd6b740ada.js%22%2C%22name%22%3A%22commonMapgl.js%22%2C%22size%22%3A40435%2C%22type%22%3A%22text%2Fjavascript%22%2C%22ext%22%3A%22js%22%2C%22progress%22%3A%7B%22percent%22%3A99%7D%2C%22status%22%3A%22done%22%2C%22percent%22%3A0%2C%22id%22%3A%22YRcyB%22%2C%22card%22%3A%22file%22%7D)

高德地图

https://lbs.amap.com/api/javascript-api/guide/map/map-style