高德地图框选选点并修改颜色

实现高德地图框形选点、圆形选点、多边形选点，并修改选中点的颜色

效果图：

效果图

1、引入高德地图js，需要用的的key值请去高德开发平台申请：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key值&plugin=AMap.MouseTool"></script>

2、设置全局变量

var map = null, // 地图
        mouseTool = null, // 鼠标绘制工具
        overlays = [], // 覆盖物
        pointList = [], // 全部随机点
        markerList = [], // 标记点
        selectedData = [], // 已选择数据
        open = false, // 关闭/开启框选
        drawType = 'rectangle' // 绘制类型，rectangle：框选，circle：圆选，polygon：多边形选择
        
var ul = document.getElementById('ul')
var sp = document.getElementById('num')
// 默认图标
var icon = new AMap.Icon({
    size: new AMap.Size(19, 33),    // 图标尺寸
    image: './img/mark_bs.png',  // Icon的图像
    // imageOffset: new AMap.Pixel(0, -10),  // 图像相对展示区域的偏移量
    imageSize: new AMap.Size(19, 33)   // 根据所设置的大小拉伸或压缩图片
});
// 选中图标
var icon2 = new AMap.Icon({
    size: new AMap.Size(19, 33),    // 图标尺寸
    image: './img/mark_rs.png',  // Icon的图像
    imageSize: new AMap.Size(19, 33),   // 根据所设置的大小拉伸或压缩图片
    selected: true
});

3、初始化地图，并随机生成点数据

window.onload = function(){
    map = new AMap.Map('map', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 8
    })
    // 通过AMap.plugin方法按需引入插件
    AMap.plugin(['AMap.Scale'], () => {
        map.addControl(new AMap.Scale())
    })
    // map.setZoomAndCenter(8, [120.142201, 30.320152])  // 设置显示级别及中心
    // map.on('click', onMapClick) // 添加地图点击事件
    map.clearMap() // 清除所有的覆盖物信息
    map.on('complete', function(){ // 地图加载完成
        console.log('地图加载完成')
    })
    mouseTool = new AMap.MouseTool(map)
    addTestData()
}
// 测试数据
function addTestData() {
    for (var i = 0; i < 500; i++) {
        // 随机经纬度
        var lng = Math.random() * 40 + 85
        var lat = Math.random() * 30 + 21
        pointList.push([lng, lat])
        var marker = new AMap.Marker({
            position: new AMap.LngLat(lng, lat),
            icon: icon,
            name: '点' + i
        })
        marker.on('click', function(e){
            var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -33), anchor: 'bottom-center' })
            infoWindow.setContent(e.target.w.name)
            infoWindow.open(map, e.target.w.position)
        })
        markerList.push(marker)
        map.add(marker)
    }
}

4、绘制方法

// 绘制
function draw(){
    mouseTool = new AMap.MouseTool(map) // 重新构造工具，避免多个事件触发
    mouseTool[drawType]({
        fillColor: '#ffffff',
        fillOpacity: 0.5,
        strokeOpacity: 0.5,
        strokeColor: 'blue',
        zIndex: 1000
    })
    mouseTool.on('draw', function(e){
        if(overlays.length){
            map.remove(overlays)
            overlays = []
        }
        overlays.push(e.obj);
        selectedData = []
        var bounds = e.obj.getBounds()
        var path = []
        if (e.obj.CLASS_NAME === 'AMap.Marker') { // 点
            path.push(e.obj.getPosition())
        } else {
            var southWest = bounds.getSouthWest()
            var northEast = bounds.getNorthEast()
            if (southWest.equals(northEast)) {
                return
            }
            path = e.obj.getPath()
        }
        var num = 0
        pointList.forEach((point, i) => {
            const isPointInRing = AMap.GeometryUtil.isPointInRing(point, path) // 判断是否在几何图形内
            var mIcon = markerList[i].getIcon()
            if (isPointInRing) {
                selectedData.push(markerList[i])
                markerList[i].setIcon(icon2)
                num += 1
            } else if(mIcon.w.selected) {
                markerList[i].setIcon(icon)
            }
        })
        console.log(selectedData)
        var lis = ''
        selectedData.forEach(item =>{
            var li = '<li>' + item.w.name + '</li>'
            lis += li
        })
        ul.innerHTML = lis
        sp.innerText = num
    }) 
}

5、关闭，清除覆盖物并重置点颜色

// 关闭，并清除覆盖物
function closeTool(){
    mouseTool.close(true) // 关闭，并清除覆盖物
    clearOverlays()
}
// 清除覆盖物
function clearOverlays(){
    map.remove(overlays)
    markerList.forEach(item =>{
        if(item.getIcon().w.selected){ // 重置点颜色
            item.setIcon(icon)
        }
    })
    overlays = []
    ul.innerHTML = ''
    sp.innerText = 0
}

6、参考文档：高德地图API
7、完整代码/源码地址：https://gitee.com/jias0606/gd_amap_draw