前言

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. github克隆项目缓慢

    github浏览或者克隆项目的时候,总是十分缓慢,下面是亲自自测的一种方式,克隆速度可以稍快一些 第一步 访问域名解析网站:https://www.ipaddress.com/ 在网页下方可以看见一个 ...

  2. oracle数据库解决system表空间已爆满的问题

    有时会发现数据库system表空间增长很快,使用以下语句查看system表空间使用量.也可以使用toad直接看. select b.tablespace_name "表空间", b ...

  3. 如何向小姐姐解释SQL和NoSQL之间的区别

    最近,在Medium上出现了一个采访问题:如何向奶奶解释SQL和NoSQL之间的区别.我认为作者使用自己的结构化家谱来比较sql和nosql之间的差异.写作非常好,但是有点尴尬.面试官没有时间听你的话 ...

  4. Maven项目使用mybatis报错 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):

    maven项目使用mybatis时,找不到mapper文件(.xml) 错误信息提示: 项目可以正常运行,但是在有请求到达服务器时(有访问数据库的请求),会出现报错!! 错误原因: mybatis没有 ...

  5. 静态方法staticmethod和类方法classmethod

    静态方法staticmethod和类方法classmethod 一.类方法classmethod 把一个方法变成一个类中的方法,这个方法可以直接利用类来调用,不需要依托任何的对象,即不需要实例化也可以 ...

  6. Mysql - 高可用方案之MMM(二)

    一.概述 上一篇博客中(https://www.cnblogs.com/ddzj01/p/11535796.html)介绍了如何搭建MMM架构,本文将通过实验介绍MMM架构的优缺点. 二.优点 1. ...

  7. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  8. Python高级特性——列表生成式（list Comprehensions）

    List Comprehensions 即列表生成式,是Python内置的强大的用来生成列表list的生成式. 简单菜: >>> l = list(range(2,13)) > ...

  9. C#中try catch中throw ex和throw方式抛出异常有何不同_异常捕获堆栈丢失问题

    前言,最近遇到一个使用try-catch异常捕获后记录一下日志,然后再抛出该异常后,异常堆栈里无法显示准确的堆栈地址的问题?   其实以前也遇到过类似问题,没有重视,这次好好研究了下,并上度娘上找了找 ...

  10. WPF之行为

    Behavior的运用扩展了”交互“功能,以下记录示例: 在的项目中添加两个引用:Microsoft.Expression.Interactions.dllSystem.Windows.Interac ...