使用高德地圖加載kml文件

依賴插件：

togeojson: 
    倉庫地址： https://github.com/mapbox/togeojson

jquery：
    倉庫地址：自家百度~
複製代碼

下面代碼將使用react來寫

具體實現

class page extends Component{
        
    componentDidMount() {
        this.initMap();
    }
    
    initMap() {
        this.insetUrl();
        this.createMap();
    }
    
    async insetUrl() {
        //異步加載地圖
        const { mapSrc } = this.state;
        var url = `${mapSrc}&callback=onLoad`;
        var jsapi = document.createElement('script');
        jsapi.charset = 'utf-8';
        jsapi.src = url;
        document.body.appendChild(jsapi);
    }
    
    //用來加載kml文件
    loadKml() { 
        $.ajax("kml地址").done((xml) => { 
            
            //請求完後使用toGeoJSON解析爲geoJson
            let data = window.toGeoJSON.kml(xml);
            
            //而後去實際的繪製
            //其實這塊高德地圖也提供了一個方法能夠直接加載geoJson可是數據量一大就卡死了~~~~
            this.drawKml(data);
        });
    }
    
    //繪製kml數據
    drawKml(){
        /*
            在這裏就是循環下數據然該繪製線條的繪製線條...，
            須要注意的是有時候須要把多邊形的每條邊繪製爲線條，這時候直接邊太多就會很慢，由於有的邊可能只有兩個座標點也可能只有一個，而後每次還得調用高德地圖的座標轉換（可是能夠批量轉換）。這樣兩個座標轉換一次的話會大大增長渲染總時間。
            我目前使用的方法是先把<=兩個座標點的線段放到一個數組裏，等大於兩個點的線段渲染完成後再去渲染兩個座標點的數據，這樣能跟快的吧大致數據出來。
            ps:要是有哪位大佬有更好的方法，跪求在下方告訴本屌絲。
            
        */
    }
    
    //用來將google的經緯度轉爲高德地圖用的經緯度
    //按照高德convertFrom方法傳入參數
    convertFrom(coordinates,type = "gps") {
        return new Promise((resolve) => {
            window.AMap.convertFrom(coordinates,type,(status,result) => {
                if (result.info === 'ok') {
                    let path2s = result.locations;
                    resolve(path2s)
                } else {
                    resolve([])
                    console.error('線條解析出錯',result)
                }
            });
        })
    }
    
    render() { 
        return (
            <div className={s.root}> 
                <div className={s.container} id="qnn-map-container"></div>
            </div>
        );
    }
}

export default page;
複製代碼