VectorMap.js是一个开源地图渲染JavaScript库， 可以使用WebGL或者HTML5两种方式进行交互式矢量地图 （包括“矢量瓦片地图”，一般性矢量数据地图）和 栅格瓦片地图的渲染。 WebGL渲染意味着高性能，大数据， HTML5渲染意味着老浏览器的兼容性。 借助WebGL和HTML5的两架马车，VectorMap.js在性能以及浏览器兼容性方面表现优异。
作为一个专为Web GIS客户端项目提供的开源JavaScript类库包，OpenLayers用于实现对于标准格式发布的地图数据的访问与显示，经过十几年的发展， 已经成为世界范围内进行前端GIS项目的首选开源地图库。GIS前端渲染库除了OpenLayers，还有Leaflet和ESRI公司的ArcGIS API, 但是相比较而言, OpenLayers的接受度和用户群更广更多一些。 VectorMap.js就是在OpenLayers库基础上开发而来， 使用WebGL 重写了整个渲染部分，结合web worker的多线程优势，带来更高性能的渲染体验和交互体验的同时，保留了OpenLayers强大的功能，能够协助开发人员快速进行地图应用的开发。
项目地址：https://torMap-jshttps://oud/https://torMap-js/releases
执行上述引入脚本后，即创建了OpenLayers的ol对象和VectorMap.js自定义的ol.mapsuite对象，通过它可以使用VectorMap.js的全部功能，包括OpenLayer原有所有功能。 如果具有WebGL经验的话，我们会发现所有的矢量渲染都是基于WebGL完成的，包括距离测量和面积测量等小工具。
- 1申请ThinkGeo Cloud Access Key
为了体验VectorMap.js在矢量化数据方面的优势和强大的渲染能力， 我们从官方推荐的“世界地图”例子为入口做一个尝试。 因为官方的”Hello World”依赖于ThinkGeo Cloud Service, 所以需要申请Access Key 才能进行矢量瓦片的请求，然后进行数据的渲染。 Access Key的申请非常简单，基本一两分钟内可以搞定， 当然如果你想用其他公司提供的矢量瓦片也没有问题，但是就需要自定义地图样式， 这块我在另一张会单独讲述。
言归正传，首先访问 https://cloud.thinkgeo.com , 如果没有注册用户，请点击“Try It Free”，进行注册，如果已有账号请自行直接登录。 流程如下。
- 在主界面点击 “Try It Free”
- 输入有效的用户名密码后点击 “Register”, 完成注册。
- 登录，登录后点击”Create a client key”, 然后获取API Key
2开始第一个VectorMap.js程序
启动Visual Studio Code, 创建一个”index.html”, 引入之前提到的VectorMap.js脚本库和样式库后， 在”<body>”标签中添加地图载体”<div>”, 如下：
<div id="map" style="width:800px;height:600px;"></div>免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
历年真题答案解析
备考技巧名师总结
高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
