cesium天地图底图

一开始用的是http://t3.tianditu.com/cia_w/wmts这个地址，总出现跨域提示，后面地址改成这个页面中的地址就解决了，记录一下

<!DOCTYPE html>
<html lang="en"><head><!-- Use correct character set. --><meta charset="utf-8"><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Hello World!</title><script src="js/jquery-3.3.1.js"></script><script src="js/jquery-3.3.1.min.js"></script><script src="Build/Cesium/Cesium.js"></script><style>@import url(Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}#toolbar {margin: 5px;padding: 2px 5px;position: absolute;width: 260px;top: 40px;height: 200px;display: none;background-color: rgba(38, 38, 38, 0.75);padding: 20px 20px 10px 20px;color: #ffffff;border: 1px solid #526f82;}#buttombar {margin: 5px;padding: 2px 5px;position: absolute;width: 50px;top: 80%;height: 50px;display: block;/* background-color: rgba(38, 38, 38, 0.75); */padding: 0px;color: #ffffff;border: 1px solid #526f82;}#guangzhao {margin: 5px;padding: 2px 5px;position: absolute;width: 50px;top: 85%;height: 50px;display: block;/* background-color: rgba(38, 38, 38, 0.75); */padding: 0px;color: #ffffff;border: 1px solid #526f82;}.form-group {position: relative;font-size: 15px;color: white;}.button {line-height: 30px;text-align: center;font-weight: bold;color: #fff;text-shadow: 1px 1px 1px #333;border-radius: 3px;margin: 0 0px 20px 0;position: relative;overflow: hidden;padding: 0px 15px 0px 15px;}.button.black {border: 1px solid #333;box-shadow: 0 1px 2px #8b8b8b inset, 0 -1px 0 #3d3d3d inset, 0 -2px 3px #8b8b8b inset;background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0.49), rgba(51, 51, 51, 0.55));background: -moz-linear-gradient(top, #656565, #4a4a4a);background: linear-gradient(top, #656565, #4a4a4a);}.cesium-viewer-animationContainer,/* 左下角动画控件 */.cesium-viewer-timelineContainer/* 时间线 */{display: none;}.form-group .form-control {TEXT-ALIGN: center;width: 50px;z-index: 3;height: 18px;left: 170px;top: 0px;position: relative;background: none;border: none;padding: 5px 0;-webkit-transition: 0.3s;transition: 0.3s;border-bottom: 1px solid #777;}.form-group .form-control:focus,.form-group .form-control:valid {outline: none;color: beige;box-shadow: 0 1px white;border-color: white;}</style>
</head><body><div id="credit"></div><div id="cesiumContainer"></div><div id="toolbar" class="cesium-viewer-toolbar"><div class="form-group"><input id="maxHeight" value="10" required="required" class="form-control" /><label class="form-label">最大高度  (米) :    </label></div><div class="form-group"><input id="minHeight" value="0" required="required" class="form-control" /><label class="form-label">最小高度  (米) :</label></div><div class="form-group"><input id="speed" value="0.1" required="required" class="form-control" /><label class="form-label">淹没速度(m/s):</label></div><div style="margin: 10px;"><button type="button" id="begin" class="button black" onclick="runwater()">开始</button><button type="button" id="clear" class="button black" onclick="removewater()">清除</button></div></div><div id="buttombar" class="cesium-viewer-toolbar"><div style="width: 50px; height:52px; background-color: #fff;left: 90px; margin: 0 auto;"><div style="padding: 5px" title="查询"><span onclick="lookck()"><img src="img/cx.png"></span></div></div></div><div id="guangzhao" class="cesium-viewer-toolbar"><div style="width: 50px; height:52px; background-color: #fff;left: 90px; margin: 0 auto;"><div style="padding: 5px" title="查询"><span onclick="guangzhao()"><img src="img/cx.png"></span></div></div></div><script>var viewer = new Cesium.Viewer('cesiumContainer', {//    搜索geocoder: false,// sceneMode: Cesium.SceneMode.SCENE2D,// 查看主页按钮homeButton: false,// 2D/3D切换sceneModePicker: false,// 底图baseLayerPicker: false,// 导航说明navigationHelpButton: true,// 导航仪animation: true,creditContainer: "credit",// 时间线timeline: true,// 全屏fullscreenButton: false,// vr模式vrButton: false,infoBox: true,// 天地图底图imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=7b435c61bff7f77eb49206e10d6397bd",layer: 'img',style: 'default',tileMatrixSetID: 'w',format: 'tiles',maximumLevel: 18})});// 标注viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=7b435c61bff7f77eb49206e10d6397bd",layer: 'cia',style: 'default',tileMatrixSetID: 'w',format: 'tiles',maximumLevel: 18})); //注记图层var tileset = new Cesium.Cesium3DTileset({url: 'tile/tileset.json'});viewer.scene.primitives.add(tileset);viewer.zoomTo(tileset);// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;viewer.scene.screenSpaceCameraController.maximumZoomDistance = 250000;tileset.readyPromise.then(function() {var boundingSphere = tileset.boundingSphere;viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, 0, 0));viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 30);var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());tileset._modelMatrix = Cesium.Matrix4.fromTranslation(translation);}).otherwise(function(error) {throw (error);});function measureAreaSpace(viewer, maxH, interval, speed) {let waterEntity = viewer.entities.add({polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray([ //hierarchy分层（位置，孔）120.2756859, 30.42667624,120.2734762, 30.43048772,120.2691198, 30.43816092,120.2688253, 30.43887895,120.2721572, 30.44058701,120.2753432, 30.44222015,120.2781081, 30.44363731,120.2831174, 30.4462046,120.2842303, 30.44613582,120.284472, 30.44590172,120.2875494, 30.44292078,120.2904976, 30.44006473,120.293151, 30.43749407,120.2970764, 30.43281576,120.2970761, 30.43263726,120.2956152, 30.43206517,120.2834947, 30.42860944,120.2756859, 30.42667624]),material: Cesium.Color.POWDERBLUE.withAlpha(0),perPositionHeight: false,extrudedHeight: 0.0,disableDepthTestDistance: Number.POSITIVE_INFINITY,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND //是否贴地}});//二秒后开始进入淹没分析setTimeout(function() {if (waterEntity) {waterEntity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.5);var h = 0;waterEntity.polygon.extrudedHeight = 0; //需要提前设置 不然会全部出现var st = setInterval(function() {h = h + speed;if (h >= maxH) {h = maxH; //给个最大值alert("达到最高值");clearTimeout(st);}waterEntity.polygon.extrudedHeight.setValue(h);}, interval);}// entity.billboard.color = Cesium.Color.WHITE;　　// }/* 多边形*/var PolygonPrimitive = (function() {function _(positions) {this.options = {name: '多边形',polygon: {hierarchy: [],material: Cesium.Color.POWDERBLUE.withAlpha(0.5)}};this.hierarchy = positions;this._init();}_.prototype._init = function() {var _self = this;var _update = function() {return _self.hierarchy;};//实时更新polygon.hierarchythis.options.polygon.hierarchy = new Cesium.CallbackProperty(_update, false);waterEntity = viewer.entities.add(this.options);};return _;})();}, interval);}function runwater() {var maxHeight = document.getElementById('maxHeight').value;var minHeight = document.getElementById('minHeight').value;var speed = document.getElementById('speed').value;//运行measureAreaSpace(viewer, maxHeight, 1000, 1); //maxH 设置为2000;最大淹没海拔 每10毫秒前进1海拔;}function removewater() {viewer.entities.removeAll();}viewer.clock.onTick.addEventListener(function() {if (viewer.camera.pitch > 0) {viewer.scene.screenSpaceCameraController.enableTilt = false;}});var mousePosition, startMousePosition;var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);handler.setInputAction(function(movement) {mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);handler.setInputAction(function(movement) {mousePosition = movement.endPosition;var y = mousePosition.y - startMousePosition.y;if (y > 0) {viewer.scene.screenSpaceCameraController.enableTilt = true;}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);}, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);viewer.scene.globe.depthTestAgainstTerrain = true;function lookck() {if ($("#toolbar").css("display") == "none") {$("#toolbar").css({display: "block"});} else {$("#toolbar").css({display: "none"});}}// 光照效果function guangzhao() {if ($('.cesium-viewer-animationContainer').css('display') == "none" && $('.cesium-viewer-timelineContainer').css('display') == "none") {$('.cesium-viewer-animationContainer').css({display: "block"});$('.cesium-viewer-timelineContainer').css({display: "block"});// 阴影// viewer.shadows = true;// 启用光照效果// viewer.scene.globe.enableLighting = false;} else {$('.cesium-viewer-animationContainer').css({display: "none"});$('.cesium-viewer-timelineContainer').css({display: "none"});// 阴影viewer.shadows = false;// 启用光照效果// viewer.scene.globe.enableLighting = false;}};//设置初始位置viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(120.2756859, 30.42667624, 1500)});var position = Cesium.Cartesian3.fromDegrees(120.2756859, 30.42667624, 500.0);// var entity = viewer.entities.add({//     position: position,//     box: {//         dimensions: new Cesium.Cartesian3(1400.0, 1400.0, 2800.0),//         material: Cesium.Color.WHITE.withAlpha(0.3),//         outline: true,//         outlineColor: Cesium.Color.WHITE//     }// });// var globe = viewer.scene.globe;// globe.depthTestAgainstTerrain = true;// globe.clippingPlanes = new Cesium.ClippingPlaneCollection({//     modelMatrix: entity.computeModelMatrix(Cesium.JulianDate.now()),//     planes: [//         new Cesium.Plane(new Cesium.Cartesian3(1.0, 0.0, 0.0), 700.0),//         new Cesium.Plane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), 700.0),//         new Cesium.Plane(new Cesium.Cartesian3(0.0, 1.0, 0.0), 700.0),//         new Cesium.Plane(new Cesium.Cartesian3(0.0, -1.0, 0.0), 700.0)//     ],//     edgeWidth: 1.0,//     edgeColor: Cesium.Color.WHITE// });</script></body></html>

cesium天地图底图相关推荐

mapbox 天地图底图切换组件
地图却换组件效果: <template><div id="layerswitch"><div id="right-panel"& ...
ArcGIS加载天地图底图服务（附个插件）
公众号[一点规划]原文链接 ArcGIS加载天地图底图服务(附个插件)https://mp.weixin.qq.com/s/ojElwAMYrjF7dc_IYu8J9A 之前我一直单独用的山东的天地图 ...
ArcGIS加载天地图底图
1.天地图注册并申请服务器端Key 1.1 天地图API申请在该网址http://lbs.tianditu.gov.cn/home.html,"控制台"--"创建新应用 ...
ArcMap加载天地图底图及出现空白问题解决方法
[2022/7/20,记录自己终于解决了底图空白的问题,同样问题的朋友请注意红字部分,仅记录了自己成功的经验,可能不是特别完善] 一.在国家地理信息公共服务平台注册账号并申请服务端key 1.账号注册 ...
cesium实现底图反色滤镜效果（详细教程）
文章目录 1.实现效果 1.1滤镜前效果 1.2反色滤镜后效果 2.反色滤镜原理 3.实现方法 3.1官方文档 3.2修改源码实现 3.3代码调用 Cesium实战系列文章总目录: 传送门 1.实现效 ...
ArcMap10.6以上版本添加天地图底图
文章目录申请天地图服务Key 在ArcMap10.7中添加天地图服务注意点申请天地图服务Key 天地图API:http://lbs.tianditu.gov.cn/server/MapServi ...
cesium切片底图正常出来但控制台一直报错的方法
1.部署ngnix服务 2.修改ngnix配置在location 下的路径配置如下内容 add_header Access-Control-Allow-Origin *; add_header Ac ...
感受自己内心的真实，无问西东
许久没有在国产院线的电影里收到过如此多的感动,即使青春逝去如<芳华>,也只是会生出一种怅然若失的感觉罢了.倒也不是什么对青春逝去的感伤或是对亲情,友情,爱情有了过多的体悟,其实倒像是因为找 ...
Cesium + Vue 加载天地图服务（二）
1. 注册天地图更多服务访问:http://lbs.tianditu.gov.cn/server/MapService.html 2. 确定服务类型 http://t0.tianditu.gov.c ...

cesium天地图底图

cesium天地图底图相关推荐

最新文章

热门文章