元图地图开放平台技术白皮书

梅安森元图(北京)软件技术有限公司
技术白皮书
元图地图开放平台 技术白皮书
梅安森元图(北京)软件技术有限公司 2015 年 07 月
【元图公司 版权所有】
1 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书


第一章 系统概述............................................................................................................................. 3 第二 体系架构................................................................................................................................. 5 2.1 系统整体架构 ................................................................................................................... 5 2.2 系统机制 .......................................................................................................................... 6 第三章 技术机制............................................................................................................................. 9 3.1 事件机制 ........................................................................................................................... 9 3.2 命令机制 ......................................................................................................................... 10 3.3 插件机制 ......................................................................................................................... 13
【元图公司 版权所有】
2 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
第一章 系统概述
AutoCAD(Auto Computer Aided Design)是 Autodesk(欧特克)公司首次于 1982 年开发的自动计算机辅助设计软件,用于二维绘图、详细绘制、设计文档和基本三维 设计。现已经成为国际上广为流行的绘图工具。AutoCAD 具有良好的用户界面,通过交互 菜单或命令行方式便可以进行各种操作。 它的多文档设计环境, 让非计算机专业人员也能很 快地学会使用。 在不断实践的过程中更好地掌握它的各种应用和开发技巧, 从而不断提高工 作效率。AutoCAD 具有广泛的适应性,它可以在各种操作系统支持的微型计算机和工作站 上运行,可以用于绘制二维制图和基本三维设计,通过它无需懂得编程,即可自动制图,因 此它在全球广泛使用,可以用于土木建筑,装饰装潢,工业制图,工程制图,电子工业,服 装加工等多方面领域。 梅安森元图(北京)软件技术有限公司是重庆梅安森科技股份有限公司(股票代码: 300275)控股的专注于行业地理信息系统及相关专业应用软件研发、推广与服务的高新技 术企业与软件企业, 位于北京中关村国家自主创新园区—中关村软件园。 梅安森元图拥有热 诚值得信赖的员工团队、强大专业的研发能力,快速响应客户需求的服务态度,提供专业实 用的信息化软件产品、 整体解决方案与应用服务, 同时有着丰富的 AutoCAD 二次开发经验。 元图地图开放平台是元图公司的核心技术品牌, 是一款基于 AutoCAD 图形的展示的产 品;他是首款将 AutoCAD 二次开发同类似目前互联网地图二次开发 API(如百度地图)相 结合的产品,大大降低了二次开发难度,同时展示和动画效果得到很大提高。 元图地图开放平台以组件的方式提供给用户二次开发,支持 AutoCAD 各个版本(用户 无需安装 AutoCAD 软件),支持 IE 内核,Chrome 内核,火狐(firefox)内核等浏览器, 支持 JavaScript、html、C#、C++等语言的二次开发。 优势/特点: 1、第一个基于 AutoCAD 图形的地图开发平台,简单易学,功能强大。 2、二次开发 API 与常用的互联网地图 API 类似, 如百度地图; 用户无需具备 AutoCAD 图形处理的相关专业知识,只需熟悉 web 开发技术如 html,js,css,即可开发基于 CAD 图 形的专业应用。 3、可以将互联网地图与 AutoCAD 图形叠加,实现诸如井上下对照、行政区划图与工 程图纸之间的无缝对接。
【元图公司 版权所有】
3 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
功能: 1、地图基本功能提供了地图操作的基本功能,如任意设置地图缩放级别,同时加载多 幅地图,响应各种地图事件。 2、 实现对 AutoCAD 图形的操作提供获取 AutoCAD 图形中实体信息, 修改实体属性, 获取和修改图层信息,选择实体等接口。 3、地图控件提供了很多控件功能,如导航条控件、按钮控件、按钮组控件、绘图控件、 自定义控件。 4、地图覆盖物功能提供对覆盖物的操作,如添加/删除各种覆盖物、设置动画、点聚 合、热力图、矢量图标、富标注等。 5、提供瓦片技术实现瘦客户端的地图服务功能。 与目前市场上产品的区别: 1、CAD 二次开发(传统模式) 比较内容 开发方式 CAD 操作 元图地图开放平台 以 JavaScript 开发为主(简单, 上手快) 无需 CAD 环境,能打开 CAD 图形 能读取、修改实体属性 效果 应用场景 能将 html5 元素和动画与图形相结合 适用于需要在没有 AutoCAD 环境下, 结合行业需求在 C/S 或 B/S 模式下展示 AutoCAD 图形及和行业数据相结合的 场景。 2、与互联网地图平台 比较内容 地图来源 开发方式 元图地图开放平台 来源于客户自己的 AutoCAD 图形 提供了同互联网地图平台相似的 JavaScript 二次开发库 效果 应用场景 能将 html5 元素和动画与图形相结合 同上 同左 适用于有网络环境下,行业数据和 互联网图形的结合展示分析 互联网地图平台 互联网公司采集的地图数据 提供了 JavaScript 二次开发库 CAD 二次开发(传统模式)
ObjectARX 等(有一定难度入门高)
需要 CAD 环境 接口更丰富 很难实现动画效果 适应于对 CAD 图本身的增加, 删除, 修改等操作。
【元图公司 版权所有】
4 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
第二 体系架构
从整体架构来讲,元图地图开放平台是一个开放的体系结构,是一个平台化、组件化的 可扩展平台。第三方厂商可以在元图地图开放平台所提供 API 和接口的基础上,开发具有 基于 CAD 图形的行业特性的应用。
2.1 系统整体架构
用户
元图开放平台二次开发商
(通过 VC,C#,JS 等语言调用控件接口)
元图开放平台
(以 ActiveX 及 Chrome 插件机制提供控件接口)
元图地图 JavaScript API 库 提供地图操作、覆盖物操作等
二次开发商自己的 JavaScript 库
第三方 JS 库如 Jquery
图 2.1 地图地图开放平台系统整体架构图
【元图公司 版权所有】
5 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
ActiveX(NPAPI)控件
视图(View1)
控件层如导航条
视图(View2) 可以是一个
覆盖物层 矢量图形层 CAD 图形层
单独的 HTML 页面
互联网地图层
视图集合(ViewList)
图 2.2 地图地图开放平台控件架构图
2.2 系统机制
元图地图开放平台提供给用户的有 一 、 元 图 地 图 Active 控 件 (bin\metamap2d.dll) 及 NPAPI 插 件
(bin\npmetamap2d.dll)。Active 控件适用于桌面端及 IE 浏览器使用,NPAPI 适用于 Chrome 内核浏览器使用。 Active 控件及 NPAPI 插件有着同样的接口方法, 使用起来一致。 二、 元图地图 JavaScript API 接口文件(script/mxLib/api.min.js),此 api 与互联 网地图 API 接口类似,提供了对地图的操作、 覆盖物操作、CAD 图形属性查询和修改等。 此 API 接口文件由元图地图控件加载。 元图地图开放平台二次开发商,如果开发桌面端程序,可使用 VC、VB、C#等支持 ActiveX 开发语言,加载元图地图 Active 控件,通过控件方法打开 CAD 图形,同时设置 6 / 18
【元图公司 版权所有】

梅安森元图(北京)软件技术有限公司
技术白皮书
元图地图 JavaScript API 接口文件路径,由元图地图 Active 控件来加载 API 文件。如果 开发 WEB 程序,可使用如 https://www.360docs.net/doc/b08705048.html, 等开发工具加载地图 Active 控件,同上述打开 DWG 图形,设置脚本路径来加载 API 文件。用户需结合自己行业和需求,在元图 API 基本上, 利用 JavaScript 开发出跟自己业务相关的用户 JS 库。 调用 JS 方 法及提供 地图事件 元图 API
用户界面 开发语言 VC++ VB C# https://www.360docs.net/doc/b08705048.html, 等
调用控 件方法
元图地图 控件接口 方法
第三方 JS 抛出事件 调用控件 方法及抛 出事件 用户 JS
当控件加载打开一个 CAD 图形或加载一个页面时,其流程为:
【元图公司 版权所有】
7 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
MapHost.js
( 对控件导出的方法 用 JS 进行了封装)
//样式 linkcss(scriptBaseDir + "css/map.css"); //脚本 //第三方库 include(scriptBaseDir "mxlib/jquery-1.11.2.min.js"); include(scriptBaseDir "mxlib/snap.svg-min.js");
+ +
LoadMxLib.js (加载脚本文件,如右) include 中的 JS 脚本会 在这时机加载 domLoadedInclude 中的 脚本此处不会加载,只 会保存进数组中,dom 加载完才加载,加载次 序按定义的先后次序)
//元图地图库 include(scriptBaseDir + "mxlib/api.min.js"); //二次开发入口文件 加载完成了 dom 后 domLoadedInclude(scriptBaseDir + "main.js");
DOM 元素
(加载 DWG 图形) MetaMap control not setup 其它 div...
main.js (接定义次序加载 LoadMxLib.js 中定义的 domLoadedInclude 脚本文本)
【元图公司 版权所有】
8 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
第三章 技术机制
元图地图开放平台的技术应用,以“先进合理的应用理念” 、 “丰富的展示效果” 、 “灵活 的系统可拓展性”等几个方向为指导,力求在合理理解应用逻辑的基础上,最大限度的提高 技术含量,为企业用户提供一套优质的基于 AutoCAD 图形的地图平台展示软件。
3.1 事件机制
元图地图开放平台首次将静态的 AutoCAD 图形与目前热门的 Html5、CSS3、SVG 相结合,能展示出丰富动态的各种效果。 其事件流程机制如下: 地图平移事件 地图缩放事件 地图拖放事件 各 DIV 本身事件 控件层如导航条
元 图 地 图 控 件
覆盖物层 矢量图形层 CAD 图形层 各层根据 CAD 图形事件同步 更新相应层的 显示信息 其他事件 互联网地图层
控件层:是不随图形变化而变化的层,如导航条控件,按组控件等,通常与像素坐标相 关联。 覆盖物层:是随图形变化而变化的层,如 Marker, RichMarker。通常是与一个地理坐 标点相关联。 矢量图形层:是随图形变化而变化的层,如 VectorLayer。通常是一个 SVG 图形,并 且一个地理区域相关联。
【元图公司 版权所有】
9 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
3.2 命令机制
元图地图开放平台的命令机制是一个非常重要的机制体系。 在无任何命令的初始状态下, 地图只能进行平移,缩放等基本操作。如果要实现用户自定义的命令,如绘图、矩形缩放等 就必须要了解命令机制的工作原理。 元图地图开放平台的命令机制允许命令嵌套,同时对不同的命令也不会相互干扰。命令 机制的核心问题是鼠标、键盘等事件的派发问题。 元图地图开放平台的命令机制采用类似栈的思路,处于栈最上面的命令是当前命令,只 能当前命令能收到地图的鼠标和键盘事件。 当有新命令进栈时, 如果新命令的父命令在当前 栈中,则此父命令之后的所有子命令全部取消,新命令进栈;如果新命令没有父命令或者父 命令不在当前栈中,则命令栈中的所有命令全部取消,新命令进栈。
【元图公司 版权所有】
10 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
命令运行流程图
初始状态
命令准备进栈
保存当前初始状态环境
否 要进栈命令的父 命令是否在栈中
是 否 父命令是否 有子命令
是 取消父命令的所有子命令 (所括子命令的子命令等)
命令进栈
命令结束出栈
还原初始环境
【元图公司 版权所有】
11 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
命令运行示例图
初始状态 var drawCmd = new mxLib.DrawCommand("", nul); map.startCommand(drawCmd);//开始绘图命令 初始状态 绘图命令 当前命令栈为空,直接进栈
DrawCommand.prototype.start = function (map) { https://www.360docs.net/doc/b08705048.html,mand.prototype.start.call(this, map); this.map.startCommand(new DrawDotCommand(" 画点 ", this));}
初始状态
绘图命令
画点命令
画点命令的父命令为绘图命令,绘图命令无子命令,直接进栈 map.startCommand(new DrawPolylineCommand("画折线", drawCmd)); 初始状态 初始状态 绘图命令 绘图命令 画点命令 画折线命令
画折线命令的父命令为绘图命令, 绘图命令有子命令画点命令, 先取消画点命令,再把画折线命令进栈 map.startCommand(new mxLib.RectZoomCmd("矩形拉框放大"), null); 初始状态 初始状态 绘图命令 矩形拉框放大命令 矩形拉框放大命令的父命令为空, 取消当前命令栈的所有命令, 再把矩形拉框放大命令命令进栈 rectZoomCmd.end(false);//结束矩形拉框放大命令 初始状态 矩形拉框放大命令结束出栈 画折线命令
【元图公司 版权所有】
12 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
3.3 插件机制
元图地图开放平台可扩展性强,支持 COM 组件,ActiveX 控件及 NPAPI 插件。 1、COM 组件 API 提供了如下接口用来创建和使用 COM 组件。COM 组件可用于封装一些常用的算 法供 JS 层调用。 具体使用请查看帮助文档及 html 示例中互联网地图与 CAD 图叠加的 DEMO.
mxLib.Ax.newAxObject(clsID) 新建一个组件对象,如果返回值为零,表示调用失败. mxLib.Ax.queryAxProperty(AxId, name) 属性查询. mxLib.Ax.querySubObject(AxId, name, ) 查询组件子接口 mxLib.Ax.setAxProperty(AxId, name, val) 属性设置. mxLib.Ax.dynamicCall(AxId, funName, ) 动态调用组件方法. mxLib.Ax.delAxObject(AxId) 删除对象.
2、ActiveX 控件 ActiveX 控件可用于创建第三方控件,如视频播放控件等在页面中显示。ActiveX 控件 开发可由用户熟悉的语言开发完成。在元图地图开放平台调用的方法为: (1)ActiveX 控件的创建 利用 Html 中的 Object 创建。例如
control not setup
其中 object type="application/x-qt-plugin" classid="ActiveX" guid="****" 是必须项。GUID 为 用户自己的 ActiveX 的 GUID. 通过 JS 往地图中动态加入一个 ActiveX 控件的代码示例:
var obj = $('guid="DF16845C-92CD-4AAB-A982-EB9840E74669" id="control1" style="position: absolute; left:0px;top:0px;width:30%;height:30%;">control not setup'); $(map.getContainer()).append(obj);//增加至地图中
【元图公司 版权所有】
13 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
control1.show();//控件显示(control1 为控件 ID) control1.hide();//控件隐藏(control1 为控件 ID) obj.remove();//删除控件
(2)ActiveX 控件的方法和属性 方法调用 DynamicCall(方法名,参数...) 属性查询 QueryProperty(属性名) 属性设置 SetProperty(属性名,属性值) 如:
var val = control1.QueryProperty("value"); control1.SetProperty("value", val + 50); var ret = control1.DynamicCall("setValue(int,String,double)", 60, "值", 0.01); 注:这里的属性名和方法名必须是ActiveX本身所导出的方法和属性。 DynamicCall函数的第一个参数格式为:方法名(参数数据类型, 参数数据类型...) 其数据类型与COM中的类型对应如下:
data type bool String int uint double longlong ulonglong Color Date DateTime Time Font Pixmap Variant VariantList (same as List) StringList ByteArray Rect Size Point SAFEARRAY(BSTR) SAFEARRAY(BYTE) User defined type User defined type User defined type COM property VARIANT_BOOL BSTR int unsigned int double CY CY OLE_COLOR DATE DATE DATE IFontDisp* IPictureDisp* VARIANT SAFEARRAY(VARIANT)
【元图公司 版权所有】
14 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
bool
[in] VARIANT_BOOL
bool&
[in, out] VARIANT_BOOL*
String, const String&
[in] BSTR
String& String& int int& uint
[in, out] BSTR* [in, out] BSTR* [in] int [in,out] int [in] unsigned int
uint& double double& Color, const Color&
[in, out] unsigned int* [in] double [in, out] double* [in] OLE_COLOR
Color&
[in, out] OLE_COLOR*
Date, const Date& Date& DateTime, const DateTime& DateTime& Font, const Font& Font& Pixmap, const Pixmap& Pixmap&
[in] DATE [in, out] DATE* [in] DATE
[in, out] DATE* [in] IFontDisp* [in, out] IFontDisp** [in] IPictureDisp*
[in, out] IPictureDisp**
List, const List&
[in] SAFEARRAY(VARIANT)
【元图公司 版权所有】
15 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
List&
[in, out] SAFEARRAY(VARIANT)*
StringList, const StringList& StringList&
[in] SAFEARRAY(BSTR)
[in, out] SAFEARRAY(BSTR)*
ByteArray, const ByteArray& ByteArray&
[in] SAFEARRAY(BYTE)
[in, out] SAFEARRAY(BYTE)*
Object*
[in] IDispatch*
(3)ActiveX控件事件 通过BindEvent(事件名, 相对应参数的事件函数)来响应ActiveX事件。 然后通过相对应参数的事件绑定JS中的函数。如:
control1.BindEvent("valueChanged(int)", "fun_int_1(int)"); control1.event_int_1.connect(function(e){alert(e);}); control1.BindEvent("numberChanged(int), "fun_int_2(int)"); control1.event_int_2.connect(function(e){alert(e);}); control1.BindEvent("textChanged(int), "fun_string_int_1(String, int)"); control1.event_string_int_1.connect(function(e){alert(e);}); 目前支持以下几种参数类型的事件和函数对应关系为: void void void void void void void void void void void void void void fun_void_1(); fun_void_2(); fun_void_3(); fun_void_4(); fun_void_5(); fun_int_1(int); fun_int_2(int); fun_int_3(int); fun_int_4(int); fun_int_5(int); fun_double_1(double); fun_double_2(double); fun_double_3(double); fun_double_4(double); void void void void void void void void void void void void void void event_void_1(); event_void_2(); event_void_3(); event_void_4(); event_void_5(); event_int_1(int); event_int_2(int); event_int_3(int); event_int_4(int); event_int_5(int); event_double_1(double); event_double_2(double); event_double_3(double); event_double_4(double);
16 / 18
【元图公司 版权所有】

梅安森元图(北京)软件技术有限公司
技术白皮书
void fun_double_5(double); void fun_string_1(String); void fun_string_2(String); void fun_string_3(String); void fun_string_4(String); void fun_string_5(String); void fun_string_int_1(String, int); void fun_string_int_2(String, int); void fun_string_int_3(String, int); void fun_string_int_4(String, int); void fun_string_int_5(String, int); void fun_string_double_1(String, double); void fun_string_double_2(String, double); void fun_string_double_3(String, double); void fun_string_double_4(String, double); void fun_string_double_5(String, double); void fun_string_string_1(String, String); void fun_string_string_2(String, String); void fun_string_string_3(String, String); void fun_string_string_4(String, String); void fun_string_string_5(String, String);
void fun_string_string_string_1(String, String, String); void fun_string_string_string_2(String, String, String); void fun_string_string_string_3(String, String, String); void fun_string_string_string_4(String, String, String); void fun_string_string_string_5(String, String, String);
void void void void void void void void void void void
event_double_5(double); event_string_1(String); event_string_2(String); event_string_3(String); event_string_4(String); event_string_5(String); event_string_int_1(String, event_string_int_2(String, event_string_int_3(String, event_string_int_4(String, event_string_int_5(String,
int); int); int); int); int);
void event_string_double_1(String, double); void event_string_double_2(String, double); void event_string_double_3(String, double); void event_string_double_4(String, double); void event_string_double_5(String, double); void void void void void event_string_string_1(String, event_string_string_2(String, event_string_string_3(String, event_string_string_4(String, event_string_string_5(String, String); String); String); String); String);
void event_string_string_string_1(String, String, String); void event_string_string_string_2(String, String, String); void event_string_string_string_3(String, String, String); void event_string_string_string_4(String, String, String); void event_string_string_string_5(String, String, String);
下图为ActiveX开发的视频插件应用实例场景:
【元图公司 版权所有】
17 / 18

梅安森元图(北京)软件技术有限公司
技术白皮书
3、NPAPI 插件
网景插件应用程序编程接口(NPAPI, Netscape Plugin Application Programming Interface)是Netscape Navigator、Mozilla Suite、Mozilla SeaMonkey和Mozilla Firefox等Gecko引擎浏览器与Apple Safari和Google Chrome等webkit引擎浏览器所使用的类似ActiveX的插件接口。 元图地图开放平台NPAPI插件开发与通用的NPAPI开发一致,这里不再阐述。
【元图公司 版权所有】
18 / 18

相关文档
最新文档