cesium 入門開發系列矢量瓦片加載展現(附源碼下載)

時間 2019-12-07

標籤 cesium 入門開發系列矢量瓦片加載展現源碼下載简体版

原文原文鏈接

前言

cesium 入門開發系列環境知識點了解：
cesium api文檔介紹，詳細介紹 cesium 每一個類的函數以及屬性等等
cesium 在線例子javascript

內容概覽

cesium 實現矢量瓦片加載效果

源代碼 demo 下載

本篇實現成果具體參照MikesWei的githubcss

效果圖以下：
html

實現過程

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小專欄java

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波git

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。