前言

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. leaflet视频监控播放(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  2. iOS核心动画高级技巧-5

    9. 图层时间 图层时间 时间和空间最大的区别在于,时间不能被复用 -- 弗斯特梅里克 在上面两章中,我们探讨了可以用CAAnimation和它的子类实现的多种图层动画.动画的发生是需要持续一段时间的 ...

  3. numpy的基本API（四）——拼接、拆分、添加、删除

    numpy的基本拼接.拆分.添加.删除API iwehdio的博客园:https://www.cnblogs.com/iwehdio/ 1.np.concatenate((a, b), axis=0) ...

  4. 关于Xpath

    1.xPath简介 XPath是一门在XML和HTML文档中查找信息的语言,可以用来在XML和HTML文档中对元素和属性进行遍历 XPath的安装 Chrome插件XPath Helper 点Chro ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 弹性盒模型

    CSS3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.弹性盒模型看起 ...

  6. 如何Windows下配置Prometheus的监控数据文件为3天

    如上图,prometheus的data文件夹时间久了会变得很大,听说是保留15天的数据.但是实际上,我只需要保留3天的数据就够了,之前试过用批处理文件清理,但是强行删除会导致peometheus崩溃, ...

  7. VS2008 激活

    序列号:PYHYP-WXB3B-B2CCM-V9DX9-VDY8T 如果没有序列号输入框需要使用crackvs2008forwindows7工具进行修复

  8. 【Java基础】String 相关知识点总结

    String 相关知识点总结 字符串的不可变性 概述 String 被声明为 final,因此它不可继承 在 Java8 中,String 内部使用 char 数组存储数据 public final ...

  9. 表单生成器(Form Builder)之伪造表单数据mongodb篇

    这篇文章终于回到了正轨:为mongodb伪造数据.之前的随机数.随机车牌照.随机时间还有这篇笔记中的获取指定长度的中文字符串,都是为这篇笔记做准备.看一下我们的准备(基础代码) // 1.获取指定范围 ...

  10. windows命令行pip报错解决的方法

    今天在新电脑安装python,发现pip无效了,于是乎百度了很多方法,发现原因是pip升级导致的 解决办法,卸载pip重新安装 可以首先执行  python -m ensurepip  然后执行 py ...