前言

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小专栏

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

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

前言

内容概览

实现过程

猜你喜欢