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/VectorMap-js

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

  1. Hello VectorMap.js

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

<!-- style sheet for vectormap.js -->

<link rel="stylesheet" href="https://cdn.thinkgeo.com/vectormap-js/3.0.0/vectormap.css"></link>

 <!-- latest minified version of vectormap.js -->

<script src="https://cdn.thinkgeo.com/vectormap-js/3.0.0/vectormap.js"></script>

　　

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

https://github.com/ThinkGeo/VectorMap-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的申请非常简单，基本一两分钟内可以搞定， 当然如果你想用其他公司提供的矢量瓦片也没有问题，但是就需要自定义地图样式， 这块我在另一张会单独讲述。

言归正传，首先访问 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.

  1. 3运行，显示地图

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

VectorMap.js 矢量地图库 – 快速入门的更多相关文章

  1. 转： Vue.js——60分钟组件快速入门（上篇）

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  2. Vue.js——60分钟组件快速入门（上篇）

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  3. Vue.js——60分钟组件快速入门

    一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...

  4. 【转】Vue.js——60分钟组件快速入门（上篇）

    文章作者:keepfool 文章出处:http://www.cnblogs.com/keepfool/ 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的 ...

  5. Vue.js——60分钟组件快速入门（上篇）二

    来源:https://www.cnblogs.com/keepfool/p/5625583.html 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小 ...

  6. Vue.js——vue-router 60分钟快速入门

    概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...

  7. Vue.js——60分钟组件快速入门（下篇）

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  8. Vue.js——60分钟组件快速入门（下篇）

    转自:https://www.cnblogs.com/keepfool/p/5637834.html 概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子 ...

  9. js框操作-----Selenium快速入门（八）

    js框,就是JavaScript中的警告框(alert),确认框(confirm),提示框(prompt),他们都是模态窗口.什么是模态窗口,大家可以自行百度一下,简单说就是弹出的窗口是在最顶端的,你 ...

随机推荐

  1. java基础(5):流程控制语句（switch）、数组

    1. 流程控制语句(续) 1.1 选择结构switch switch 条件语句也是一种很常用的选择语句,它和if条件语句不同,它只能针对某个表达式的值作出判断,从而决定程序执行哪一段代码.例如,在程序 ...

  2. python-Redis模块常用的方法汇总

    Redes模块常用的方法汇总 一.创建建Redis对象 1.直接使用 import redis r = redis.Redis(host='127.0.0.1', port=6379) 2.连接池使用 ...

  3. 踏实型的TOGAF企业架构学习者要学什么？

    下载:本文PDF版 昨天有帮友在IT帮大本营微信群了问到 我打开ea网站的常见问题,截图回复了一下 如果让我再简单说一下该学什么,我想用下面这张图来说明 实操型的看 企业架构,从理论到实践 认证型的看 ...

  4. This app has crashed because it attempted to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSPhotoLibraryAddUsageDescription key with a string value

    iOS10 11之后遇到这种报错的小伙伴们请注意啦: 你会发现网上一大堆博客和论坛都是让你在  Info.plist 里面要涉及隐私数据时要添加一句“提示语”.于是打开 Info.plist,点击 + ...

  5. Jedis Unexpected end of stream & java.net.SocketException: Broken pipe问题解决思路

    笔者一直维护的稳定基础服务测试环境不稳定了,这能忍!盘他,虽然不一定能完全盘的了. 背景: hrexternal 基础服务对外提供公司员工获取的多个接口,很多接口访问频率比较高,加了缓存,使用的是re ...

  6. java8-14-时间API

    原来的时间类  1.默认值 我们使用起来不方便 2.在不同包 不规范   在java.util和java.sql的包中都有日期类,此外用于格式化和解析的类在java.text包中定义 3.可变  线程 ...

  7. go语言设计模式之observer

    observer.go package observer import ( "fmt" ) type Observer interface { Notify(string) } t ...

  8. 【西北师大-2108Java】期中成绩汇总

    [西北师大-2108Java]期中成绩汇总 作业成绩 2018软件工程 得分排行 千帆竞发图 得分明细 学号 博客 博客 总分 201571030325 325 60 201571030332 htt ...

  9. Collection接口综述

    Collection接口 Collection是集合类基本的接口,它不提供具体的实现,集合类都继承自Collection接口,Collection代表的是一种规则,它包含的元素必须符合某种规则,比如有 ...

  10. win10系统使用Telnet命令时提示“telnet不是内部或外部命令”

    in10系统使用Telnet命令时提示“telnet不是内部或外部命令”问题的处理方案 win10系统使用的过程中很多用户会遇到使用Telnet命令时提示“telnet不是内部或外部命令”的问题,这样 ...