實現(xiàn)天地圖矩形選點、圓形選點忠寻、多邊形選點惧浴，并改變選中點的顏色，而且在框選的列表信息勾選數(shù)據(jù)能進一步修改選中的點顏色

1锡溯、效果圖

效果圖

2赶舆、引入天地圖js，如果沒有key請去天地圖開發(fā)平臺申請

<!-- 天地圖 -->
    <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)){ // 判斷點是否在矩形內(nèi)
                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){ // 判斷點是否在圓內(nèi)
                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)  // 判斷點是否在多邊形內(nèi)
            if(isInside){
                this.setDataInfo(item)
            }
        })
    })
},
// 把框選的數(shù)據(jù)加入列表并修改圖標
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叙量、判斷點是否在多邊形內(nèi)（由于前面兩種都有相應的判斷方法倡蝙，唯獨多邊形的沒找到，那就自己寫一個吧）

// 判斷點是否在多邊形內(nèi)
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