esri-leaflet地图加载（geojson数据绘制边界）

这两天一直琢磨如何在leaflet的地图上加载地图，查看过官方文档后发现可以使用geojson这个方法来加载我们所需要的地图边界（矢量的边界）。

我所使用的数据是国家2000的投影坐标系，要想在leaflet的地理坐标系系的图上展示边界的话，必须要把投影坐标系转换为地理坐标系，既（国家2000----wgs84），方法很简单使用arcgis的坐标转换工具就可以实现，但由于不知道转换的七参数，所以转换后的地图会和谷歌等地图有较大的偏差，因此推荐使用天地图的地图作为地图，偏差会小很多。

流程：坐标系转换（七参数默认）----矢量数据转json----地图使用geojson将数据加载出来

前两步总结：在投影和变换中->创建自定义地理(坐标)变换(2000->wgs84)->要素的投影(使用刚刚的自定义的坐标变换)->要素转json

一、引入头文件

二、加载地图

  var oMap = null;
    var oLayer = [];
    var oPolygon_VilPop = [];



    /**
     * 智图地图内容
     */
    var normalm1 = L.tileLayer.chinaProvider('Geoq.Normal.Map', {
        maxZoom: 18,
        minZoom: 5
    });
    var normalm2 = L.tileLayer.chinaProvider('Geoq.Normal.Color', {
        maxZoom: 18,
        minZoom: 5
    });
    var normalm3 = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
        maxZoom: 18,
        minZoom: 5
    });
    var normalm4 = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
        maxZoom: 18,
        minZoom: 5
    });
    var normalm5 = L.tileLayer.chinaProvider('Geoq.Normal.Warm', {
        maxZoom: 18,
        minZoom: 5
    });
    var normalm6 = L.tileLayer.chinaProvider('Geoq.Normal.Cold', {
        maxZoom: 18,
        minZoom: 5
    });
    /**
     * 天地图内容
     */
    var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
        }),
        normala = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
            maxZoom: 18,
            minZoom: 5
        }),
        imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
            maxZoom: 18,
            minZoom: 5
        }),
        imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
            maxZoom: 18,
            minZoom: 5
        });

    var normal = L.layerGroup([normalm, normala]),
        image = L.layerGroup([imgm, imga]);
    /**
     * 谷歌
     */
    var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
        }),
        satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
            maxZoom: 18,
            minZoom: 5
        });
    /**
     * 高德地图
     */
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
        maxZoom: 18,
        minZoom: 5
    });
    var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
        maxZoom: 18,
        minZoom: 5
    });
    var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
        maxZoom: 18,
        minZoom: 5
    });
    var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);



    var baseLayers = {
        "智图地图": normalm1,
        "智图多彩": normalm2,
        "智图午夜蓝": normalm3,
        "智图灰色": normalm4,
        "智图暖色": normalm5,
        "智图冷色": normalm6,
        "天地图": normal,
        "天地图影像": image,
        "谷歌地图": normalMap,
        "谷歌影像": satelliteMap,
        "高德地图": Gaode,
        "高德影像": Gaodimage,

    }

    var oMap = L.map("mapDiv", {
        center: [31.55, 118.49],
        zoom: 11,
        layers: [image],
        zoomControl: false,
        attributionControl: false,
    })

    L.control.layers(baseLayers, null).addTo(oMap);

三、使用geojson加载地图边界

  var DTmap=[];
    text();
 function text() {

    for (var i in statesData.features ) {
        DTmap[i] = L.geoJSON(statesData.features[i], {
            style: function (feature) {
                return {
                    color: '#FF0000',
                    fillOpacity: 0.2,
                    weight: 3,
                    dashArray: '10'
                };
            }
        }).bindTooltip("
" + statesData.features[i].properties.name + "
" + statesData.features[i].properties.name + "
" ,{
            direction: 'top'
        }).on({
            mouseover: highlight, //鼠标移动上去高亮
            mouseout: resetHighlight, //鼠标移出恢复原样式
            click: zoomTo //点击最大化
        }).addTo(oMap);
    }
    }




   function  highlight(e) {

        var layer = e.target;
        layer.setStyle({
            weight: 6,
            color: '#fff',
            fillOpacity: 0.9,
            dashArray: '0'
        })
    };

  function  resetHighlight(e) {

        var layer = e.target;
        layer.setStyle({
            color: '#FF0000',
            weight: 3,
            fillOpacity: 0.2,
            dashArray: '10'
        })
    };


     function zoomTo(e){
        oMap.fitBounds(e.target.getBounds());
    }

加载的是json的数据，在选中某块边界后会高亮显示，移除后恢复原样

完整源代码我已经上传，有需要的请自行下载，仅供参考：https://download.csdn.net/download/qq_36213352/10614263

欢迎大家来交流讨论!