esri-leaflet地图加载：GeoJSON数据绘制边界

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

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

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

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

一、引入 头文件  

    <script src="../../resources/js/jQuery/jquery-3.3.1.js"></script>    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>    <script src="https://unpkg.com/esri-leaflet@2.2.1/dist/esri-leaflet.js" ></script>    <script src="js/leaflet.ChineseTmsProviders.js"></script>    <script src="../../main/ArcGISAPI/js/DTJson.js"></script>

二、加载地图

  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("<div id='table'><ul><li>" + statesData.features[i].properties.name + "</li><li>" + statesData.features[i].properties.name + "</li><li>" ,{            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

欢迎大家来交流讨论!

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删