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

前言

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

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

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

Cesium是一个基于WebGL的3D地图引擎,可以加载各种类型的地理数据。要加载Mapbox矢量瓦片,您可以按照以下步骤进行操作: 1. 获取Mapbox矢量瓦片的URL。您可以在Mapbox Studio中创建和发布矢量瓦片,然后获取其URL。 2. 创建一个CesiumImageryProvider对象。您可以使用Cesium的UrlTemplateImageryProvider类来实现这一点,该类可以从一个URL模板加载图像数据。例如: ```javascript var imageryProvider = new Cesium.UrlTemplateImageryProvider({ url: 'https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}?access_token={access_token}', credit: 'Mapbox', minimumLevel: 0, maximumLevel: 22, subdomains: ['a', 'b', 'c'], tilingScheme: new Cesium.WebMercatorTilingScheme(), rectangle: Cesium.Rectangle.fromDegrees(-180.0, -85.06, 180.0, 85.06), customTags: { username: 'mapbox', style_id: 'styleid', access_token: 'your_access_token' } }); ``` 在上面的代码中,您需要将URL模板替换为您的Mapbox矢量瓦片的URL,以及您的Mapbox用户名、样式ID和访问令牌。 3. 创建一个CesiumImageryLayer图像图层对象,并将ImageryProvider对象作为参数传递给它。例如: ```javascript var imageryLayer = new Cesium.ImageryLayer(imageryProvider); ``` 4. 将ImageryLayer对象添加到Cesium的Viewer视图器中,以便在地图上显示它。例如: ```javascript viewer.imageryLayers.add(imageryLayer); ``` 通过上述步骤,您就可以将Mapbox矢量瓦片加载Cesium中,实现在3D地图上显示矢量数据的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值