&您的位置：&&>>&&
&&>>&&技术风向标
iClient for JavaScript之灵活扩展性
文：产品研发中心　刘宏
发布时间：
【 字体设置：
数据可视化是科学、艺术和设计的结合，当枯燥隐晦的数据被程序以优雅、简明、直观的视觉方式呈现时，带给人们的是一种全新的观察世界的方法，当这种生动的呈现方式与地图发生碰撞后，带给我们的将是耳目一新、拍案叫绝的震撼。 &　　SuperMap&iClient&for&JavaScript&是一套由JavaScript语言编写的GIS客户端应用开发包，支持多源数据地图，支持多终端，跨浏览器。该客户端提供高效的地图数据渲染，以及丰富多样的地图可视化效果，本文主要是为大家讲解JavaScript产品灵活的扩展性。 丰富多彩的可视化效果 　　目前流行一些基于HTML5的非常优秀的数据展现框架，能非常生动的为我们在浏览器上展现数据，它们提供数据表格、统计图、流向图、时空动画等丰富的渲染方案。其中比较有代表性的就是D3js、Twaver和CartoDB。如果能将这些优秀的数据渲染工具用到地图上，就再完美不过了。而JavaScript产品正好为我们提供了这个能力――扩展图层SuperMap.Layer.Elements。 Elements&Layer为各种扩展大开方便之门 　　Elements&Layer继承自SuperMap.Layer，它实际上是提供了一个地图上的空图层，这个图层只有一个Div对象。该图层可以作为覆盖层叠加到底图图层之上。当向这个Div里边添加Dom对象时，这些Dom对象实际上就叠加到地图上了。当平移缩放地图时，只需监听相应事件，通过接口计算出像素位置，修改Dom对象的位置或形状，即可实现随地图平移和缩放。 　　Elements&Layer提供了一些非常简单基础的接口，通过这些接口，可以实现叠加各种类型的对象，扩展实现各种类型的图层： 　　1、getDiv：获取图层中的Div对象，获取后可以往该Div对象里添加任何Dom对象。 　　2、getLayerPxFromLonLat：把地理坐标转换为Elements图层的像素坐标。当添加的数据是地理坐标时，需要调用该方法将地理坐标转化为像素坐标，再添加到Div对象中。每次地图平移缩放后，还需要调用该方法重新计算像素坐标。 　　3、getOffset：获取图层Div对象相对于当前视图左上角点的像素偏移量。某些情况下，需要使用该偏移量对叠加物位置做修正，使其正好叠加到地图上。 　　下面咱们来写一个简单的扩展Elements&Layer的范例： 　　1、创建一个Elements&Layer，并添加到Map上。 var&elementsLayer&=&new&SuperMap.Layer.Elements("elementsLayer"); map.addLayers([elementsLayer]); 　　2、获取图层的Div对象，并设置其大小。 var&elementsDiv&=&elementsLayer.getDiv(); //设置Elements实例的div为地图大小 var&size&=&map.getSize(); elementsDiv.style.width&=&size.w; elementsDiv.style.height&=&size.h; 　　3、创建图片对象，并将该对象添加到Div中。 var&myDom&=&document.createElement("img"); myDom.src&=&"images/china.png"; myDom.style.opacity&=&"0.6"; elementsDiv.appendChild(myDom); 　　4、根据坐标计算图片当前的像素大小以及像素位置。 function&setDom(){ //该范围的左上角右下角点分别为： var&lonlatLeftTop&=&new&SuperMap.LonLat(73.,&53.); var&lonlatRightBottom&=&new&SuperMap.LonLat(134.,&3.9); //然后分别将左上右下角点转换为像素点 var&pxLeftTop&=&elementsLayer.getLayerPxFromLonLat(lonlatLeftTop); var&pxRightBottom&=&elementsLayer.getLayerPxFromLonLat(lonlatRightBottom); //设置图片的大小 myDom.style.width&=&pxRightBottom.x&-&pxLeftTop.x&+"px"; myDom.style.height&=&pxRightBottom.y&-&pxLeftTop.y&+&"px"; //设置图片的位置 myDom.style.position&=&"absolute"; myDom.style.left&=&pxLeftTop.x&+&"px"; myDom.style.top&=&pxLeftTop.y&+&"px"; } 　　5、绑定地图缩放平移事件，当地图缩放平移后，重新计算并设置图片的大小和位置。 map.events.on({moveend:&function&(evt)&{ //重置图片的大小和位置，让图片可以随地图缩放 setDom(); }}); 效果图如下： 图1 & 当可视化遇见地图 　　知道Elements&Layer的使用方式以后，我们就可以将各种优秀的数据展现效果引入到我们的地图中来了。 　　基于D3js制作风向图图层，将风向图图层绘制在Elements图层的Div上，从而将风向图图层与地图关联，在地图上演示风向动态。（图2） 　　基于D3js制作文字云图层，将文字云图层绘制在Elements图层的Div上，从而将文字云图层与地图关联，通过文字（首都名称）快速定位其所指定的国家。（图3） 　　将Twaver提供的Network组件的Dom对象，绑定到Elements图层的Div中，从而将Network与地图关联，实现高效交互，动态展示数据。（图4） 　　数据可视化是科学、艺术和设计的结合，当枯燥隐晦的数据被程序以优雅、简明、直观的视觉方式呈现时，带给人们的是一种全新的观察世界的方法，当这种生动的呈现方式与地图发生碰撞后，带给我们的将是耳目一新、拍案叫绝的震撼。 图2 图3 图4
&&上一篇：
&&下一篇：
版权所有& ，北京超图软件股份有限公司&&京ICP备号-1c语言求余算运算 JavaScript多灵活的相关知识
“c语言求余算运算 JavaScript多灵活”的相关知识
根据网友提出的“c语言求余算运算 JavaScript多灵活”等问题，Excel办公网整理了各大知名网站有关“c语言求余算运算 JavaScript多灵活”的一些信息，请注意，文中的内容并非本站的观点，不要相信任何联系方式。下文是关于“c语言求余算运算 JavaScript多灵活”的一些基本知识：
题目：c语言求余运算7%3=？2%10=？3%7=？请问这些数的结果是多少？参考：7%3=1
7÷3=2……12%10=2
2÷10=0……23%7=3
3÷7=0……3显然的事情啊!!!
问题：JavaScript多灵活？
回答：...调用方法之所以写成8[ add ]，而不是8. add，是因为数值后面的点，会被解释为小数点，而不是点运算符。
将数值放在圆括号中，就可以使用点运算符调用方法了。
(8) .add (2)
其实，还有另一种写法。
8..add (2)
上面码的第一个点解释为小数点，第二个点解释为点运算符。为了语义清晰起见，下面我统一采用圆括号的写法。
由于 add 方法返回的还是数值，所以可以链...
问题：R语言进修条记1：R是什么
回答：...的功效。利用呼吁：
& x &- rnorm(50); y &- rnorm(x)& #发生两个随机向量x和y
5.5 要害字和运算符
从CRAN（The Comprehensive R Archive Network）cran.r-project&mirrors 中选择一个镜像，然后的安装包（R支持Linux、Mac OS X和Windows）。
问题：程序员编程知识经验总结
回答：...况下它们在新语言中的用法也是相同的。其他如列表、集合、库和树等的数据结构，以及算数运算、if 语句、循环、函数调用等逻辑也是如此。
此外，像算法使用、分解问题、命名变量和函数等关键技能，是可以直接在新语言中使用的。这在编程语言中是通用的。
库和工具也是如此。即使你并不知道新语言中的某个具体表达式的使用，也能从蛛丝马迹中发现一二。找到如何...
问题：Coder之母：程序语言的发明者是一位女士Grace Ho
回答：...年纪加入之后，她到了哈佛致力于改善马克一号（Mark I）电脑，并着手让这部超级电脑的运算比过去都要强大。
问题：Coder之母：程序语言的发明者是一位女士Grace Ho
回答：...年纪加入之后，她到了哈佛致力于改善马克一号（Mark I）电脑，并着手让这部超级电脑的运算比过去都要强大。
问题：2013年计较机二级民众基本常识进修教程：数据库
干系是由若干个差异的元组构成的，因此干系可看作元组的荟萃。N元干系是一个n元有序组的荟萃。 联接运算通过联接条件来节制，联接条件呈现两个干系中的民众属性，可能具有沟通的域、可比的属性。 （2）选择 设有一个n元干系R，它有n个域，别离是D1、D2、……、Dn，此时，它们的笛卡尔集是： 1） 荟萃可看作是域的笛卡尔积的子集，。 干系R与干系S经...
问题：Excel模拟运算表
回答：...情表中输入公式后，就可举办假设阐明，查察当改变公式中的某些值时奈何影响其功效，模仿运算表提供了一个纵所有变革的捷径。&&&&模仿运算表是一个单位格区域，它可显示一个或多个公式中替换差异值时的功效。有两种范例的模仿运算表：单输入模仿运算表和双输入模仿运算表。单输入模仿运算表中，可以对一个变量键入差异的值从而查察它对一个...
问题：怎么定义Excel2000中的运算公式？回答：统计运算不仅仅是作合计运算，还有一些其他计算。可以用运算符把常量、单元格、函数及括号等连接起来构成一个表达式，由等号和表达式组成运算公式。其一般形式为：=表达式例如：“=C3+SUM(A3:B3)+4&... 问题：Excel公式中的引用运算符
回答：在Excel公式中经常要涉及到区域引用，Excel对单元格区域进行合并计算的运算符包括以下几种：
1.冒号（:）：区域运算符，两个单元格之间用英文冒号连接，表示引用这两个单元格之间所有单元格的区域。例如区域A1:D3，表示以A1单元格和D3单元格为对角的区域，如公式：
=SUM(A1:D3)
计算A1:D3区域中所有单元格数值的和。
另外，“A:A”表示引用A列，“A:C”表示引用A...
问题：每个程序员都可能犯过的10个错误
回答：...用于阅读理解这些源码所用的时间。
还有一个类似的观点是：或你可能已经记住了相关的运算符优先级，于是省略了表达式中一些不必要的括号，但是却没有考虑到后面的程序员有可能会误读你的码，并就它是如
问题：如何在Excel2007同时对多个单元格执行相同的运算
回答：在我们日常Excel表格中，可能会需要对多个单元格的数据同时进行相同的加减乘除运算。，对一列单元格数据同时加&1&的运算，单个加很显然不太理想，今天我们就学下如何在Excel表格中同时对多个单元格执行相同的运算。
1.在Excel表格中选择一个空白单元格，并在单元格中输入要对多个单元格执行相同运算的数字。这里我们以对多个单元格执行全部加&...
问题：在同一个表格中 有一部分公式自动运算 有一部公式要用鼠标去拖动才能运算 怎样让他们全部自动 谢回答：公式没有做到那部分... 问题：自定义一个具有Like运算符功能的表函数
回答：我们知道VBA中的Like运算符是用来比较两个字符串的，其语法为：
result = string Like pattern
如果string与pattern匹配，则result为True，如果不匹配，则result为False。Like运算符的比较方式比较灵活，除了可以使用通配符外，pattern中还可以使用中括号“[ ]”。在中括号“[ ]”中，可以用由一个或多个字符组成的组与 string 中的任一字符进行匹配。虽然用COUNTIF表函数可以实现类似的比...
问题：查看excel公式运算过程
回答：...件很头痛的事。今天我们要学一个新：“公式求值”，利用它你可以看清公式的每一步运算结果。&& 如下图所示，是计算在A1:A10区域有多少个不重复的姓名。&& 公式=SUM(1/COUNTIF(A2:A10,A2:A10))&& 作步骤：&&&&& 步骤1 选取公式所在单元格，打开“公式求值”窗口(excel2003版：工具菜单-公式审核-公式求值;excel2010版：公式选项卡 - 公式求...
问题：通过查找数据，然后进行表格隔表相加运算，给100分。大牛来。excel2003回答：前言根据题意，关键是找表一第一行的最大日期，这个在EXCEL中其实并不难。...
为您推荐：中国领先的IT技术网站
51CTO旗下网站
JavaScript多灵活？
JavaScript 是一种灵活的语言，表达力极强，我来举一个例子，保证让很多人大吃一惊。本文受到了 Kyle Simpson 的文章《Iterating ES6 Numbers》的启发。
作者：阮一峰来源：| 10:21
JavaScript 是一种灵活的语言，表达力极强，我来举一个例子，保证让很多人大吃一惊。
本文受到了 Kyle Simpson 的文章的启发。
首先，在 Number.prototype 对象上，部署一个 add 方法。
Number.prototype.add = function (x) {
return this +
上面代码为 Number 的实例定义了一个 add 方法。（如果你对这种写法不熟悉，建议先阅读我写的。）
由于 Number 的实例就是数值，在数值上调用某个方法，数值会自动转为实例对象，所以就得到了下面的结果。
8['add'](2)
上面代码中，调用方法之所以写成8['add']，而不是8. add，是因为数值后面的点，会被解释为小数点，而不是点运算符。
将数值放在圆括号中，就可以使用点运算符调用方法了。
(8) .add (2)
其实，还有另一种写法。
8..add (2)
上面代码的第一个点解释为小数点，第二个点解释为点运算符。为了语义清晰起见，下面我统一采用圆括号的写法。
由于 add 方法返回的还是数值，所以可以链式运算。
Number.prototype.subtract = function (x) {
return this -
(8) .add (2) .subtract (4)
上面代码在 Number 对象的实例上部署了 subtract 方法，它可以与 add 方法链式调用。
如果使用方括号调用属性，写法会很古怪。
8[&add&](2)[&subtract&](4)
我们还可以部署更复杂的方法。
Number.prototype.iterate = function () {
var result = [];
for (var i = 0; i &= this; i++) {
result.push (i);
(8) .iterate ()
// [0, 1, 2, 3, 4, 5, 6, 7, 8]
上面代码在 Number 对象的原型上部署了 iterate 方法，可以将一个数值自动扩展为一个数组。
总之，现在我们可以在数值上直接调用方法了，但是后面一对圆括号看着有点碍眼，有没有可能去掉圆括号呢？也就是说，能不能将下面的表达式
(8).double() .square ()
写成另一种样子？
(8).double.suqare
这是可以做到的。
ES5 规定，每个对象的属性都有一个，用来自定义该属性的读取操作。
Number.prototype = Object.defineProperty (
Number.prototype, &double&, {
get: function (){return (this + this)}
Number.prototype =
Object.defineProperty (
Number.prototype, &square&, {
get: function (){return (this * this)}
上面代码在 Number.prototype 上定义了两个属性 double 和 square ，以及它们的取值方法 get 。
因此，在任一数值上，读取这两个属性，就可以写成下面的样子。
(8).double.square
也可以改用方括号运算符。
8[&double&][&square&]
【编辑推荐】【责任编辑： TEL：（010）】
大家都在看猜你喜欢
热点热点热点热点热点
24H热文一周话题本月最赞
讲师：1人学习过
讲师：24人学习过
讲师：0人学习过
精选博文论坛热帖下载排行
本书使用通俗易懂的语言，通过大量的实例，从实际应用的角度出发，全面系统地介绍了网络服务操作系统平台、电子邮件系统、Web站点和FTP站点...
订阅51CTO邮刊JavaScript - 铁匠运维网
&>>&JavaScript
0x00 背景 之前@三好学生的文章JavaScript BackDoor中提到了利用rundll32.exe执行一段JavaScript代码即可反弹一个Http Shell，这里将之前看到的对其原理进行分析的文章翻译和大家分享。 links: http://thisissecurity.net/2
1) noobSlide- 8种ajax实现的slide图片文字轮换缓冲滚动效果 演示http://efectorelativo.net/laboratory/noobSlide/sample.html Demo here.下载 2) Growl 2.0 with Mootools- 图层渐隐渐显效
如今，越来越多开发人开始将JavaScript作为其首选语言方案。理由很简单，JavaScript如今正越来越多地被视为应用程序的主流开发 语言——无论是在Web层面抑或是移动端，客户端不是服务器端。JavaScript拥有出色的灵活性，而宽松的语句设计能够让开发人员以令人惊奇的速度 创建出富应用。
Spring对于Bean的依赖注入，支持多种注解方式： @Resource javax.annotation JSR250 (Common Annotations for Java) @Inject javax.inject JSR330 (Dependency Injection for Java
我想大多数人听说过 Node.js，但是你听说过 NodeOS 吗？没错，NodeOS，一个用 Node.js 写的操作系统。好吧，实话说，NodeOS 用 Linux 内核来处理各种底层任务，比如硬件通讯什么的，但是除此之外，使用的都是 Node.js。NodeOS 的开发始于两年前，创建者的目的
前言 &不知不觉，笔者也撸码也已经一年多了。随着撸码的数量疾速上涨，如何高效，简单的组织代码，经常引起笔者的思考。作为一个方法论及其实践者（这个定义是笔者自己胡诌的），始终希望能够找到一些简单、有效的方法来解决问题，由此，也开始了一段构建代码的实践体验。 &这次要分享的，是自己在
& & & &从Lisp到Pascal，陈旧的代码如今已经再度焕发生机，而这一切要归功于下面将要介绍的各类JavaScript交叉编译器、翻译器以及模拟器。 & & & &计算机语言在保质期方面有着与众不同的独特规律。其
2015年刚刚开始，微信JS SDK发布，惊爆众人，HTML5产业好事连连。 JS SDK这个概念，其实微博和淘宝的开放平台很早前就有，包括手机QQ前段时间也推出了几个增强API，但都未产生很大的影响。小巫之后终见大巫，这次微信开放的SDK，站在了另一个高度，web到底能有多强？ HTML5的逆袭
&!--前台--& &html xmlns=&http://www.w3.org/1999/xhtml&& &head runat=&server&& &meta
热衷于分享的人
1639 积分1179 积分560 积分531 积分530 积分
如果您有站务合作方面的需求，请通过以下方式联系我。QQ: Email: tiejiang#tiejiang.org(#换成@)
您也可以使用第三方帐号快捷登录
扫一扫二维码分享