实现天地图矩形选点、圆形选点、多边形选点，并改变选中点的颜色，而且在框选的列表信息勾选数据能进一步修改选中的点颜色

1、效果图

效果图

2、引入天地图js，如果没有key请去天地图开发平台申请

<!-- 天地图 -->
    <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>

3、初始化地图

initMap() {
    if(!this.map){
        const map = new T.Map('map', {
            attributionControl: false,
            inertia: false
        })
        window.map = map
        this.map = map
        this.initDrawTool()
    }
    this.map.centerAndZoom(new T.LngLat(120.651860, 27.781680), 6)
    this.map.enableDrag()
}

3、初始化绘制工具

initDrawTool() {
    // 矩形选择工具
    this.rectTool = new T.RectangleTool(
        this.map,
        { color: "blue", weight: 2, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5}
    )
    this.rectTool.on('draw', (e) => {
        this.draw = false
        this.resetData()
        this.selectMarkers = []
        this.markerList.forEach(item =>{
            if(e.currentBounds.contains(item.or)){ // 判断点是否在矩形内
                this.setDataInfo(item)
            }else if(item.getIcon().options.id){
                if(item.getIcon().options.id){
                    item.setIcon(this.defaultIcon)
                }
            }
        })
    })
    // 圆形选择工具
    this.circleTool = new T.CircleTool(
        this.map,
        { color: "blue", weight: 2, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5}
    )
    this.circleTool.on('drawend', (e) => {
        this.draw = false
        this.resetData()
        this.selectMarkers = []
        this.markerList.forEach(item =>{
            if(e.currentCenter.distanceTo(item.or) <= e.currentRadius){ // 判断点是否在圆内
                this.setDataInfo(item)
            }
        })
    })
    const config = {
        showLabel: false,
        color: "blue", weight: 2, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
    }
    // 多边形选择工具
    this.polygonTool = new T.PolygonTool(this.map, config)
    this.polygonTool.on('draw', (e) => {
        this.draw = false
        this.resetData()
        this.selectMarkers = []
        this.markerList.forEach(item =>{
            const isInside = this.insidePolygon(e.currentLnglats, item.or)  // 判断点是否在多边形内
            if(isInside){
                this.setDataInfo(item)
            }
        })
    })
},
// 把框选的数据加入列表并修改图标
setDataInfo(item){
    const obj = {
        ...item.options,
        _checked: false
    }
    this.tableData.push(obj)
    // 选中修改图标
    const icon = new T.Icon({
        iconUrl: require('./img/marker_blue.svg'),
        iconSize: new T.Point(30, 46),
        iconAnchor: new T.Point(14, 41),
        id: item.options.id
    })
    item.setIcon(icon)
    this.selectMarkers.push(item)
}

4、判断点是否在多边形内（由于前面两种都有相应的判断方法，唯独多边形的没找到，那就自己写一个吧）

// 判断点是否在多边形内
insidePolygon(posArray, point){  
    let x = point.lng, y = point.lat
    let inside = false
    for (let i = 0, j = posArray.length - 1; i < posArray.length; j = i++) {  
        let xi = posArray[i].lng, yi = posArray[i].lat
        let xj = posArray[j].lng, yj = posArray[j].lat
        let intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi)
        if (intersect) inside = !inside
    }  
    return inside
}

5、列表勾选修改选中点颜色方法

// 列表勾选
onSelectChange (selection) {
    this.selectedData = selection
    this.selectMarkers.forEach(mItem =>{
        let id = mItem.getIcon().options.id
        let isSelect = false
        selection.forEach(item =>{
            if(id === item.id){
                isSelect = true
            }
        })
        const icon = new T.Icon({
            iconUrl: require('./img/marker_blue.svg'),
            iconSize: new T.Point(30, 46),
            iconAnchor: new T.Point(14, 41),
            id: id
        })
        if(isSelect){
            let iconUrl = require('./img/marker_red.svg')
            icon.setIconUrl(iconUrl)
        }
        mItem.setIcon(icon)
    })
}

6、参考文档
1. 天地图api

7、完整代码
源码地址：https://gitee.com/jias0606/tianditu_draw