tencent-map-support

README.md

@@ -101,13 +101,13 @@ https://gitee.com/bnu_mixly/mixio-linux-x86-dist/blob/darwin/mixio
 16. BAIDU_MAP_AK - string，百度地图客户端应用AK（OFFLINE_MODE=false时可配置），默认为""
 17. BAIDU_MAP_SERVER_AK - string，百度地图服务端应用AK（OFFLINE_MODE=false时可配置），默认为""
 18. TENCENT_MAP_KEY - string, 腾讯地图key（OFFLINE_MODE=false时可配置），默认为""，和百度地图二选一进行配置即可，同时配置时优先启用百度地图
-18. BAIDU_STAT_LINK - string, 百度统计链接，通常以"https://hm.baidu.com/hm.js?"开头
+19. BAIDU_STAT_LINK - string, 百度统计链接，通常以"https://hm.baidu.com/hm.js?"开头
-19. ADMIN_USERNAME - string，管理后台用户名，默认为"admin"
+20. ADMIN_USERNAME - string，管理后台用户名，默认为"admin"
-20. ADMIN_PASSWORD - string，管理后台密码，默认为"public"
+21. ADMIN_PASSWORD - string，管理后台密码，默认为"public"
-21. STORAGE_ENGINE - string，数据库引擎，默认为"sqlite"
+22. STORAGE_ENGINE - string，数据库引擎，默认为"sqlite"
-22. MYSQL_HOST - string，MySQL地址（STORAGE_ENGINE="mysql"时必须配置），默认为"localhost"
+23. MYSQL_HOST - string，MySQL地址（STORAGE_ENGINE="mysql"时必须配置），默认为"localhost"
-23. MYSQL_PORT - int，MySQL地址（STORAGE_ENGINE="mysql"时必须配置），默认为3306
+24. MYSQL_PORT - int，MySQL地址（STORAGE_ENGINE="mysql"时必须配置），默认为3306
-24. MYSQL_USER - string，MySQL用户名（STORAGE_ENGINE="mysql"时必须配置），默认为""
+25. MYSQL_USER - string，MySQL用户名（STORAGE_ENGINE="mysql"时必须配置），默认为""
-25. MYSQL_PASS - string，MySQL密码（STORAGE_ENGINE="mysql"时必须配置），默认为""
+26. MYSQL_PASS - string，MySQL密码（STORAGE_ENGINE="mysql"时必须配置），默认为""
-26. MYSQL_DB - string，MySQL数据库名（STORAGE_ENGINE="mysql"时必须配置），默认为"mixio",
+27. MYSQL_DB - string，MySQL数据库名（STORAGE_ENGINE="mysql"时必须配置），默认为"mixio",
-27. FOOTER - string，显示在首页的备案信息，公网部署时请务必配置此项（支持HTML语言，请注意为双引号添加转义字符\\），默认为""
+28. FOOTER - string，显示在首页的备案信息，公网部署时请务必配置此项（支持HTML语言，请注意为双引号添加转义字符\\），默认为""

ejs/observe.ejs

@@ -24,6 +24,9 @@
     <% if (configs['OFFLINE_MODE']==false) { %>
         <script>var baidu_ak = "<%=configs['BAIDU_MAP_AK']%>"</script>
     <% } %>
+    <% if (configs['OFFLINE_MODE']==false) { %>
+        <script>var tencent_key = "<%=configs['TENCENT_MAP_KEY']%>"</script>
+    <% } %>
     <script src="js/districts.js"></script>
     <script src="js/jsgrid.min.js"></script>
     <script src="js/tools.js"></script>

ejs/projects.ejs

@@ -22,6 +22,9 @@
     <% if (configs['OFFLINE_MODE']==false) { %>
         <script>var baidu_ak = "<%=configs['BAIDU_MAP_AK']%>"</script>
     <% } %>
