Vue + 高德地图

Environment

• Node = 8.10
• Vue = ^2.5.16
• Element-UI = 2.13.2

安装

Install dependencies:

npm install

运行

# serve with hot reload at localhost:8903
npm run dev

功能说明

图层管理

• 该面板的最大高度为window高度的60%
• 点击+从本地载入.geojson文件
• 点击向下箭头, 可折叠图层面板
• 鼠标hover在图层列表上, 地图上对应的marker会高亮显示
• 图层列表可以拖放改变图层顺序, 最上面的图层的marker可以被框选. 拖放操作会清空框选的marker列表
• 可通过点击眼睛图标来切换该图层的marker是否在地图上显示
• 可通过点击删除图标来删除对应的图层, 并从地图上移除该图层上的所有marker

框选Marker

• 该面板的最大高度为window高度的60%
• 可选择框选的形状圆形和矩形
• 点击向下箭头, 可折叠该面板
• 点击列表中的marker, 地图会重新设置marker为地图中心, 并且该marker的图标也会变成不一样的图标
• 点击底部的清除按钮, 将清除所有框选的marker, 并清除框选状态
• 点击底部的导出按钮, 将导出所有框选的marker为.geojson文件
• 底部右下角的数字表示当前选中的marker的个数

地图

• 鼠标移到图标上, 会显示该图标的名称
• 在地图上点击鼠标右键会清除所有选中的marker,