前言

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

内容概览

cesium 实现矢量瓦片加载效果

源代码 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小专栏

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

转载于:https://www.cnblogs.com/giserhome/p/10982583.html

cesium 入门开发系列矢量瓦片加载展示(附源码下载)相关推荐

openlayers4 入门开发系列之地图工具栏篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
cesium加载百度地图_Cesium专栏-百度地图加载（附源码下载）
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
VUE项目中图片加载过大处理方式-渐进式方式-懒加载方式--附源码
解决有两步: 1.采用渐进式加载:原图未加载完时显示比它内存小的模糊图: 2.采用懒加载:只加载可视区域的图片,即滚动到可视区域时再加载图片 vue-lazyload-img:VUE图片懒加载插件 v ...
Cesium专栏-空间分析之坡向分析（附源码下载）
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
cesium 经纬度绘制点_cesium结合geoserver利用WFS服务实现图层新增(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
cesium 3dtiles 加载本地数据_cesium结合geoserver实现地图空间查询(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
android 原生开发 3d地图下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

cesium 入门开发系列矢量瓦片加载展示(附源码下载)

前言

内容概览

实现过程

cesium 入门开发系列矢量瓦片加载展示(附源码下载)相关推荐

最新文章

热门文章