前言
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 { 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小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波