开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情
可视化的业务当中，除了我们熟悉的各种图标，柱状图、饼状图、折线图等等，地图这类也是可视化的重要的一部分，这部分要么使用百度要么使用高德，其API的学习成本还是比较高的，这一篇我们主要来看一下点和线的配置，本人也是一直在学习中，有任何问题或写的不得当的地方希望能一起交流~
- 这次我们主要来看地图中点和线的实现，上一期分享了 API 的使用，大家可以自行去查看哦 高德地图jsApi的使用 在上一篇中我们已经把地图显示到了我们的页面当中， 那么如何来配置地图上的信息呢？地图上最关键的莫过于点和线了，我这里自行写了一些假数据，随便找的 一些坐标，大家可以看一下数据格式：
是一个数组，数组中每一项代表着一个点信息，name 是所在省份， position 就是点的经纬度，我们只使用 经 纬度的信息，即可完成点的绘制， 每个对象中的 line 就是线的信息，每个点可能有多条线，线还包括不同的类型， 这里我们暂时不考虑曲线，现在暂时只用直线绘制，因为曲线需要知道路线关键点的经纬度信息，比较麻烦~
let coordData = [
{
name:"黑龙江",
position:[127,47],
line:[
{
current:[[127,47],[126,43]],
type:1
}
]
},
{
name:"吉林",
position:[126,43],
line:[
{
current:[[126,43],[113,41]],
type:1
}
]
},
{
name:"内蒙古",
position:[113,41],
line:[
{
current:[[113,41],[116,40]],
type:1
}
]
},
{
name:"河北1",
position:[116,40],
line:[
{
current:[[116,40],[114,37]],
type:1
}
]
},
{
name:"河北2",
position:[114,37],
line:[
{
current:[[114,37],[117,38]],
type:1
},
{
current:[[114,37],[117,36]],
type:1
},
{
current:[[114,37],[111,37]],
type:1
}
]
},
]
最终绘制以后得到的效果是什么样的呢？
图片这里不让放，放了不通过， 大家可以自行想象一下哈哈哈，就是地图上几个圆点，两个点之间连成线，我代码长裤里面的 demo，可以直接index运行能看效果。
我们上面根据先的 type 类型，类进行不同样式的绘制，点绘制的在上一期代码中我们已经实现了，下面可以看一下线的代码，过滤线方法 使用的便是我们上面的假数据，我自己实际的假数据条数要多一些，这里就不粘贴那么多了，可以到我的代码仓库查看
// 过滤线方法
function setLine(arr){
return arr.reduce((prev,item)=>{
if(item?.line){
prev.push(...item.line)
}
return prev
},[])
}
let renderLine = setLine(coordData)
// 设置线
let polyline = renderLine.reduce((prev,item,index)=>{
let weight = item.type === 1 ? 5 : 3;
let color = item.type === 1 ? '#3366bb' : '#6622FF'
prev.push(new AMap.Polyline({
path:item.current,
// showDir: true, 设置线方向
strokeColor: color, // 线颜色
strokeWeight:weight, // 线宽
strokeOpacity:1 // 透明度
}))
return prev
},[])
这其中，因为只是使用了假数据，所以我没有对逻辑进行详细的拆分，在实际项目当中，数据实际上应该都是后端准备好了，前端处理的并不多，让后端按照我们的需要的对象形式进行准备就可以了。
这里要说一下点样式，在 AMap 实例化的时候， 可以配置
content，替代icon，就是图形中的点了，配合 类型和css绘制即可
let content = '<div class="marker-route"></div>';
let markerd = new AMap.Marker(
{
map: map,
// icon: marker?.icon,
content,
offset: new AMap.Pixel(-8,-8),
visible:true, // 点标记是否可见
position: [marker.position[0], marker.position[1]],
});
- 这里需要注意的就是我们的 点 和 线的
API了， 应该如何扩展？ 怎样来实现呢？ - 首先来看一下点，我们地图上点标记有一个小图标，这个图标是默认的，他是怎么配置的？可以看到高德地图是导入的图片：
上面是两种导入的方式，我们可以看到，使用的都是图片形式，所以这里在项目中最好是让自己团队的UI设计一个出来好一些，基于我自己的业务来说，因为我的点要有右键选中功能，和清除选中功能，就需要去用不同的图标样式来进行区分，这时候就要找到选中点，重置其图标样式了。
点的配置项有哪些？
这个可以直接在其文档中查看的
- 而线的样式其实有多种情况可以供给我们选中，我们可以看一下高德地图给我们提供了哪些：
这里面绘制其实底层还是调用的 canvas 的能力，所以绘制的属性也基本大同小异，我们可以基于自己的需求去进行不同的绘制
tips
上一期忘了说一点，就是高德地图的缩放和拖拽这部分，有时候我们是希望地图是固定的，不希望被拖拽或者缩放，在上一期我已经写过了这两部分代码，但是还是想在这里提出来，因为这个 API 也不是很好找哈哈~
var map = new AMap.Map('container',
{
zoom: 4.8,
center: lnglat
});
// 地图是否可拖拽和缩放
map.setStatus({
dragEnable:false, // 是否可拖拽
zoomEnable:true // 是否可缩放
})
- 其实拖拽和缩放这个 有两种实现方式，官网也给出了完整的示例