+    <% if (configs['OFFLINE_MODE']==false) { %>
+        <script>var tencent_key = "<%=configs['TENCENT_MAP_KEY']%>"</script>
+    <% } %>
     <script src="js/districts.js"></script>
     <script src="js/jsgrid.min.js"></script>
     <script src="js/tools.js?v=14"></script>

js/widgets.js

@@ -3762,6 +3762,8 @@ function add_dashboard(user_title, user_topic, user_content, user_style, title_s
 
 function add_map(user_title, user_topic, user_content, user_style, title_style) {
     var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>加载地图引擎...</p></div>")
+    if(baidu_ak!='')
+    {
         $.getScript("//api.map.baidu.com/getscript?type=webgl&v=3.0&ak="+baidu_ak, function() {
             modald.close().remove()
             var isAlive = true
@@ -3823,7 +3825,7 @@ function add_map(user_title, user_topic, user_content, user_style, title_style)
                 if (isAlive && isRunning)
                     if (topic1.split("/")[(isMixly ? 3 : 2)] == topic.text()) {
 
-                    var label = (new Date().getHours() + ":" + (new Date().getMinutes() < 10 ? "0" : "") + new Date().getMinutes() + ":" + (new Date().getSeconds() < 10 ? "0" : "") + new Date().getSeconds())
+                        var label = ((new Date().getHours() < 10 ? "0" : "") + new Date().getHours() + ":" + (new Date().getMinutes() < 10 ? "0" : "") + new Date().getMinutes() + ":" + (new Date().getSeconds() < 10 ? "0" : "") + new Date().getSeconds())
                         if (isJSON(String(message1)) && ("long" in JSON.parse(String(message1))) && ("lat" in JSON.parse(String(message1))) && JSON.parse(String(message1)).clientid) {
                             var jsonMessage = JSON.parse(String(message1))
                             console.log(jsonMessage)
@@ -4098,6 +4100,324 @@ function add_map(user_title, user_topic, user_content, user_style, title_style)
                 }
             })
         },true);
+    }
+    else if(tencent_key!='')
+    {
+        $.getScript("//map.qq.com/api/gljs?v=1.exp&key="+tencent_key, function() {
+            modald.close().remove()
+            var isAlive = true
+            var contents = []
+            var title = $("<h4 class='userTitle'>" + user_title + "</h4>")
+            title.attr("hidden", title_style)
+            contents.push(title)
+            var topicDiv = $("<div class='topicDiv'/>")
+            var topic = $("<span class='index-topic' style='margin:0;color:#858796;'>" + user_topic + "</span>")
+            topicDiv.append($("<i class='fa fa-podcast' style='color:#858796;margin-right:3px'></i>"))
+            topicDiv.append(topic)
+            var randomName = randomString() + "map"
+            var mapDiv = $("<div style='width:calc(100% - 20px);height:calc(100% - 60px)'/>")
+            mapDiv.attr("id", randomName)
+            mapDiv.bind('click', function(event) {
+                event.stopPropagation()
+            })
+            mapDiv.bind('pointerdown', function(event) {
+                event.stopPropagation()
+            })
+            mapDiv.bind('mousedown', function(event) {
+                event.stopPropagation()
+            })
+            mapDiv[0].addEventListener('touchstart', function(event) {
+                event.stopPropagation()
+            }, { passive: false })
+            contents.push(mapDiv)
+            attrs = [
+                ['user-type', 'output_map'],
+                ['user-title', user_title],
+                ['user-topic', user_topic],
+                ['user-content', user_content],
+                ['title-hidden', title_style]
+            ]
+            var itemdiv = add_block(3, 3, contents, attrs)
+            var maxLeft = mapDiv[0].clientWidth
+            var maxTop = mapDiv[0].clientHeight
+            var markers = []
+            var setContent = function() {
+                var tmp = []
+                var markergeos = []
+                var layergeos = []
+                for (marker in markers) {
+                    tmp.push(markers[marker].long)
+                    tmp.push(markers[marker].lat)
+                    tmp.push(markers[marker].time)
+                    tmp.push(markers[marker].message)
+                    tmp.push(markers[marker].clientid)
+                    markergeos.push({
+                        "id": markers[marker].clientid + "marker",
+                        "styleId": "myStyle",
+                        "position": new TMap.LatLng(markers[marker].lat, markers[marker].long)
+                    })
+                    layergeos.push({
+                        "id": markers[marker].clientid + "layer",
+                        "styleId": "label",
+                        "position": new TMap.LatLng(markers[marker].lat, markers[marker].long),
+                        "content": markers[marker].message + " " + markers[marker].time
+                    })
+                }
+                console.log(markergeos)
+                if(markergeos.length == 1){
+                    map.setCenter(new TMap.LatLng(markers[0].lat, markers[0].long))
+                }
+                title.parent().parent().attr('user-content', tmp.join("@#@$@"))
+                markerLayer.setGeometries(markergeos)
+                mapTextLayer.setGeometries(layergeos)
+            }
+            itemdiv.bind(MixIO.actionTags.DATA_MAP_CHANGE, function(event, message) {
+                MixIO.publish(topic.text(), JSON.stringify(message))
+            })
+            itemdiv.bind(MixIO.actionTags.DATA_MAP_CLEAR, function() {
+                clear_on_click()
+            })
+            client.on('message', function(topic1, message1) {
+
+                if (isAlive && isRunning)
+                    if (topic1.split("/")[(isMixly ? 3 : 2)] == topic.text()) {
+                        var label = ((new Date().getHours() < 10 ? "0" : "") + new Date().getHours() + ":" + (new Date().getMinutes() < 10 ? "0" : "") + new Date().getMinutes() + ":" + (new Date().getSeconds() < 10 ? "0" : "") + new Date().getSeconds())
+                        if (isJSON(String(message1)) && ("long" in JSON.parse(String(message1))) && ("lat" in JSON.parse(String(message1))) && JSON.parse(String(message1)).clientid) {
+                            var jsonMessage = JSON.parse(String(message1))
+                            console.log(jsonMessage)
+                            itemdiv.trigger(MixIO.eventTags.DATA_MAP_CHANGED, [jsonMessage.clientid, jsonMessage.long, jsonMessage.lat, jsonMessage.message])
+                            var newOrNot = true
+                            var markerIndex = -1
+                            for (marker in markers) {
+                                if (jsonMessage.clientid == markers[marker].clientid) {
+                                    newOrNot = false
+                                    markerIndex = marker
+                                    break
+                                }
+                            }
+                            if (newOrNot) {
+                                var msgstr = ""
+                                if (typeof jsonMessage.message == "string")
+                                    jsonMessage.message = JSON.parse(jsonMessage.message)
+                                for (msg in jsonMessage.message) {
+                                    msgstr = msgstr + jsonMessage.message[msg].label + ": " + jsonMessage.message[msg].value + " "
+                                }
+                                markers.push({
+                                    "clientid": jsonMessage.clientid,
+                                    "long": jsonMessage.long,
+                                    "lat": jsonMessage.lat,
+                                    "time": label,
+                                    "message": msgstr
+                                })
+                            } else {
+                                markers[markerIndex].time = label
+                                var msgstr = ""
+                                if (typeof jsonMessage.message == "string")
+                                    jsonMessage.message = JSON.parse(jsonMessage.message)
+                                for (msg in jsonMessage.message) {
+                                    msgstr = msgstr + jsonMessage.message[msg].label + ": " + jsonMessage.message[msg].value + " "
+                                }
+                                markers[markerIndex].long = jsonMessage.long
+                                markers[markerIndex].lat = jsonMessage.lat
+                                markers[markerIndex].message = msgstr
+                            }
+                            setContent()
+                        } else {
+                            showtext(JSLang[lang].mapJSON)
+                        }
+                    }
+            })
+            var map = new TMap.Map(document.getElementById(randomName), {
+                center: new TMap.LatLng(39.967, 116.373),
+                zoom: 17,
+                pitch: 43.5,
+                rotation: 45
+            });
+            var markerLayer = new TMap.MultiMarker({
+                map: map,  //指定地图容器
+                styles: {
+                    //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
+                    "myStyle": new TMap.MarkerStyle({ 
+                        "width": 25,  // 点标记样式宽度（像素）
+                        "height": 35, // 点标记样式高度（像素）
+                        "src": 'data:image/png;base64,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',  //图片路径
+                        //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
+                        "anchor": { x: 16, y: 32 }  
+                    }) 
+                }
+            });
+            var mapTextLayer = new TMap.MultiLabel({
+                id: 'mapTextLayer',
+                map: map,
+                styles: {
+                    'label': new TMap.LabelStyle({
+                        'color': '#3777FF', //颜色属性
+                        'strokeColor': '#ffffff',
+                        'size': 14, //文字大小属性
+                        'offset': { x: 0, y: 10 }, //文字偏移属性单位为像素
+                        'angle': 0, //文字旋转属性
+                        'alignment': 'center', //文字水平对齐属性
+                        'verticalAlignment': 'top' //文字垂直对齐属性
+                    })
+                }
+            });
+            var toBeAdded = user_content.split("@#@$@")
+            var addLength = toBeAdded.length / 5
+            for (var tmpi = 0; tmpi <= addLength - 1; tmpi = tmpi + 1) {
+                markers.push({
+                    "long": toBeAdded[tmpi * 5],
+                    "lat": toBeAdded[tmpi * 5 + 1],
+                    "time": toBeAdded[tmpi * 5 + 2],
+                    "message": toBeAdded[tmpi * 5 + 3],
+                    "clientid": toBeAdded[tmpi * 5 + 4]
+                })
+            }
+            setContent()
+
+            var delete_on_click = function() {
+                $("#trashbin").append(mapDiv)
+                title.parent().parent().remove();
+                isAlive = false;
+                if (tbd)
+                    tbd.remove()
+            }
+            var clear_on_click = function() {
+                markers = []
+                setContent()
+            }
+            var edit_on_click = function() {
+                modifyDia.showModal()
+                if (tbd)
+                    tbd.remove()
+            }
+            var editForm = $('<div class="nnt"/>')
+            editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/output_map.svg" style="width:45px;"></div>'))
+            editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
+            var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+            var title_input = $("<input class='form-control form-control-user'  style='text-align:center'/>")
+            title_input_div.append(title_input)
+            editForm.append(title_input_div)
+            editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
+            var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
+            var topic_input = $("<input class='form-control form-control-user'  style='text-align:center'/>")
+            topic_input_div.append(topic_input)
+            editForm.append(topic_input_div)
+            var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
+            var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
+            bottomDiv.append(confirmEdit)
+            confirmEdit.click(function() {
+                if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
+                    var re = /^[a-z0-9]+$/i;
+                    if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
+                        if (true) {
+                            if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= (title_input.val() == title.text() ? 1 : 0)) {
+                                title.parent().parent().attr('user-title', title_input.val())
+                                title.parent().parent().attr('user-topic', topic_input.val())
+                                if (title.parent().parent().attr('user-content') == undefined)
+                                    title.parent().parent().attr('user-content', "")
+                                title.text(title_input.val())
+                                topic.text(topic_input.val())
+                                modifyDia.close()
+                            } else
+                                showtext(JSLang[lang].sameUnit)
+                        } else
+                            showtext("")
+                    else
+                        showtext(JSLang[lang].topicLenIllegal)
+                } else
+                    showtext(JSLang[lang].nameLenIllegal)
+            })
+            var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
+            cancelEdit.click(function() {
+                modifyDia.close()
+            })
+            bottomDiv.append(cancelEdit)
+            editForm.append(bottomDiv)
+            var modifyDia = dialog({
+                content: editForm[0],
+                cancel: false
+            })
+            var showEditBubble = function(event) {
+                if(tbd)
+                    tbd.remove()
+                if (typeof startX != "undefined" && (startX - endX < 5 && endX - startX < 5) && (startY - endY < 5 && endY - startY < 5)) {
+                    var editButton = $('<a class="btn btn-primary btn-circle bbbt"><i class="fa fa-cog"></i></a>')
+                    var clearButton = $('<a class="btn btn-warning btn-circle bbbt"><i class="fa fa-eraser"></i></a>')
+                    var deleteButton = $('<a class="btn btn-danger btn-circle bbbt"><i class="fa fa-trash"></i></a>')
+                    var bubble = $('<div style="text-align:center"/>')
+                    bubble.append(topicDiv)
+                    var d = dialog({
+                        align: 'top',
+                        content: bubble[0],
+                        quickClose: true,
+                        autofocus: false
+                    });
+                    tbd = d;
+                    editButton.click(edit_on_click)
+                    clearButton.click(clear_on_click)
+                    deleteButton.click(delete_on_click)
+                    if (!isRunning)
+                        bubble.append(editButton)
+                    bubble.append(clearButton)
+                    if (!isRunning)
+                        bubble.append(deleteButton)
+                    if (!isRunning)
+                        {
+                        copyButton.attr("user-origin", title.text())
+                        bubble.append(copyButton)
+                        styleButton.attr("user-origin", title.text())
+                        bubble.append(styleButton)
+                        helpButton.attr("user-origin", attrs[0][1])
+                        bubble.append(helpButton)
+                    }
+                    title_input.val(title.text())
+                    topic_input.val(topic.text())
+                    if (!d.open)
+                    {
+                        d.show(itemdiv[0]);
+                        setTimeout(function() {
+                            $(".ui-popup-backdrop").css("pointer-events", "auto")
+                        },100)
+                    }
+                    else
+                        d.close()
+                }
+            }
+            if (window.screen.width > 800)
+            {
+                itemdiv.click(showEditBubble)
+                itemdiv.on('contextmenu', function(event) {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    showEditBubble(event)
+                })
+            }
+            else
+                itemdiv[0].addEventListener('touchend', function(event) {
+                    event.preventDefault()
+                    showEditBubble(event)
+                })
+            itemdiv[0].addEventListener('touchmove', function(e) {
+                e.preventDefault()
+            })
+            if (user_style != undefined)
+                itemdiv.attr('style', user_style)
+            itemdiv.resizable({
+                minWidth: 300,
+                minHeight: 300,
+                onStopResize: function() {
+                    var stdLeft = parseInt(itemdiv.css('left')) - parseInt(itemdiv.css('left')) % 20 + (parseInt(itemdiv.css('left')) % 20 > 10 ? 1 : 0) * 20
+                    var stdTop = parseInt(itemdiv.css('top')) - parseInt(itemdiv.css('top')) % 20 + (parseInt(itemdiv.css('top')) % 20 > 10 ? 1 : 0) * 20
+                    itemdiv.css('left', stdLeft)
+                    itemdiv.css('top', stdTop)
+                    var stdWidth = parseInt(itemdiv.css('width')) - parseInt(itemdiv.css('width')) % 20 + (parseInt(itemdiv.css('width')) % 20 > 10 ? 1 : 0) * 20
+                    var stdHeight = parseInt(itemdiv.css('height')) - parseInt(itemdiv.css('height')) % 20 + (parseInt(itemdiv.css('height')) % 20 > 10 ? 1 : 0) * 20
+                    itemdiv.css('width', stdWidth)
+                    itemdiv.css('height', stdHeight)
+                }
+            })
+        },true);
+    }
 }
 
 function create_a_map_bubble(messageBody, time, point) {