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

时间 2019-11-16

原文原文链接

VectorMap.js是一个开源地图渲染JavaScript库，能够使用WebGL或者HTML5两种方式进行交互式矢量地图（包括“矢量瓦片地图”，通常性矢量数据地图）和栅格瓦片地图的渲染。 WebGL渲染意味着高性能，大数据， HTML5渲染意味着老浏览器的兼容性。借助WebGL和HTML5的两架马车，VectorMap.js在性能以及浏览器兼容性方面表现优异。css

做为一个专为Web GIS客户端项目提供的开源JavaScript类库包，OpenLayers用于实现对于标准格式发布的地图数据的访问与显示，通过十几年的发展，已经成为世界范围内进行前端GIS项目的首选开源地图库。GIS前端渲染库除了OpenLayers，还有Leaflet和ESRI公司的ArcGIS API, 可是相比较而言, OpenLayers的接受度和用户群更广更多一些。 VectorMap.js就是在OpenLayers库基础上开发而来，使用WebGL 重写了整个渲染部分，结合web worker的多线程优点，带来更高性能的渲染体验和交互体验的同时，保留了OpenLayers强大的功能，可以协助开发人员快速进行地图应用的开发。html

项目地址：https://github.com/ThinkGeo/V...前端

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

Hello VectorMap.js
如今开始咱们的ThinkGeo VectorMap.js之旅，其总体用法延续了OpenLayers的API模式和开发习惯，若是具备OpenLayers原生库开发经验的话，上手仍是很是快的。闲话少说，咱们首先在页面引入VectorMap.js脚本库和样式库。github

<link rel="stylesheet" href="https://cdn.thinkgeo.com/vect...;></link>

<script src="https://cdn.thinkgeo.com/vect...;></script>
也能够在GitHub找到VectorMap.js的release版本：web

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

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

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

1.2开始第一个VectorMap.js程序

启动Visual Studio Code, 建立一个”index.html”, 引入以前提到的VectorMap.js脚本库和样式库后，在”<body>”标签中添加地图载体”<div>”, 以下：

<div id="map" style="width:800px;height:600px;"></div>
而后在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运行，显示地图
修改保存以后点击运行就能够获得一幅矢量地图了，此过程可能会稍微有点长，要耐心多等一下子。