这些年写过的无厘头代码（三）Skyline中js定制自己的等高线工具

最新推荐文章于 2024-02-03 18:04:36 发布

wangvanloon

最新推荐文章于 2024-02-03 18:04:36 发布

阅读量801

点赞数

分类专栏： GIS TerraExplorer Pro 文章标签：算法经验分享

本文链接：https://blog.csdn.net/wangvanloon/article/details/121490594

版权

GIS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

TerraExplorer Pro

2 篇文章 0 订阅

订阅专栏

TerraExplorer Pro中提供了一个CountourMap工具，用于在三维场景中绘制等高线，

同时也提供了API 接口开放了这个工具，使用 Command.Execute(code,type) 即可开发调用。

但这中调用在开发后响应中总会使用TE中自带的属性界面，在项目应用中不够协调。因此本人自定义了一个页面，调用创建等高线接口，简化了等高线绘制工具。

主要用到的方法和事件就是鼠标移动绘制（DrawRectangleOnFrame）、创建等高线对象（CreateContourMap）关键方法如下：

第一步：注册事件

   //鼠标左按下事件，开始绘制
   sgworld.AttachEvent("OnLButtonDown", countermap_OnLButtonDown);
   
   //绘制结束，右键鼠标抬起控制结束
   sgworld.AttachEvent("OnRButtonUp", countermap_OnRButtonUp);
   
   //鼠标在场景中移动
   sgworld.AttachEvent("OnFrame", DrawRectangleOnFrame);

第二步：实现方法

   //在鼠标按下时，就创建一个等高线对象，暂且当作一个很小的polygon

        function countermap_OnLButtonDown(Flags, X, Y) {
            if (isEditing && CursorCoord == null) {
                CursorCoord = sgworld.Window.PixelToWorld(X, Y);
                var lcolor = sgworld.Creator.CreateColor(R, G, B, 200);
                lcolor.SetAlpha(0.8);
                var p = CursorCoord.Position;
                counterMap = sgworld.Analysis.CreateContourMap(p.X, p.Y, p.X, p.Y, 0, "", itemId, "cc");
                counterMap.ContourLinesColor = lcolor;
                counterMap.ContourLinesInterval = contourInterval;
                counterMap.CoverageArea = 0;
            }
            else
                EndEdit();
        }

// 鼠标移动，改变等高线对象polygon的右下角坐标与鼠标坐标一致，看上去就像是在绘制多边形

        function DrawRectangleOnFrame(Flags, X, Y) {
            if (isEditing == true && counterMap != null) {
                var mi = sgworld.Window.GetMouseInfo();
                var p = sgworld.Window.PixelToWorld(mi.X, mi.Y);
                counterMap.Right = p.Position.X;
                counterMap.Bottom = p.Position.Y;
            }
        }

//鼠标右键抬起，结束绘制等高线。
  
        function countermap_OnRButtonUp(Flags, X, Y) {
            EndEdit();
            isEditing = false; 
            sgworld.DetachEvent("OnLButtonDown", countermap_OnLButtonDown);
            sgworld.DetachEvent("OnFrame", DrawRectangleOnFrame);
            sgworld.Window.SetInputMode(0);
            sgworld.DetachEvent("OnRButtonUp", countermap_OnRButtonUp);
            return true;
        }

