动态标绘功能

dist/leaflet/iclient9-plot-leaflet.css

@@ -0,0 +1,38 @@
+/*!
+ * 
+ *          iclient9-leaflet.(http://iclient.supermap.io)
+ *          Copyright© 2000 - 2018 SuperMap Software Co.Ltd
+ *          license: Apache-2.0
+ *          version: v9.1.0-alpha
+ *         
+ */
+
+.leaflet-supermap-plot-control-icon-path {
+    background-image: url(../images/plot/control.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.leaflet-supermap-plot-scale-icon-path {
+    background-image: url(../images/plot/scale.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.leaflet-supermap-plot-rotate-icon-path {
+    background-image: url(../images/plot/rotate.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.leaflet-supermap-plot-locked-icon-path {
+    background-image: url(../images/plot/locked.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.leaflet-supermap-plot-avoid-icon-path {
+    background-image: url(../images/plot/avoid.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}

dist/leaflet/include-leaflet.js

@@ -77,7 +77,7 @@
             inputScript("http://iclient.supermap.io/web/libs/deck.gl/5.1.3/deck.gl.js");
         }
         if (!inArray(excludes, 'iclient9-leaflet')) {
-            if (supportES6()) {
+            if (supportES6() && !inArray(includes, 'iclient9-plot-leaflet')) {
                 inputScript("../../dist/leaflet/iclient9-leaflet-es6.js");
             } else {
                 inputScript("../../dist/leaflet/iclient9-leaflet.js");
@@ -86,6 +86,10 @@
         if (inArray(includes, 'iclient9-leaflet-css')) {
             inputCSS("../../dist/leaflet/iclient9-leaflet.min.css");
         }
+        if (inArray(includes, 'iclient9-plot-leaflet')) {
+            inputCSS("../../dist/leaflet/iclient9-plot-leaflet.css");
+            inputScript("../../dist/leaflet/iclient9-plot-leaflet.min.js");
+        }
         if (inArray(includes, 'leaflet.heat')) {
             inputScript("http://cdn.bootcss.com/leaflet.heat/0.2.0/leaflet-heat.js");
         }

examples/js/include-web.js

@@ -154,16 +154,24 @@
             inputCSS("https://cdn.bootcss.com/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.css");
             inputScript("https://cdn.bootcss.com/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js");
         }
+        if (inArray(includes, 'plottingPanel')) {
+            inputScript("http://iclient.supermap.io/libs/iclient8c/examples/js/plottingPanel/zTree/jquery.ztree.core.js");
+            inputCSS("http://iclient.supermap.io/libs/iclient8c/examples/js/plottingPanel/zTree/css/zTreeStyle.css");
+            inputScript("http://iclient.supermap.io/libs/iclient8c/examples/js/plottingPanel/jquery-easyui-1.4.4/jquery.easyui.min.js");
+            inputCSS("http://iclient.supermap.io/libs/iclient8c/examples/js/plottingPanel/jquery-easyui-1.4.4/css/easyui.css");
+            inputScript("http://iclient.supermap.io/libs/iclient8c/examples/js/plottingPanel/colorpicker/js/colorpicker.js");
+            inputCSS("http://iclient.supermap.io/libs/iclient8c/examples/js/plottingPanel/colorpicker/css/colorpicker.css");
+        }
     }
 
     function datGuiI18N() {
         document.writeln("<script>function registerEventListener(evt,fn){" +
-            "if(window.attachEvent){window.attachEvent('on'+evt,fn);}" +
-            "else{window.addEventListener(evt,fn,false);}" +
-            "}</script>");
+        "if(window.attachEvent){window.attachEvent('on'+evt,fn);}" +
+        "else{window.addEventListener(evt,fn,false);}" +
+        "}</script>");
         document.writeln("<script>registerEventListener('load',function() { " +
-            "dat.GUI.TEXT_CLOSED=resources.text_close;dat.GUI.TEXT_OPEN=resources.text_open;" +
-            "})</script>")
+        "dat.GUI.TEXT_CLOSED=resources.text_close;dat.GUI.TEXT_OPEN=resources.text_open;" +
+        "})</script>")
     }
 
     load();

examples/js/plottingPanel/PlotPanel.js

@@ -0,0 +1,247 @@
+L.supermap.plotting.initPlotPanel = function(div, serverUrl, drawControl){
+    var plotPanel = document.getElementById(div);
+
+    var treeNodeStyle = document.createElement("div");
+    treeNodeStyle.style.height = '50%';
+    treeNodeStyle.style.width = '100%';
+    treeNodeStyle.style.border = '1px solid #617775';
+    treeNodeStyle.style.overflow ='scroll';
+
+    var treeNode = document.createElement("div");
+    treeNode.id = "tree";
+    treeNode.className = "ztree";
+
+    var iconNodeStyle = document.createElement("div");
+    iconNodeStyle.style.height = '50%';
+    iconNodeStyle.style.width = '100%';
+
+    var iconNode = document.createElement("div");
+    iconNode.id = "icon";
+    iconNode.style.height = '100%';
+    iconNode.style.width = '100%';
+    iconNode.style.border = '1px solid #617775';
+    iconNode.style.overflow ='scroll';
+
+    treeNodeStyle.appendChild(treeNode);
+    iconNodeStyle.appendChild(iconNode);
+
+    plotPanel.appendChild(treeNodeStyle);
+    plotPanel.appendChild(iconNodeStyle);
+
+    function beforeClickTreeNode(treeId, treeNode){
+        var tree = $.fn.zTree.getZTreeObj(treeId);
+        if (treeNode.isParent) {
+            tree.expandNode(treeNode);
+            return false;
+        } else {
+            var iconNode = document.getElementById("icon");
+            iconNode.innerHTML = "";
+            createDrawNodes(treeNode, iconNode, drawControl, serverUrl);
+        }
+    }
+
+    var setting = {
+        view: {
+            dblClickExpand: false,
+            showLine: true,
+            selectedMulti: false
+        },
+        data: {
+            simpleData: {
+                enable:true,
+                idKey: "id",
+                pIdKey: "pId",
+                rootPId: 0
+            }
+        },
+        callback: {
+            beforeClick: beforeClickTreeNode
+        }
+    };
+
+    var symbolLibManager = L.supermap.plotting.symbolLibManager(serverUrl);
+    if(symbolLibManager.isInitializeOK()){
+        var symbolTreeData = analysisSymbolTree(symbolLibManager);
+
+        $.fn.zTree.init($("#tree"), setting, symbolTreeData);
+    } else {
+        symbolLibManager.on(SuperMap.Plot.Event.initializecompleted, function(result){
+            if(result.libIDs.length !== 0){
+                var symbolTreeData = analysisSymbolTree(symbolLibManager);
+                $.fn.zTree.init($("#tree"), setting, symbolTreeData);
+            }});
+        symbolLibManager.initializeAsync();
+    }
+}
+
+function analysisSymbolTree(symbolLibManager) {
+    var treeData = [];
+    var idIndex = addBasicCellTreeNodes(treeData);
+    var idIndex = addRouteTreeNodes(treeData);
+
+    for(var i = 0; i < symbolLibManager.getSymbolLibNumber(); i++){
+        var symbolLib = symbolLibManager.getSymbolLibByIndex(i);
+        var rootSymbolInfo = symbolLib.getRootSymbolInfo();
+        var rootSymbolIconUrl = symbolLib.getRootSymbolIconUrl();
+
+        if(rootSymbolInfo.symbolNodeType === "SYMBOL_GROUP"){
+            var rootNode = new Object();
+            rootNode.id = idIndex+i;
+            rootNode.pId = 0;
+            rootNode.name = rootSymbolInfo.symbolName;
+            rootNode.fullName = rootSymbolInfo.symbolName +"/";
+            treeData.push(rootNode);
+
+            idIndex = innerAnalysisSymbolTree(rootSymbolInfo.childNodes, treeData, rootNode, rootSymbolIconUrl);
+        }
+
+    }
+
+    return treeData;
+}
+
+function createDrawNodes(treeNode, iconNode, drawControl, serverUrl){
+    var drawNodeClick = function(){
+        if(drawControl !== null){
+            drawControl.handler.libID = this.libID;
+            drawControl.handler.code = this.symbolCode;
+            drawControl.handler.serverUrl = this.serverUrl;
+
+            drawControl.handler.disable();
+            drawControl.handler.enable();
+        }
+    }
+
+    var me = this;
+    var drawData = treeNode.drawData;
+
+    var table = document.createElement("table");
+    table.style.height = "100%";
+    table.style.width = "100%";
+    var i = 0;
+    var rowLength = (drawData.length%3 === 0) ? drawData.length/3 : drawData.length/3+1;
+    for(var j = 0; j < rowLength; j++){
+        var tr = document.createElement("tr");
+        for(var k = 0; k < 3; k++){
+            if(drawData[i]){
+                //存储菜单信息
+                var td = document.createElement("td");
+                var drawNode = document.createElement("div");
+                drawNode.onclick = drawNodeClick;
+                drawNode.style.textAlign = "center";
+                drawNode.id = drawData[i].libID+ ""+ drawData[i].symbolCode;
+                drawNode.libID = drawData[i].libID;
+                drawNode.symbolCode = drawData[i].symbolCode;
+                drawNode.serverUrl = serverUrl;
+                //图片
+                var img = document.createElement("img");
+                img.src = drawData[i].icon;
+                //文本
+                var text = document.createElement("div");
+                text.innerHTML =  drawData[i].symbolName;
+
+                drawNode.appendChild(img);
+                drawNode.appendChild(text);
+                td.appendChild(drawNode);
+
+                tr.appendChild(td);
+            }
+            i++;
+        }
+        table.appendChild(tr);
+    }
+
+    iconNode.appendChild(table);
+}
+
+function addBasicCellTreeNodes(treeData){
+    var cellRootNode = new Object();
+    cellRootNode.id = 1;
+    cellRootNode.pId = 0;
+    cellRootNode.name = "基本标号";
+    cellRootNode.fullName = "BasicCell" +"/";
+    cellRootNode.drawData = [];
+    treeData.push(cellRootNode);
+
+    var symbolCode = [24, 28, 29, 31, 34, 410, 32, 590, 360, 390, 400, 350, 26, 370, 380, 44, 48, 320
+        , 1019, 1022,1024,321,1023,1025
+        ,1013, 1014, 1016, 1017,1026
+        ,1001, 1003, 1004];
+    var symbolName = ["折线", "平行四边形", "圆", "椭圆", "注记", "正多边形", "多边形", "贝赛尔曲线", "闭合贝赛尔曲线"
+        , "集结地", "大括号", "梯形", "矩形", "弓形", "扇形", "弧线", "平行线", "注记指示框"
+        , "同心圆", "组合圆","标注框","多角标注框","自由线",  "节点链"
+        , "跑道形", "八字形", "箭头线", "沿线注记","线型标注"
+        , "对象间连线", "多边形区域","扇形区域"];
+    var cellId = cellRootNode.id + 1;
+    for(var i = 0; i < symbolCode.length; i++){
+        var drawCellNode = {
+            id: cellId++,
+            pId: 0,
+            icon:"../img/plottingPanel/" + cellRootNode.fullName + symbolCode[i] + ".png",
+            symbolCode: symbolCode[i],
+            libID: 0,
+            symbolName: symbolName[i]
+        };
+        cellRootNode.drawData.push(drawCellNode);
+    }
+
+    return cellId;
+}
+
+function addRouteTreeNodes(treeData){
+    var cellRootNode = new Object();
+    cellRootNode.id = 1;
+    cellRootNode.pId = 0;
+    cellRootNode.name = "航线对象";
+    cellRootNode.drawData = [];
+    treeData.push(cellRootNode);
+
+    var symbolCode = [1005,1006,1007];
+    var symbolName = ["航线1","航线2","航线3"];
+    var cellId = cellRootNode.id + 1;
+    for(var i = 0; i < symbolCode.length; i++){
+        var drawCellNode = {
+            id: cellId++,
+            pId: 0,
+            icon:"../img/BasicCell/RouteIcon/" + symbolCode[i] + ".png",
+            symbolCode: symbolCode[i],
+            libID: 0,
+            symbolName: symbolName[i]
+        };
+        cellRootNode.drawData.push(drawCellNode);
+    }
+
+    return cellId;
+}
+
+function innerAnalysisSymbolTree(childSymbolInfos, treeData, parentNode, rootSymbolIconUrl){
+    var drawData = [];
+    var treeNodeId = parentNode.id+1;
+    for(var i = 0; i < childSymbolInfos.length; i++){
+        if(childSymbolInfos[i].symbolNodeType === "SYMBOL_GROUP"){
+            var treeNode = new Object();
+            treeNode.id = treeNodeId++;
+            treeNode.pId = parentNode.id;
+            treeNode.name = childSymbolInfos[i].symbolName;
+            treeNode.fullName = parentNode.fullName + childSymbolInfos[i].symbolName+"/";
+            treeData.push(treeNode);
+
+            treeNodeId = innerAnalysisSymbolTree(childSymbolInfos[i].childNodes, treeData, treeNode, rootSymbolIconUrl);
+        } else if(childSymbolInfos[i].symbolNodeType === "SYMBOL_NODE"){
+            var drawNode = new Object();
+            drawNode.id = treeNodeId++;
+            drawNode.pId = parentNode.id;
+            drawNode.icon = rootSymbolIconUrl + parentNode.fullName + childSymbolInfos[i].symbolCode + ".png";
+            drawNode.symbolCode = childSymbolInfos[i].symbolCode;
+            drawNode.libID = childSymbolInfos[i].libID;
+            drawNode.symbolName = childSymbolInfos[i].symbolName + "_" + childSymbolInfos[i].symbolCode;
+            drawData.push(drawNode);
+        }
+    }
+
+    if(drawData.length !== 0){
+        parentNode.drawData = drawData;
+    }
+
+    return treeNodeId;
+}

examples/js/plottingPanel/PlottingPanel.Include.js

@@ -0,0 +1,52 @@
+(function () {
+    var r = new RegExp("(^|(.*?\\/))(PlottingPanel.Include\.js)(\\?|$)"),
+        s = document.getElementsByTagName('script'), targetScript;
+    for (var i = 0; i < s.length; i++) {
+        var src = s[i].getAttribute('src');
+        if (src) {
+            var m = src.match(r);
+            if (m) {
+                targetScript = s[i];
+                break;
+            }
+        }
+    }
+
+    function inputScript(url) {
+        var script = '<script type="text/javascript" src="' + url + '"><' + '/script>';
+        document.writeln(script);
+    }
+
+    function inputCSS(url) {
+        var css = '<link rel="stylesheet" href="' + url + '">';
+        document.writeln(css);
+    }
+
+    function inArray(arr, item) {
+        for (i in arr) {
+            if (arr[i] == item) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    //加载类库资源文件
+    function load() {
+        var includes = (targetScript.getAttribute('include') || "").split(",");
+        var excludes = (targetScript.getAttribute('exclude') || "").split(",");
+
+        if (inArray(includes, 'PlotPanel')) {
+            inputScript("../js/plottingPanel/PlotPanel.js");
+        }
+        if (inArray(includes, 'StylePanel')) {
+            inputScript("../js/plottingPanel/customEditor/ColorpickerEditor.js");
+            inputScript("../js/plottingPanel/StylePanel.js");
+        }
+        if (inArray(includes, 'SMLInfosPanel')) {
+            inputScript("../js/plottingPanel/SMLInfosPanel.js");
+        }
+    }
+
+    load();
+})();