前言
缺少前置学习使用资料，请自行查阅：[/weixin_44402694/article/details/123110136](/weixin_44402694/article/details/123110136)以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[/download/weixin_44402694/82180350](/download/weixin_44402694/82180350)。设置地图风格样式。
使用
内容简介
1、根据本地图片设置3d球的样式
2、加载天地图
3、加载bingmap
4、加载地形服务
5、加载supermap影像服务
6、添加由supermap iserver发布的s3m服务
7、添加mvt服务图层
1、根据本地图片设置场景3d球的样式
使用到图片下方图片效果
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>设置地图风格</title><link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /><scripttype="text/javascript"src="./public/Build/Cesium/Cesium.js"></script><style>* {margin: 0;padding: 0;}html,body,#cesium-container {width: 100%;height: 100%;}</style></head><body><div id="cesium-container" /><script>let viewer = nullwindow.onload = function () {viewer = new Cesium.Viewer('cesium-container')setMapStyleByLocalImgHandler()}// 1、根据本地图片设置场景3d球的样式function setMapStyleByLocalImgHandler() {viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({url: './public/static/img/3d-map.jpeg',}))}</script></body></html>
2、加载天地图
效果
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>设置地图风格</title><link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /><scripttype="text/javascript"src="./public/Build/Cesium/Cesium.js"></script><style>* {margin: 0;padding: 0;}html,body,#cesium-container {width: 100%;height: 100%;}</style></head><body><div id="cesium-container" /><script>let viewer = nullwindow.onload = function () {viewer = new Cesium.Viewer('cesium-container')setMapStyleByTDTHandler()}// 2、加载天地图function setMapStyleByTDTHandler() {// Cesium.TiandituMapsStyle.CIA_C : String 天地图全球中文注记服务（经纬度投影）// Cesium.TiandituMapsStyle.CIA_W : String 天地图全球中文注记服务（墨卡托投影）// Cesium.TiandituMapsStyle.CTA_C : String 天地图全球地形中文注记服务（经纬度投影）// Cesium.TiandituMapsStyle.CTA_W : String 天地图全球地形中文注记服务（墨卡托投影）// Cesium.TiandituMapsStyle.CVA_C : String 天地图全球矢量中文注记服务（经纬度投影）// Cesium.TiandituMapsStyle.CVA_W : String 天地图全球矢量中文注记服务（墨卡托投影）// Cesium.TiandituMapsStyle.EIA_C : String 天地图全球影像英文注记服务（经纬度投影）// Cesium.TiandituMapsStyle.EIA_W : String 天地图全球影像英文注记服务（墨卡托投影）// Cesium.TiandituMapsStyle.EVA_C : String 天地图全球矢量英文注记服务（经纬度投影）// Cesium.TiandituMapsStyle.EVA_W : String 天地图全球矢量英文注记服务（墨卡托投影）// Cesium.TiandituMapsStyle.IMG_C : String 天地图全球影像地图服务（经纬度投影）// Cesium.TiandituMapsStyle.IMG_W : String 天地图全球影像地图服务（墨卡托投影）// Cesium.TiandituMapsStyle.TER_C : String 天地图全球地形晕渲服务（经纬度投影）// Cesium.TiandituMapsStyle.TER_W : String 天地图全球地形晕渲服务（墨卡托投影）// Cesium.TiandituMapsStyle.VEC_C : String 天地图全球矢量地图服务（经纬度投影）// Cesium.TiandituMapsStyle.VEC_W : String 天地图全球矢量地图服务（墨卡托投影）viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({mapStyle: Cesium.TiandituMapsStyle.VEC_C, //天地图全球中文注记服务token: 'bc3b5d509e380ae4308cc4ace4385ddc', //由天地图官网申请的密钥}))viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({mapStyle: Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务token: 'bc3b5d509e380ae4308cc4ace4385ddc', //由天地图官网申请的密钥}))}</script></body></html>
3、加载bingmap
效果
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>设置地图风格</title><link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /><scripttype="text/javascript"src="./public/Build/Cesium/Cesium.js"></script><style>* {margin: 0;padding: 0;}html,body,#cesium-container {width: 100%;height: 100%;}</style></head><body><div id="cesium-container" /><script>let viewer = nullwindow.onload = function () {viewer = new Cesium.Viewer('cesium-container')setMapStyleByBingMapHandler()}// 3、加载bingmapfunction setMapStyleByBingMapHandler() {// Cesium.BingMapsStyle.AERIAL : String 影像地图// Cesium.BingMapsStyle.AERIAL_WITH_LABELS : String 带路网的影像// Cesium.BingMapsStyle.COLLINS_BART : String Collins Bart imagery.// Cesium.BingMapsStyle.ORDNANCE_SURVEY : String Ordnance Survey imagery// Cesium.BingMapsStyle.ROAD : String 矢量路网图viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({url: '',mapStyle: Cesium.BingMapsStyle.AERIAL,key: 'AhrJDRCi6VfUJWMk-_eZNGTfDSddoQfoUGRaf1PJg3KPejm6W3H0kjdhJFgIV948', //由BingMap官网申请的密钥}))}</script></body></html>
4、加载地形服务
效果
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>设置地图风格</title><link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /><scripttype="text/javascript"src="./public/Build/Cesium/Cesium.js"></script><style>* {margin: 0;padding: 0;}html,body,#cesium-container {width: 100%;height: 100%;}</style></head><body><div id="cesium-container" /><script>let viewer = nullwindow.onload = function () {viewer = new Cesium.Viewer('cesium-container')setTerrainServiceHandler()}// 5、加载地形服务function setTerrainServiceHandler() {setViewerViewByParamsHandler({x: -1206939.1925299785,y: 5337998.241228442,z: 3286279.2424502545,heading: 1.4059101895600987,pitch: -0.20917672793046682,roll: 2.708944180085382e-13,})viewer.terrainProvider = new Cesium.CesiumTerrainProvider({url: '/realspace/services/3D-dixingyingxiang/rest/realspace/datas/DatasetDEM',isSct: true, //地形服务源自SuperMap iServer发布时需设置isSct为true})}// 根据坐标等参数设置当前场景的视角function setViewerViewByParamsHandler({x, y, z, heading, pitch, roll }) {viewer.scene.camera.setView({destination: new Cesium.Cartesian3(x, y, z),orientation: {heading,pitch,roll,},})}</script></body></html>
5、加载supermap影像服务
效果
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>设置地图风格</title><link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /><scripttype="text/javascript"src="./public/Build/Cesium/Cesium.js"></script><style>* {margin: 0;padding: 0;}html,body,#cesium-container {width: 100%;height: 100%;}</style></head><body><div id="cesium-container" /><script>let viewer = nullwindow.onload = function () {viewer = new Cesium.Viewer('cesium-container')setSuperMapImageryHandler()}// 6、添加supermap影像服务function setSuperMapImageryHandler() {// const layer = viewer.imageryLayers.addImageryProvider(// new Cesium.SuperMapImageryProvider({//url: '/realspace/services/3D-HuanJingJianCe-2/rest/realspace/datas/rs0300@%E6%88%BF%E5%B1%B1', //影像服务的地址// })// )const layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({url: 'http://{s}/realspace/services/3D-dixingyingxiang/rest/realspace/datas/MosaicResult',subdomains: [''],}))flyToHandler({obj: layer,duration: 2,maximumHeight: 100,})}// 飞到指定的实体、图层等function flyToHandler({obj, duration, maximumHeight }) {viewer.flyTo(obj, {duration: duration || 1, // 飞行的持续时间maximumHeight: maximumHeight || 10, // 飞行中的最大高度// offset: new Cesium.HeadingPitchRange(heading, pitch, range) // 在以目标为中心的局部“东-北-上”参考系中，距离目标的偏移量})}</script></body></html>
6、添加由supermap iserver上发布的s3m服务
效果
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>设置地图风格</title><link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /><scripttype="text/javascript"src="./public/Build/Cesium/Cesium.js"></script><style>* {margin: 0;padding: 0;}html,body,#cesium-container {width: 100%;height: 100%;}</style></head><body><div id="cesium-container" /><script>let viewer = nullwindow.onload = function () {viewer = new Cesium.Viewer('cesium-container')setS3MServiceHandler()}// 7、添加由supermap iserver上发布的s3m服务function setS3MServiceHandler() {// 第一种方式：通过open接口将整个场景打开，这种方法简单易操作且不易出现遗漏图层的情况viewer.scene.open('http://{s}/realspace/services/3D-NewCBD/rest/realspace',undefined,{subdomains: [''],})// 或者直接open： viewer.scene.open('/realspace/services/3D-NewCBD/rest/realspace')// 第二种方式：通过addS3MTilesLayerByScp接口进行添加，该方式的优势是，可以根据自己的需要选择部分图层添加到场景中，提高加载性能，但需要加载多图层的整个场景时，不如scene.open方便// const promise = scene.addS3MTilesLayerByScp(// 'http://localhost:8090/iserver/services/3D-test/rest/realspace/datas/zj/config',// {//name: 'base',//cacheKey: '123456', //三维缓存密钥，由SuperMap iServer设置和获取// }// )// promise.then(function (layer) {// layer.visible = true// })}</script></body></html>
7、添加MVT图层
效果
完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>设置地图风格</title><link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /><scripttype="text/javascript"src="./public/Build/Cesium/Cesium.js"></script><style>* {margin: 0;padding: 0;}html,body,#cesium-container {width: 100%;height: 100%;}</style></head><body><div id="cesium-container" /><script>let viewer = nullwindow.onload = function () {viewer = new Cesium.Viewer('cesium-container')setMVTServiceHandler()}// 8、添加MVT图层function setMVTServiceHandler() {// 在SuperMap桌面产品中将地图生成好的矢量瓦片地图通过SuperMap iServer发布成矢量瓦片或三维服务后， 在WebGL中利用接口addVectorTilesMap将MVT图层服务添加到场景中const mvtMap = viewer.scene.addVectorTilesMap({url: 'http://{s}/realspace/services/map-mvt-JingJinDiQuDiTu/restjsr/v1/vectortile/maps/%E4%BA%AC%E6%B4%A5%E5%9C%B0%E5%8C%BA%E5%9C%B0%E5%9B%BE',subdomains: [''], // 支持多个子域canvasWidth: 512,name: 'testMVT',viewer: viewer,})const layerReadyPromise = mvtMap.readyPromiseCesium.when(layerReadyPromise, function (data) {const bounds = mvtMap.rectangleviewer.scene.camera.setView({// 定位到指定的视角destination: new Cesium.Cartesian3.fromRadians((bounds.east + bounds.west) * 0.5,(bounds.north + bounds.south) * 0.5,10000),orientation: {heading: 0,roll: 0,},})const mapboxStyle = mvtMap.mapboxStylefor (let id in mapboxStyle.layers) {const layer = mapboxStyle.layers[id]if (layer.type === 'symbol') {mvtMap.setLayoutProperty(layer.id, 'text-max-width', 2) // 图层文本一行最多显示两个字，多了换行显示}}})}</script></body></html>
