使用高德地图加载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;