自定义组件集成到布局器

xxxxxxxxxx
其实我们的布局器集成的各类UI就是第三方组件，您可能忽略了这一点
下面我们以二维地图leaflet为例进行讲解
大部分人集成后发现布局器无法初始化出来，于是觉得是布局器的问题，

xxxxxxxxxx
PS:其实布局器仅仅是把您的组件引入，再执行js代为渲染，组件不出来大部分是您的js写法不对造成，这种情况很好解决，
您自己在本地写一个示例，新建一个html,引入资源，放入html,初始化脚本看看是否能出来，如果这个没问题，再考虑往布局器集成。
如果还不行，请联系管理员QQ:799374340（务必完成ps的内容后再联系管理员）

一个.vue模块化开发同时又能打包成js集成到magicalcoder的示例（供vue开发的小伙伴参考）

xxxxxxxxxx
https://gitee.com/magicalcoder/vue-magicalcoder-demo

第一步 先把资源放入布局器的js\lib\leaflet目里下

第二步 引入第三方组件的leaflet.js leaflet.css到布局器环境中

xxxxxxxxxx
首先选择您采用的ui，比如是element 那么我们打开iframe-alement-2.10.1.html
​
请参考以下引入放置的位置 在iframe-ui-before.js之前引入
​
<!--ajax库-->
<script type="text/javascript" src="assets/drag/js/lib/vue/axios.js"></script>
<!-- 二维地图 不需要可以删除 非必须-->
<link href="assets/drag/js/lib/leaflet/leaflet.css" rel="stylesheet">
<script type="text/javascript" src="assets/drag/js/lib/leaflet/leaflet.js"></script>
<!-- iframe-页面初始化js -->
<script type="text/javascript" src="assets/drag/js/user/ui/iframe-ui-before.js"></script>

第三步 剩余步骤 参考 自定义组件和属性 即可完成

1 添加左侧地图

xxxxxxxxxx
找到assets/js/user/ui/element/2.10.1/constant.js
在this.components变量里随便找一处，放入一下配置，这样左侧就出现了二维地图
​
{
    name:"二维地图",
    icon:"ri-bar-chart-grouped-line",
    html:"<div class='mc-leaflet-map' style='height:400px;'></div>"
}
​
此时我们可以打开布局器预览下：实际会发现 左侧可拓展区域增加了二维地图，但是拖拽到工作区发现并没有出现地图
​
这是怎么回事呢？
​
原因是：我们还需要对集成的二维地图进行js初始化

2 初始化地图

xxxxxxxxxx
布局器每次渲染工作区时，会执行element\2.10.1\iframe-ui.js的render方法；而我们就可以在render方法里加入我们的地图初始化逻辑 关于这个初始化脚本写在哪 
有很多种方法：
方法1：放入constant.js的this.defaultJavascript内，
方法2：直接写iframe-ui.js内的rebder方法内
方法3：自己建一个新js文件，在iframe-element-2.10.1.html中引入，然后在render方法后面加入一段调用逻辑即可（调用逻辑也可以放constant.js的this.defaultJavascript）
​
本示例我们采用比较优雅的写法：放入ui/magicalcoder/1.1.0/magicalcoder.js内 这里是我们为echarts组件初始化编写的大量初始化脚本
this.defaultJavascript下的new McECharts().render()就是初始化入口 所以我们不用再render里注入入口了
​
请参考代码：
​
McECharts.prototype.render = function(){
    ...
    this.leaflet();
}
​
/*二维地图*/
McECharts.prototype.leaflet = function(){
var _t = this;
var doms = document.getElementsByClassName("mc-leaflet-map");
for(var i=0;i<doms.length;i++){
    var dom = doms[i];
    var id = dom.getAttribute("id");
    if(!id){
        continue;
    }
    //第一步 让用户把基础的配置都通过布局器做好了
    var userConfigOption = this.iteratorDomAttrToOption(dom);
     //到 mapbox 官网注册并创建下面的access token都是免费的，不过有5w次的浏览限制
    var url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    //初始化 地图
    var leafletMap = L.map(id).setView([41, 123], 5);
    //将图层加载到地图上，并设置最大的聚焦还有map样式
    L.tileLayer(url, {
            maxZoom: 18,
            id: 'mapbox.streets'
    }).addTo(leafletMap);
    //增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
    L.marker([41, 123]).addTo(leafletMap)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
    //增加一个圈，设置圆心、半径、样式
    L.circle([41, 123], 500, {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5
    }).addTo(leafletMap).bindPopup("I am a circle.");
    //增加多边形
    L.polygon([
            [41, 123],
            [39, 121],
            [41, 126]
    ]).addTo(leafletMap).bindPopup("I am a polygon.");
    //为点击地图的事件 增加popup
    var popup = L.popup();
    function onMapClick(e) {
            popup
                    .setLatLng(e.latlng)
                    .setContent("You clicked the map at " + e.latlng.toString())
                    .openOn(leafletMap);
    }
    leafletMap.on('click', onMapClick);
}

}

3 第三步 为二维地图定制一些布局器特性

xxxxxxxxxx
找到constant.js的this.tagClassMapping 追加下面的一条配置：
​
        "mc-leaflet-map":{name:"二维地图",dragInto:false,duplicate:true,duplicateAttr:["id"],assistDuplicate:true, copy:true,      paste:false,    canDelete:true,assistDelete:true,afterDragDrop:{refresh:true},afterResize:{refresh:true},tmpWrapTag:"div",tmpWrapShade:true},

xxxxxxxxxx
注意这里用了duplicateAttr:["id"] 就可以保证自动生成一个唯一id
tmpWrapTag：tmpWrapShade 是因为地图本身有拖拽 布局器也有拖拽 这就冲突了 所以我们遮盖地图本身的拖拽

4 让预览也正常

xxxxxxxxxx
找到constant.js的 追加leaflet.css leaflet.js到以下配置 这样单独预览页就能看到了：
    view:{
        //预览地址
        url:envConstantSettings.view.url,
        //layui弹窗配置 area[0]宽如果不写则自动根据当前选中的设备模式宽 area[1]高
        layerExtra:envConstantSettings.view.layerExtra,
        //预览页<head></head>内的样式地址
        link:["assets/drag/ui/element/2.10.1/element.css","assets/drag/ui/magicalcoder/1.1.0/magicalcoder.css","assets/drag/js/lib/leaflet/leaflet.css"],
        //预览页<head></head>内的脚本地址
        headJs:[],
        //预览页<body></body>内的脚本地址
        bodyJs:[
            "assets/drag/js/lib/echarts/4.6.0/echarts.min.js",
            "assets/drag/js/lib/echarts/datatool.min.js",
            "assets/drag/ui/magicalcoder/1.1.0/magicalcoder.js",
            "assets/drag/js/lib/vue/vue.js",
            "assets/drag/ui/element/2.10.1/element.js",
            "assets/drag/js/lib/vue/axios.js",
            "assets/drag/js/lib/leaflet/leaflet.js",
        ]
    },

结语：把布局器理解成一个比较高级的浏览器（可以拖拽，配置，渲染），您只要把自己封装的组件引入布局器加载的正确位置，那就可以成功嵌入了。