零基础WebGIS开发入门 | 地图控件与点标记交互

继续webgis开发的零基础入门教程今天讲两个核心功能地图控件和点标记。一、地图控件很多人以为缩放按钮、比例尺是地图自带的。其实不是高德API默认啥控件都没有需要你自己一个个加。常用控件有哪些控件功能代码ToolBar缩放、平移控制条new AMap.ToolBar()Scale左下角比例尺new AMap.Scale()HawkEye右下角鹰眼缩略图new AMap.HawkEye()MapType标准/卫星图切换按钮new AMap.MapType()ControlBar3D视角控制罗盘new AMap.ControlBar()怎么加插件化加载高德API用AMap.plugin()按需加载控件避免一次性加载所有资源AMap.plugin([ AMap.ToolBar, AMap.Scale, AMap.HawkEye, AMap.MapType, AMap.ControlBar ], function() { // 加载完成后逐个添加到地图 map.addControl(new AMap.ToolBar()); // 工具条 map.addControl(new AMap.Scale()); // 比例尺 map.addControl(new AMap.HawkEye()); // 鹰眼 map.addControl(new AMap.MapType()); // 地图类型切换 map.addControl(new AMap.ControlBar()); // 控制条 });注意控件是插件先plugin()加载再addControl()添加。如果直接new会报错因为控件代码还没加载进来。二、点标记地图能显示了控件也加了接下来要往上面放东西。点标记Marker可以理解为地图覆盖物就是地图上那个红色图钉用来标位置。实际操作过程中会⽤⼀个图形来表示。根据经纬度去创建marker这就是点标记然后 再添加到地图上就可以现在把他做成交互式的。1. 点击事件获取经纬度绑定click事件点击地图时获取当前位置的经纬度// 监听地图点击事件 map.on(click, function(event){ console.log(event) console.log(经度: ${event.lnglat.lng},纬度: ${event.lnglat.lat}) })这⾥注意在控制台打印时候字符串时用的是反引号键盘1左边那个键不是单引号。否则模板字符串的变量插值不会生效。看⼀下效果这就实现了在控制台输出经纬度的操作。2. 结合点击事件实时添加标记⾸先基于坐标来绘制点。代码// 添加点 // 创建marker对象 var marker new AMap.Marker({ position: new AMap.LngLat(114.255025, 30.62157) }) // 添加到地图 map.add(marker)上⾯的例⼦只能是先指定经纬度画点我们也可以结合地图事件达到实时点击画点效果如下实现代码// 监听地图点击事件 map.on(click, function(event){ // console.log(event) // console.log(经度: ${event.lnglat.lng},纬度: ${event.lnglat.lat}) // 创建marker对象 var marker new AMap.Marker({ position: event.lnglat, }) // 添加到地图 map.add(marker) })这样就可以点击⼀次添加⼀个marker进来。可以添加很多个点标记。事实上点标记是可以很灵活的⽐如标记⼀个地物钻孔建筑物等。⽐如下⾯的天坛的地物标 记。就可以做得很漂亮。总结本篇讲了点标记能在地图上插上图钉。但GIS不只是标点还要画线、画面、画范围。下一期讲几个核心图形折线、多边形、圆形、矩形以及怎么在线编辑。