前言

cesium 入门开发系列环境知识点了解：
cesium api文档介绍，详细介绍 cesium 每个类的函数以及属性等等
cesium 在线例子

内容概览

  1. cesium 实现矢量瓦片加载效果
  2. 源代码 demo 下载

本篇实现成果具体参照MikesWei的github

效果图如下：

实现过程

  • html 页面
<!DOCTYPE html>

<html>

<head>

<meta />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

<title>cesium加载矢量瓦片</title>

<meta charset="utf-8" />

<style>

html, body, #cesiumContainer {

width: calc(100%);

height: calc(100%);

margin: 0;

padding: 0;

overflow: hidden;

}

</style>

</head>

<body>

<div id="cesiumContainer">

</div>

<div id="creditContainer" style="display: none;">

</div>

<link href="./Cesium/Widgets/widgets.css" rel="stylesheet" />

<script src="./Cesium/Cesium.js" type="text/javascript"></script>

<script src="./build/CesiumVectorTile.min.js" type="text/javascript"></script>

<script src="index.js"></script>

</body>

</html>
  • js 完整代码代码
VectorTileImageryProvider = Cesium.VectorTileImageryProvider;

//创建地图

viewer = new Cesium.Viewer('cesiumContainer', {

animation:false, //动画控制，默认true

baseLayerPicker:false,//地图切换控件(底图以及地形图)是否显示,默认显示true

fullscreenButton:false,//全屏按钮,默认显示true

geocoder:false,//地名查找,默认true

timeline:false,//时间线,默认true

vrButton:false,//双屏模式,默认不显示false

homeButton:false,//主页按钮，默认true

infoBox:true,//点击要素之后显示的信息,默认true

selectionIndicator:true,//选中元素显示,默认true

navigationHelpButton:false,//导航帮助说明,默认true

navigationInstructionsInitiallyVisible:false,

sceneModePicker : false,//是否显示地图2D2.5D3D模式

});

viewer.imageryLayers.layerAdded.addEventListener(function () {

setTimeout(function () {

viewer.imageryLayers.orderByZIndex();

}, 200)

})

viewer.scene.debugShowFramesPerSecond = true;

//隐藏logo

hideMapLogo();

/**

* 隐藏logo以及地图服务版权信息

* @method hideMapLogo

* @param

* @return

*/

function hideMapLogo(){

viewer._cesiumWidget._creditContainer.style.display = "none";

}

var provinceLayer = null;

Cesium.loadText("./Assets/Data/json/bj.json").then(function (geojson) {

geojson = eval("(" + geojson + ")");

var turf = Cesium.turf;

var mask = null;

try {

//缓冲区

var bufferedOuter = turf.buffer(geojson.features[0], 2, "kilometers");

var bufferedInner = turf.buffer(geojson.features[0], 1, "kilometers")

bufferedInner = turf.difference(bufferedInner, geojson.features[0]);

bufferedOuter = turf.difference(bufferedOuter, bufferedInner);

bufferedInner = turf.featureCollection([bufferedInner]);

bufferedOuter = turf.featureCollection([bufferedOuter]);

var bufferedOuterProvider = new VectorTileImageryProvider({

source: bufferedOuter,

zIndex: 99,

removeDuplicate: false,

defaultStyle: {

outlineColor: "rgba(209,204,226,1)",

lineWidth: 2,

outline: true,

fill: true,

fillColor: "rgba(209,204,226,1)",

tileCacheSize: 200,

showMaker: false,

showCenterLabel: true,

fontColor: "rgba(255,0,0,1)",

labelOffsetX: -10,

labelOffsetY: -5,

fontSize: 13,

fontFamily: "黑体",

centerLabelPropertyName: "NAME"

},
……

完整demo源码见小专栏文章尾部：GIS之家cesium小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

cesium 入门开发系列矢量瓦片加载展示(附源码下载)的更多相关文章

  1. openlayers4 入门开发系列结合 echarts4 实现散点图（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  2. openlayers4 入门开发系列之聚合图篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  3. openlayers4 入门开发系列之地图切换篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  4. openlayers4 入门开发系列之迁徙图篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. openlayers4 入门开发系列之地图工具栏篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  6. leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  7. arcgis api 3.x for js 入门开发系列十三地图最短路径分析（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 3.x for js 入门开发系列十叠加 SHP 图层（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

随机推荐

  1. [Android逆向]APK反编译与回编译

    一.先查壳,再反编译看验证首先打开.apk文件==>反编译apk(dex/配置文件/资源文件(apk反编译失败)>修改关键文件实现自己的目的>重新打包签名(无法重新打包)==> ...

  2. Angular 彻底解决 Dropdown 在 Safari 上无法自动关闭的问题

    之前在 Safari 上用 focus 事件来实现 Dropdown 下拉菜单,结果在 iOS 上不兼容. 尝试了 MDN 和 stack over flow 上各种奇技淫巧,然而在 iOS 上全都败 ...

  3. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  4. [追热点]Rust学习资源整理

    为什么选择Rust 在一次演讲中,谈到微软为解决相应内存问题所做的工作,微软研究人员 Matthew Parkinson 提到了微软正在开发的基于 Rust 的新编程语言 Verona. 摘自:[Ru ...

  5. inux CPU监控分析

    一.vmstat 可对操作系统的虚拟内存.进程.CPU活动进行监控 Procs(进程) r: 运行队列中进程数量,这个值也可以判断是否需要增加CPU.(长期大于1) b: 等待IO的进程数量. Mem ...

  6. table表格中的 colspan rowspan cellpadding cellspacing

    横跨两列的单元格: colspan  属性规定单元格可横跨的列数 colspan="2" <table border="1"> <tr> ...

  7. 欢迎大家Follow me！微软MVP罗勇(Dynamics CRM方向2015-2018年)欢迎您！

    我是一名八零后,来自湖南乡村,2006年毕业于大连大学工商管理专业,主要靠自学走上了编程之路.从2012年开始接触Dynamics CRM 2011,一直从事Dynamics CRM方面工作,熟悉Dy ...

  8. eCharts二三维地图总结

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 最近多个项目中的登录页面陆续提出了不少地图需求,主要围绕地图的 ...

  9. AndroidStudio配置好了so文件运行却报错 java.lang.UnsatisfiedLinkError:

    报错截图: 解决方法:在app的build.gradle 下的defaultConfig里面添加过滤即可: ndk { abiFilters 'armeabi' //兼容x86cpu架构 需要什么样的 ...

  10. Windows7安装PowerShell5.1方法（Flutter新版本需要）

    Windows7安装PowerShell5.1方法(Flutter新版本需要)   重新安装Windows7系统,在使用Flutter的时候,发现需要PowerShell5.0以上版本,需要升级Win ...