工具完整的html页面使用easyui做个简单样式，可放在工具框中直接调用

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8; IE=EmulateIE9" />
    <meta name='renderer' content='ie-stand' />
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../../../js/easyui/themes/gray/easyui.css" />
    <link rel="stylesheet" href="../../../js/easyui/themes/icon.css" />
    <link rel="stylesheet" href="../../../js/easyui/themes/iconex.css" />
    <link rel="stylesheet" href="../../../js/easyui/themes/extend.css" />
    <script type="text/javascript" src="../../../js/easyui/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../js/json2.js"></script>
    <script type="text/javascript" src="../../../js/Guid.js"></script>
    <script src="../../../js/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body style="background-color:#535353">
    <div class="easyui-panel" title="设置等高线参数" data-options="footer:'#footer'" style="width:100%;max-width:400px;padding:10px;">
        <div style="margin:10px" title="Gets and sets the elevation spacing between the contour lines. The base for the contour lines is at zero elevation above the terrain database vertical datum base ellipsoid">
            等间距离：<input class="easyui-textbox" id="cinterval"
                        value="10" data-options="prompt:'输入间距，单位米'" style="width:70%;">(m)
        </div>
        <div style="margin:10px" title="Representing the color of the contour lines.">
            线颜色值：<input class="easyui-textbox" id="cR" data-options="prompt:'RGB'" value="240" style="width:50px;margin-right:5px;">(R)
            <input class="easyui-textbox" id="cG" data-options="prompt:'RGB'" value="40" style="width:50px;margin-right:5px;">(G)
            <input class="easyui-textbox" id="cB" data-options="prompt:'RGB'" value="40" style="width:50px;">(B)
        </div>
        <!--<div style="margin:20px" title="Representing the color of the contour lines.">
            显示样式：<select class="easyui-combobox"
                         data-options="prompt:'RGB',panelHeight:'auto',value:'2'" style="width:70%;">
                <option value="-1">STYLE_DEFAULT</option>
                <option value="0">STYLE_LINES </option>
                <option value="1">STYLE_COLORS</option>
                <option value="2">STYLE_LINES_AND_COLORS </option>
            </select>
        </div>
        <div style="margin:20px" title="Set the opacity value of the contour map.">
            透明度值：<input class="easyui-textbox" value="50" data-options="prompt:'RGB'" style="width:70%;">%
        </div>-->
    </div>
    <div id="footer" style="padding:10px;text-align:center">
        <object id="SGWorld" classid="CLSID:3a4f9197-65a8-11d5-85c1-0001023952c1" style="visibility: hidden; height: 0"></object>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-contour'" onclick="CreateRetangle()" style="width:100px">绘制区域</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-undo'" onclick="ClearContourMap()" style="width:100px">清除</a>
    </div>
    <script type="text/javascript">
        var sgworld;
        var contourInterval = 0, R = 0, G = 0, B = 0;
        $().ready(function () {
            sgworld = SGWorld;
            contourInterval = Number($("#cinterval").val())>0? Number($("#cinterval").val()):10;
            R = Number($("#cR").val()) >= 0 ? Number($("#cR").val()) : 240;
            G = Number($("#cG").val()) >= 0 ? Number($("#cG").val()) : 40;
            B = Number($("#cB").val()) >= 0 ? Number($("#cB").val()) : 40;
            if (sgworld == null) {
                alert("没正确SG对象！");
            }
        });
        var isEditing = false;
        var counterMap;
        function CreateRetangle() {
            contourInterval = Number($("#cinterval").val()) > 0 ? Number($("#cinterval").val()) : 10;
            R = Number($("#cR").val()) >= 0 ? Number($("#cR").val()) : 240;
            G = Number($("#cG").val()) >= 0 ? Number($("#cG").val()) : 40;
            B = Number($("#cB").val()) >= 0 ? Number($("#cB").val()) : 40;
            StartEdit();
        }
        var CursorCoord;
        function countermap_OnLButtonDown(Flags, X, Y) {
            if (isEditing && CursorCoord == null) {
                CursorCoord = sgworld.Window.PixelToWorld(X, Y);
                var lcolor = sgworld.Creator.CreateColor(R, G, B, 200);
                lcolor.SetAlpha(0.8);
                var p = CursorCoord.Position;
                counterMap = sgworld.Analysis.CreateContourMap(p.X, p.Y, p.X, p.Y, 0, "", itemId, "cc");
                counterMap.ContourLinesColor = lcolor;
                counterMap.ContourLinesInterval = contourInterval;
                counterMap.CoverageArea = 0;
            }
            else
                EndEdit();
        }
        var itemId;
      
        function DrawRectangleOnFrame(Flags, X, Y) {
            if (isEditing == true && counterMap != null) {
                var mi = sgworld.Window.GetMouseInfo();
                var p = sgworld.Window.PixelToWorld(mi.X, mi.Y);
                counterMap.Right = p.Position.X;
                counterMap.Bottom = p.Position.Y;
            }
        }
        function countermap_OnRButtonUp(Flags, X, Y) {
            EndEdit();
            isEditing = false; 
            sgworld.DetachEvent("OnLButtonDown", countermap_OnLButtonDown);
            sgworld.DetachEvent("OnFrame", DrawRectangleOnFrame);
            sgworld.Window.SetInputMode(0);
            sgworld.DetachEvent("OnRButtonUp", countermap_OnRButtonUp);
            return true;
        }
        function StartEdit() { 
            sgworld.AttachEvent("OnLButtonDown", countermap_OnLButtonDown);
            sgworld.AttachEvent("OnRButtonUp", countermap_OnRButtonUp);
            sgworld.AttachEvent("OnFrame", DrawRectangleOnFrame);
            sgworld.Window.SetInputMode(1);
            isEditing = true;
            itemId = sgworld.ProjectTree.FindItem("tempimg");
            if (!itemId) {
                var tempgroup = sgworld.ProjectTree.CreateGroup("tempimg");
                itemId = tempgroup;
            }
        }
        function EndEdit() {
            CursorCoord = null; counterMap = null;
        }

        function ClearContourMap() {
           var itemId1 = sgworld.ProjectTree.FindItem("tempimg");
           if (itemId1) {
               sgworld.ProjectTree.DeleteItem(itemId1);
           }
        }

         
        function GetAngle(position) {
            var includeAngle = sgworld.CoordServices.GetAimingAngles(_Position, position);
            var angle = includeAngle.Yaw - 90 - _Position.Yaw;
            return (angle / 180 * 3.14);
        }

    </script>
</body>
</html>

效果展示：