前言

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

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

cesium 入门开发系列矢量瓦片加载展示(附源码下载)的更多相关文章

  1. openlayers4 入门开发系列结合 echarts4 实现散点图（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  2. openlayers4 入门开发系列之聚合图篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  3. openlayers4 入门开发系列之地图切换篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  4. openlayers4 入门开发系列之迁徙图篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. openlayers4 入门开发系列之地图工具栏篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  6. leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  7. arcgis api 3.x for js 入门开发系列十三地图最短路径分析（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 3.x for js 入门开发系列十叠加 SHP 图层（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

随机推荐

  1. sql server查询（SELECT ，where，distinct，like 查询，in，is null，group by 和having，order by，as）

    基本查询: 实例表 示例表 --部门表 create table dept( deptno int primary key,--部门编号 dname ),--部门名 loc )--地址 ); --雇员 ...

  2. React劲爆新特性Hooks 重构去哪儿网火车票PWA

    React劲爆新特性Hooks 重构去哪儿网火车票PWA 获取课程资料链接:点击这里获取 本课程先带你细数最近一年来React的新特性,如Hooks.Redux API,让你从头理解Hooks对传统R ...

  3. ZKWeb网页框架3.0正式发布

    3.0 更新的内容有 更新 .NET 框架 替换项目模版的 netcoreapp2.2 到 netcoreapp3.0 目前支持的 .NET 框架有: net461, netcoreapp2.0, n ...

  4. utf8和utf8mb4的区别

    一.简介 MySQL在5.5.3之后增加了这个utf8mb4的编码,mb4就是most bytes 4的意思,专门用来兼容四字节的unicode.好在utf8mb4是utf8的超集,除了将编码改为ut ...

  5. Maven项目使用mybatis报错 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):

    maven项目使用mybatis时,找不到mapper文件(.xml) 错误信息提示: 项目可以正常运行,但是在有请求到达服务器时(有访问数据库的请求),会出现报错!! 错误原因: mybatis没有 ...

  6. canvas的介绍

    1.我们前端的绘图技术有哪些: 统计图表:echarts 实时走势图:canvas: 在线画板:魔猴: HTML5游戏:three.js 2.我这里主要讲的是canvas绘图: <canvas& ...

  7. tomcat的jsp页面超过65535，导致500报错

    错误信息 org.apache.jasper.JasperException: Unable to compile class for JSP: An error occurred at line: ...

  8. Linux - CentOS 7 通过Yum源安装 Nginx

    添加源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.no ...

  9. jQuery仿京东首页广告图片切换图片轮播

    1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  10. sql语句中给列参数取别名及相关注意事项

    1.使用双引号 select count(*) "总数" from table: 2.使用单引号 select count(*) '总数' from table: 3.直接加别名, ...