文档章节

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

上下田
 上下田
发布于 05/06 14:25
字数 1061
阅读 11
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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代码,进行地图资源的加载和渲染显示。

<script>
    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,
        }),
    });
</script>

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

  1. 3运行,显示地图

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

© 著作权归作者所有

上下田
粉丝 0
博文 1
码字总数 1061
作品 0
成都
私信 提问
云 GIS 网络客户端开发平台 - iClient-JS

SuperMap iClient JavaScript (简称 iClient-JS )是云 GIS 网络客户端开发平台。基于现代 Web 技术栈全新构建,是 SuperMap 云四驾马车和在线 GIS 平台系列产品的统一 JS 客户端。集成了领先...

ahnan
2017/12/04
9.9K
7
阿里iconfont矢量图库使用

iconfont可以像使用字体一样使用矢量库中所有的矢量图,在web中使用,有3中使用方式,分别是: 1)unicode引用 2)font-class引用 3)symbol引用(平台推荐的用法) font-class引用方式使用最...

goodman_fz
2018/07/04
323
0
设计师必看:8处满足原型设计的矢量图标根据地

做原型设计时,我们往往感觉图标素材不够用,尤其是矢量图标不够。 矢量图标是矢量图的一种,这种图形也叫做绘图图像,是各种设计中比较常用的图片格式之一。因为其是根据几何特性绘制,并且...

jongde
2016/11/15
30
0
一文带你玩转机器学习和深度学习

  俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学...

深度学习
2018/01/06
0
0
手把手带你玩转机器学习和深度学习

  俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学...

中国机器人
2018/01/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

采购单品汇总_华南.xlsx

import pandas as pdimport matplotlib.pyplot as pltimport matplotlib as mp1mp1.rcParams["font.family"] = "STFangsong"# 加载《销售》表数据df1 = pd.read_excel(r"C:\Us......

龙玉滕
今天
5
0
OSChina 周五乱弹 —— 一次四千 要4次还能多给一千

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐# 分享金志文的单曲《远走高飞》: 版权又回来了现在听歌得好几个软件 《远走高飞》- 金志文 手机党少年们...

小小编辑
今天
7
0
Spring Cloud Alibaba 实战(十) - Spring Cloud GateWay

> 本文主要内容是:为什么要使用网关,整合Gateway,Gateway核心学习:Route,Predicate,Filter,最后使用Gateway聚合微服务请求 先总结至此的架构 1 网关的价值 不使用网关行嘛? 各个请求直接打在...

JavaEdge
今天
4
0
【CKB.DEV 茶话会】第二期:聊聊 CKB 钱包和 Nervos DAO 全流程

CKB.DEV 茶话会第二期:聊聊 CKB 钱包和 Nervos DAO 全流程 为了鼓励更多优秀的开发者和研究人员参与到 CKB 的开发和生态建设中去,我们希望组织一系列 CKB Developer Seminar(CKB.DEV 茶话...

NervosCommunity
今天
4
0
聊聊rocketmq的HAClient

序 本文主要研究一下rocketmq的HAClient HAClient rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/ha/HAService.java class HAClient extends Serv......

go4it
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部