JavaScript矢量化地图库 – 快速入门

MiracleWong 发布于2019-08-23 17:19 / 2458人阅读

摘要：注意在代码中将其替换为自己刚刚申请的运行，显示地图修改保存之后点击运行就可以得到一幅矢量地图了，此过程可能会稍微有点长，要耐心多等一会儿。

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://github.com/ThinkGeo/V...

在线Sample : https://samples.thinkgeo.com/...

Hello VectorMap.js
现在开始我们的ThinkGeo VectorMap.js之旅，其整体用法延续了OpenLayers的API模式和开发习惯，如果具有OpenLayers原生库开发经验的话，上手还是非常快的。闲话少说，我们首先在页面引入VectorMap.js脚本库和样式库。

也可以在GitHub找到VectorMap.js的release版本：

https://github.com/ThinkGeo/V...

执行上述引入脚本后，即创建了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”, 完成注册。

1.2开始第一个VectorMap.js程序

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

”, 如下：

然后在html页面添加如下JavaScript代码，进行地图资源的加载和渲染显示。

let worldstreetsStyle = "https://cdn.thinkgeo.com/worldstreets-styles/2.0.0/light.json";    
let worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle, 
    {
        apiKey:"your-ThinkGeo-Cloud-Service-key"
    });
let map =  new ol.Map({                         
    layers: [worldstreets],
    target: "map",
    view: new ol.View({
        center: ol.proj.fromLonLat([-96.79620, 32.79423]),
        zoom: 4,
    }),
});

注意：在代码中“your-ThinkGeo-Cloud-Service-Key”, 将其替换为自己刚刚申请的 API Key.

3运行，显示地图
修改保存之后点击运行就可以得到一幅矢量地图了，此过程可能会稍微有点长，要耐心多等一会儿。

服务器托管私有云免费高清矢量图库前端快速入门云计算快速入门 css快速入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104156.html

常用的数据可视化工具

摘要：俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。是一个地图库，主要面向数据可视化用户。俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 评论0 收藏0
CAD小白初入门该怎么进行阶段性学习CAD？

摘要：三学以致用在学习命令时始终要与实际应用相结合，把学以致用的原则贯穿整个学习过程。五循序渐进整个学习过程其实就是循序渐进的方式。 CAD小白初入门该怎么进行阶段性学习CAD？现在随着CAD的各种应用的普及，不管是建筑加工还是机械制造，都会运用得比较多，那么新手小白到底该如何学好CAD，进阶大神？下面小编就总结了几点，希望可以对大家有所用处哦！showImg(https://segment...

Aomine 2019-07-01 12:39 评论0 收藏0
9个设计师常用的高清图库不敢配图？这9个免版权图库牢记心中！

摘要：二网址提供个人和免费商用的图像，图片质量非常高。五网址超过亿张高清图片，可以按照颜色查找的免费高质量图片中心。九网址适合平面设计师和网页设计师使用的图片素材，注册后可免费下载，个人和商业使用全部免费。一.pexels 提供大量高清尺寸，品质优良的摄影图片，所有图片都可以免费商用。网址：www.pexels.com 最好的免费图片在一个叫pexels的地方，Pexels是使用的高质量照片库的平...

AdolphLWQ 2019-04-23 11:40 评论0 收藏0
9个设计师常用的高清图库不敢配图？这9个免版权图库牢记心中！

摘要：二网址提供个人和免费商用的图像，图片质量非常高。五网址超过亿张高清图片，可以按照颜色查找的免费高质量图片中心。九网址适合平面设计师和网页设计师使用的图片素材，注册后可免费下载，个人和商业使用全部免费。一.pexels 提供大量高清尺寸，品质优良的摄影图片，所有图片都可以免费商用。网址：www.pexels.com 最好的免费图片在一个叫pexels的地方，Pexels是使用的高质量照片库的...

mj 2019-04-22 16:12 评论0 收藏1