前言

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. abp模块生命周期设计思路剖析

    abp中将生命周期事件抽象为4个接口: //预初始化 public interface IOnPreApplicationInitialization { void OnPreApplicationI ...

  2. jTopo HTML5 Canvas 画图组件

    jTopo是什么? jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包. jTopo关注于数据的图形展示,它是面 ...

  3. JS基础语法---函数作为返回值使用

    结论:函数是可以作为返回值使用的 function f1() { console.log("f1函数调用了"); return function() { console.log(& ...

  4. 参加杭州 2019 AI Bootcamp有感与总结（2）

    接上篇 参加杭州 2019 AI Bootcamp有感与总结(1) - repeatedly - 博客园 午餐畅谈的收获 先感谢主办方提供的午餐,中午午休的时候,大家聊了很多,或者说主要是听大佬谈.聊 ...

  5. IT兄弟连 HTML5教程 “无意义”的HTML元素div和span

    HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签a创建链接,标签h1创建标题等),然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用.但实际上, ...

  6. AST抽象语法树 Javascript版

    在javascript世界中,你可以认为抽象语法树(AST)是最底层. 再往下,就是关于转换和编译的"黑魔法"领域了. 现在,我们拆解一个简单的add函数 function add ...

  7. java中线程的几种实现方式

    1. 继承Thread类来实现 class MyThread extends Thread{ @Override public void run() { System.out.println(&quo ...

  8. C# -- 模拟扑克牌发牌

    C# -- 模拟扑克牌发牌 1.  User 类: 玩家 public class User { private List<PaperCard> listCard = new List&l ...

  9. PlayJava Day026

    1.泛型:指代任意对象类型 public class CC<T> {} C<Integer> c = new C<Integer>(1) ; 2.限制泛型:用于继承 ...

  10. 2.Python 赋值与内存

    定义变量和赋值其实就是系统处理内存的过程和问题,这篇文章分别从申请和释放内存两部分讨论 一.申请内存   python定义一个变量时,会为变量的对象申请一个内存,该变量会存储指向该对象内存中的地址 这 ...