网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

VectorMap.js矢量化地图库–快速入门-创新互联

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-js https:// oud/ https:// torMap-js/releases

执行上述引入脚本后,即创建了OpenLayers的ol对象和VectorMap.js自定义的ol.mapsuite对象,通过它可以使用VectorMap.js的全部功能,包括OpenLayer原有所有功能。 如果具有WebGL经验的话,我们会发现所有的矢量渲染都是基于WebGL完成的,包括距离测量和面积测量等小工具。

  1. 1申请ThinkGeo Cloud Access Key

为了体验VectorMap.js在矢量化数据方面的优势和强大的渲染能力, 我们从官方推荐的“世界地图”例子为入口做一个尝试。 因为官方的”Hello World”依赖于ThinkGeo Cloud Service, 所以需要申请Access Key 才能进行矢量瓦片的请求,然后进行数据的渲染。 Access Key的申请非常简单,基本一两分钟内可以搞定, 当然如果你想用其他公司提供的矢量瓦片也没有问题,但是就需要自定义地图样式, 这块我在另一张会单独讲述。

VectorMap.js 矢量化地图库 – 快速入门

言归正传,首先访问  https://cloud.thinkgeo.com  , 如果没有注册用户,请点击“Try It Free”,进行注册,如果已有账号请自行直接登录。 流程如下。

  • 在主界面点击 “Try It Free”

VectorMap.js 矢量化地图库 – 快速入门

  • 输入有效的用户名密码后点击 “Register”, 完成注册。

VectorMap.js 矢量化地图库 – 快速入门

  • 登录,登录后点击”Create a client key”, 然后获取API Key

VectorMap.js 矢量化地图库 – 快速入门VectorMap.js 矢量化地图库 – 快速入门

1.2开始第一个VectorMap.js程序

启动Visual Studio Code, 创建一个”index.html”, 引入之前提到的VectorMap.js脚本库和样式库后, 在””标签中添加地图载体”

”, 如下:


分享名称:VectorMap.js矢量化地图库–快速入门-创新互联
文章起源:http://bjjierui.cn/article/cscici.html

其他资讯