cesium+天地图，实现三维地名，cesium三维地名，天地图地名，cesiumjs三维城市

demo在线预览、源码下载地址 https://3dname.cmap.cc/

---

cesium + 天地图三维服务接入代码示例

• 申请天地图（tdt官网demo）token http://lbs.tianditu.gov.cn/docs/#/sanwei/

• 申请cesium令牌token https://ion.cesium.com/signin/

• 代码为天地图官网示意

 let timelineShow = true;
    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID. //cesium令牌
    Cesium.Ion.defaultAccessToken = '你的key';
    const viewer = new Cesium.Viewer('cesiumContainer', {
        timeline: timelineShow,//是否显示时间轴
        animation: true,//是否创建动画小器件，左下角仪表
        skyAtmosphere: new Cesium.SkyAtmosphere(),  // 大气外光圈
        // terrainProvider : Cesium.createWorldTerrain({
        //     requestWaterMask: true//水波纹开启
        // })
    });


    // viewer.cesiumWidget.creditContainer.style.display = "none"; // 去除logo

    // viewer.extend(Cesium.viewerCesiumInspectorMixin); //打开页面指示器
    viewer.scene.debugShowFramesPerSecond = true; //帧数显示

    if (timelineShow){
        //修改cesium默认的clock时间从utc时间到系统时间
        const DateTimeFormatter = (datetime, viewModel, ignoredate) => {
            let julianDT = new Cesium.JulianDate();
            Cesium.JulianDate.addHours(datetime, 8, julianDT);
            let gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT);
            let objDT;
            if (ignoredate)
                objDT = '';
            else {
                objDT = new Date(gregorianDT.year, gregorianDT.month - 1, gregorianDT.day);
                objDT = gregorianDT.year + '年' + objDT.toLocaleString('zh-cn', {month: 'short'}) + gregorianDT.day + '日';
                if (viewModel || gregorianDT.hour + gregorianDT.minute === 0)
                    return objDT;
                objDT += ' '
            }
            return objDT + gregorianDT.hour + ":" + gregorianDT.minute + ":" + gregorianDT.second;
        };
        const TimeFormatter = (time, viewModel) => {
            return DateTimeFormatter(time, viewModel, true)
        };
        viewer.animation.viewModel.dateFormatter = DateTimeFormatter;
        viewer.animation.viewModel.timeFormatter = TimeFormatter;
        viewer.timeline.makeLabel = DateTimeFormatter;
    }
    const token = '你的key'//天地图token
    // 服务域名
    const tdtUrl = 'https://t{s}.tianditu.gov.cn/';
    // 服务负载子域
    const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
    //天地图影像注记（省市区、地方名称标注图）
    // let tdtimganourl = "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile"
    //     + "&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}"
    //     + "&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg"
    //     + "&tk=" + token;
    // let tdtannoimageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    //     url: tdtimganourl,
    //     layer: "tdtimganoLayer",
    //     style: "default",
    //     format: "image/jpeg",
    //     tileMatrixSetID: "GoogleMapsCompatible",
    //     show: true
    // });
    // viewer.imageryLayers.addImageryProvider(tdtannoimageryProvider)//初始添加到cesium图层上;

    // // 叠加影像服务
    // const imgMap = new Cesium.UrlTemplateImageryProvider({
    //     url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
    //     subdomains: subdomains,
    //     tilingScheme: new Cesium.WebMercatorTilingScheme(),
    //     maximumLevel: 18
    // });
    // viewer.imageryLayers.addImageryProvider(imgMap);
    //
    // 叠加国界服务
    const iboMap = new Cesium.UrlTemplateImageryProvider({
        url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
        subdomains: subdomains,
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 10
    });
    viewer.imageryLayers.addImageryProvider(iboMap);
    //
    // // 叠加地形服务
    // const terrainUrls = new Array();
    //
    // for (let i = 0; i < subdomains.length; i++) {
    //     const url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?T=elv_c&tk=' + token;
    //     terrainUrls.push(url);
    // }
    // const provider = new Cesium.GeoTerrainProvider({
    //     urls: terrainUrls
    // });
    //
    // viewer.terrainProvider = provider;

    // 叠加三维地名服务
    const wtfs = new Cesium.GeoWTFS({
        viewer,
        subdomains: subdomains,
        metadata: {
            boundBox: {
                minX: -180,
                minY: -90,
                maxX: 180,
                maxY: 90
            },
            minLevel: 1,
            maxLevel: 20
        },
        aotuCollide: true, //是否开启避让
        collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左
        serverFirstStyle: true, //服务端样式优先
        labelGraphics: {
            font: "28px sans-serif",
            fontSize: 28,
            fillColor: Cesium.Color.WHITE,
            scale: 0.5,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 5,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            showBackground: false,
            backgroundColor: Cesium.Color.RED,
            backgroundPadding: new Cesium.Cartesian2(10, 10),
            horizontalOrigin: Cesium.HorizontalOrigin.MIDDLE,
            verticalOrigin: Cesium.VerticalOrigin.TOP,
            eyeOffset: Cesium.Cartesian3.ZERO,
            pixelOffset: new Cesium.Cartesian2(0, 8)
        },
        billboardGraphics: {
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            eyeOffset: Cesium.Cartesian3.ZERO,
            pixelOffset: Cesium.Cartesian2.ZERO,
            alignedAxis: Cesium.Cartesian3.ZERO,
            color: Cesium.Color.WHITE,
            rotation: 0,
            scale: 1,
            width: 18,
            height: 18
        }
    });

    //三维地名服务，使用wtfs服务
    wtfs.getTileUrl = function () {
        return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&tk=' + token;
    }

    wtfs.getIcoUrl = function () {
        return tdtUrl + 'mapservice/GetIcon?id={id}&tk=' + token;
    }

    wtfs.initTDT(
        [
            {"x": 6, "y": 1, "level": 2, "boundBox": {"minX": 90, "minY": 0, "maxX": 135, "maxY": 45}}, {
            "x": 7,
            "y": 1,
            "level": 2,
            "boundBox": {"minX": 135, "minY": 0, "maxX": 180, "maxY": 45}
        }, {"x": 6, "y": 0, "level": 2, "boundBox": {"minX": 90, "minY": 45, "maxX": 135, "maxY": 90}}, {
            "x": 7,
            "y": 0,
            "level": 2,
            "boundBox": {"minX": 135, "minY": 45, "maxX": 180, "maxY": 90}
        }, {"x": 5, "y": 1, "level": 2, "boundBox": {"minX": 45, "minY": 0, "maxX": 90, "maxY": 45}}, {
            "x": 4,
            "y": 1,
            "level": 2,
            "boundBox": {"minX": 0, "minY": 0, "maxX": 45, "maxY": 45}
        }, {"x": 5, "y": 0, "level": 2, "boundBox": {"minX": 45, "minY": 45, "maxX": 90, "maxY": 90}}, {
            "x": 4,
            "y": 0,
            "level": 2,
            "boundBox": {"minX": 0, "minY": 45, "maxX": 45, "maxY": 90}
        }, {"x": 6, "y": 2, "level": 2, "boundBox": {"minX": 90, "minY": -45, "maxX": 135, "maxY": 0}}, {
            "x": 6,
            "y": 3,
            "level": 2,
            "boundBox": {"minX": 90, "minY": -90, "maxX": 135, "maxY": -45}
        }, {"x": 7, "y": 2, "level": 2, "boundBox": {"minX": 135, "minY": -45, "maxX": 180, "maxY": 0}}, {
            "x": 5,
            "y": 2,
            "level": 2,
            "boundBox": {"minX": 45, "minY": -45, "maxX": 90, "maxY": 0}
        }, {"x": 4, "y": 2, "level": 2, "boundBox": {"minX": 0, "minY": -45, "maxX": 45, "maxY": 0}}, {
            "x": 3,
            "y": 1,
            "level": 2,
            "boundBox": {"minX": -45, "minY": 0, "maxX": 0, "maxY": 45}
        }, {"x": 3, "y": 0, "level": 2, "boundBox": {"minX": -45, "minY": 45, "maxX": 0, "maxY": 90}}, {
            "x": 2,
            "y": 0,
            "level": 2,
            "boundBox": {"minX": -90, "minY": 45, "maxX": -45, "maxY": 90}
        }, {"x": 0, "y": 1, "level": 2, "boundBox": {"minX": -180, "minY": 0, "maxX": -135, "maxY": 45}}, {
            "x": 1,
            "y": 0,
            "level": 2,
            "boundBox": {"minX": -135, "minY": 45, "maxX": -90, "maxY": 90}
        }, {"x": 0, "y": 0, "level": 2, "boundBox": {"minX": -180, "minY": 45, "maxX": -135, "maxY": 90}}]);

    // 将三维球定位到中国
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 15000000),
        orientation: {
            heading: Cesium.Math.toRadians(348.4202942851978),
            pitch: Cesium.Math.toRadians(-89.74026687972041),
            roll: Cesium.Math.toRadians(0)
        },
        complete: function callback() {
            // 定位完成之后的回调函数
        }
    });

教程参考   https://blog.csdn.net/qq_38000851/article/details/130661151