cesium控件：使用天地图替换掉cesium自带的geocode，并实现聚合

最新推荐文章于 2024-05-09 15:20:44 发布
最新推荐文章于 2024-05-09 15:20:44 发布
阅读量1.5k 收藏 8
点赞数 1
分类专栏： cesium 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45733494/article/details/125913593
版权

 

 

需要了解的两个案例：

geocode沙盒案例：Cesium Sandcastle

cluster沙盒案例：Cesium Sandcastle

1.使用天地图替换掉cesium自带的geocode，并实现聚合

天地图API

申请天地图浏览器端key

 

2.关键词搜索

关键词搜索的响应(resultType)有五种类型，目前只碰到三种

resultType=1

resultType=2

resultType=3

代码：

function TDTGeocoder(){}
TDTGeocoder.prototype.geocode=function(input){
    // 地理编码
    // let endpoint='https://api.tianditu.gov.cn/geocoder'
    // let resource = new Cesium.Resource({
    //  url: endpoint,
    //  queryParameters: {
    //      "format": "json",
    //      "ds":JSON.stringify({"keyWord":input}),//[object object]转字符串
    //      "tk":"6c981203185b9bc35cbbd42b74e7727d"
    //  },
    // })
    // return resource.fetchJson().then(function (results) {
    //  console.log(results)
    //  let location=results.location//获取经纬度
    //  let lon=location.lon
    //  let lat=location.lat
    //  return {
    //      displayName: input,
    //      // 没有考虑半球情况
    //      destination: Cesium.Rectangle.fromDegrees(
    //          lon+0.05,//west
    //          lat-0.05,//south
    //          lon+0.05,//east
    //          lat+0.05//north
    //      ),
    //  };
    // });


    // 关键词搜索
    let Cesium=window.Cesium
    let endpoint2='https://api.tianditu.gov.cn/search'
    let postStr={
        keyWord:input,
        level:10,
        mapBound:"-180,-90,180,90",//左下，右上
        queryType:1,
        count:50,
        start:0
    }
    let resource2 = new Cesium.Resource({
        url: endpoint2,
        queryParameters: {
            "format": "json",
            "postStr":JSON.stringify(postStr),//[object object]转字符串
            "tk":"6c981203185b9bc35cbbd42b74e7727d"
        },
    })
    return resource2.fetchJson().then(function (results) {
        console.log(results)
        // 天地图地名搜索有5种返回类型
        let resultType=results.resultType
        if(resultType==1){
            let pois=results.pois
            if(!pois){
                return
            }
            return pois.map((poi)=>{
                let lonlat=poi.lonlat
                let lon=Number(lonlat.split(" ")[0])
                let lat=Number(lonlat.split(" ")[1])
                return{
                    displayName:poi.name,
                    destination:Cesium.Rectangle.fromDegrees(
                        lon+0.05,//west
                        lat-0.05,//south
                        lon+0.05,//east
                        lat+0.05//north
                    )
                }
            })
        }else if(resultType==2){//统计
            let statistics=results.statistics
            let priorityCitys=statistics.priorityCitys
            if(!priorityCitys){
                return
            }
            return priorityCitys.map((city)=>{
                let lon=Number(city.lon)
                let lat=Number(city.lat)
                return{
                    displayName:input+","+city.name,
                    destination:Cesium.Rectangle.fromDegrees(
                        lon+0.05,//west
                        lat-0.05,//south
                        lon+0.05,//east
                        lat+0.05//north
                    )
                }
            })
        }else if(resultType==3){//行政区
            let area=results.area
            if(!area){
                return
            }
            let bound=area.bound
            return{
                displayName:area.name,
                destination:Cesium.Rectangle.fromDegrees(
                    bound.split(",")[0],
                    bound.split(",")[1],
                    bound.split(",")[2],
                    bound.split(",")[3],
                )
            }
        }else{//4和5没有测试到
            return
        }
        
    })
}

3.POI点+聚合的实现

关键步骤：

将坐标信息转换为DataSource

查阅文档，可以法线CustomDataSource类可以加载一组entities作为数据源

代码：

 let dataSource = new Cesium.CustomDataSource()
    // console.log(collection)
    collection.map((item)=>{
        dataSource.entities.add({
            position:Cesium.Cartesian3.fromDegrees(item.lon,item.lat),
            // billboard:{
            //     image:'image/location.png',
            // },
            point:{
                color:new Cesium.Color(93/255,200/255,205/255,1.0),
                outlineWidth:3,
                outlineColor:Cesium.Color.WHITE,
                pixelSize:10,
                // heightReference:Cesium.HeightReference.RELATIVE_TO_GROUND
                heightReference:Cesium.CLAMP_TO_GROUND,
                disableDepthTestDistance:15000000
            },
            label:{
                text:item.name,
                font:'12px',
                fillColor:new Cesium.Color(255/255,118/255,0/255,1.0),
                outlineWidth:2,
                outlineColor:new Cesium.Color(255/255,180/255,115/255,1.0),
                showBackground:true,
                backgroundColor:new Cesium.Color(0.2,0.2,0.2,0.8),
                backgroundPadding:new Cesium.Cartesian2(5,10),
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                horizontalOrigin :Cesium.HorizontalOrigin.CENTER
            }
        })
    })
    viewer.dataSources.add(dataSource)

4.完整代码

新建一个js文件

function TDTGeocoder(){}
TDTGeocoder.prototype.geocode=function(input){
    // 地理编码
    // let endpoint='https://api.tianditu.gov.cn/geocoder'
    // let resource = new Cesium.Resource({
    // 	url: endpoint,
    // 	queryParameters: {
    // 		"format": "json",
    // 		"ds":JSON.stringify({"keyWord":input}),//[object object]转字符串
    // 		"tk":"6c981203185b9bc35cbbd42b74e7727d"
    // 	},
    // })
    // return resource.fetchJson().then(function (results) {
    // 	console.log(results)
    // 	let location=results.location//获取经纬度
    // 	let lon=location.lon
    // 	let lat=location.lat
    // 	return {
    // 		displayName: input,
    // 		// 没有考虑半球情况
    // 		destination: Cesium.Rectangle.fromDegrees(
    // 			lon+0.05,//west
    // 			lat-0.05,//south
    // 			lon+0.05,//east
    // 			lat+0.05//north
    // 		),
    // 	};
    // });

    // 关键词搜索
    let Cesium=window.Cesium
    let endpoint2='https://api.tianditu.gov.cn/search'
    let postStr={
        keyWord:input,
        level:11,
        mapBound:"-180,-90,180,90",//左下，右上
        queryType:1,
        count:50,
        start:0
    }
    let resource2 = new Cesium.Resource({
        url: endpoint2,
        queryParameters: {
            "format": "json",
            "postStr":JSON.stringify(postStr),//[object object]转字符串
            "tk":"6c981203185b9bc35cbbd42b74e7727d"
        },
    })
    return resource2.fetchJson().then(function (results) {
        console.log(results)
        // 天地图地名搜索有5种返回类型
        let resultType=results.resultType
        if(resultType==1){
            let pois=results.pois
            if(!pois){
                return
            }
            let collection=[]
            pois.map((poi)=>{
                let lonlat=poi.lonlat
                let lon=Number(lonlat.split(" ")[0])
                let lat=Number(lonlat.split(" ")[1])
                collection.push({lon:lon,lat:lat,name:poi.name})
            })
            setPoint(collection)
            return pois.map((poi)=>{
                let lonlat=poi.lonlat
                let lon=Number(lonlat.split(" ")[0])
                let lat=Number(lonlat.split(" ")[1])
                return{
                    displayName:poi.name,
                    destination:Cesium.Rectangle.fromDegrees(
                        lon+0.05,//west
                        lat-0.05,//south
                        lon+0.05,//east
                        lat+0.05//north
                    )
                }
            })
        }else if(resultType==2){//统计
            let statistics=results.statistics
            let priorityCitys=statistics.priorityCitys
            if(!priorityCitys){
                return
            }
            let collection=[]
            priorityCitys.map((city)=>{
                let lon=Number(city.lon)
                let lat=Number(city.lat)
                collection.push({lon:lon,lat:lat,name:input+","+city.name})
            })
            setPoint(collection)
            return priorityCitys.map((city)=>{
                let lon=Number(city.lon)
                let lat=Number(city.lat)
                return{
                    displayName:input+","+city.name,
                    destination:Cesium.Rectangle.fromDegrees(
                        lon+0.05,//west
                        lat-0.05,//south
                        lon+0.05,//east
                        lat+0.05//north
                    )
                }
            })
        }else if(resultType==3){//行政区
            let area=results.area
            if(!area){
                return
            }
            let bound=area.bound
            let lonlat=area.lonlat
            let lon=Number(lonlat.split(",")[0])
            let lat=Number(lonlat.split(",")[1])
            let collection=[]
            collection.push({lon:lon,lat:lat,name:area.name})
            setPoint(collection)
            return{
                displayName:area.name,
                destination:Cesium.Rectangle.fromDegrees(
                    bound.split(",")[0],
                    bound.split(",")[1],
                    bound.split(",")[2],
                    bound.split(",")[3],
                )
            }
        }else{//4和5没有测试到
            return
        }
        
    })
}
let lastDataSource
function setPoint(collection){
    let Cesium=window.Cesium
    let viewer=window.viewer
    if(lastDataSource){
        viewer.dataSources.removeAll()
        lastDataSource=undefined
    }
    //CustomDataDource可用于手动管理一组实体的 DataSource 实现。
    let dataSource = new Cesium.CustomDataSource()
    // console.log(collection)
    collection.map((item)=>{
        dataSource.entities.add({
            position:Cesium.Cartesian3.fromDegrees(item.lon,item.lat),
            // billboard:{
            //     image:'image/location.png',
            // },
            point:{
                color:new Cesium.Color(93/255,200/255,205/255,1.0),
                outlineWidth:3,
                outlineColor:Cesium.Color.WHITE,
                pixelSize:10,
                // heightReference:Cesium.HeightReference.RELATIVE_TO_GROUND
                heightReference:Cesium.CLAMP_TO_GROUND,
                disableDepthTestDistance:15000000
            },
            label:{
                text:item.name,
                font:'12px',
                fillColor:new Cesium.Color(255/255,118/255,0/255,1.0),
                outlineWidth:2,
                outlineColor:new Cesium.Color(255/255,180/255,115/255,1.0),
                showBackground:true,
                backgroundColor:new Cesium.Color(0.2,0.2,0.2,0.8),
                backgroundPadding:new Cesium.Cartesian2(5,10),
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                horizontalOrigin :Cesium.HorizontalOrigin.CENTER
            }
        })
    })
    viewer.dataSources.add(dataSource)
    dataSource.clustering.enabled=true//开启聚合
    dataSource.clustering.pixelRange=10
    dataSource.clustering.minimumClusterSize=2
    lastDataSource=dataSource
    let pinBuilder=new Cesium.PinBuilder()//自定义聚合图标
    // fromText(text,color,size)
    let pin50 = pinBuilder.fromText("50+", new Cesium.Color(93/255,200/255,205/255,1.0), 48).toDataURL()
    let pin40=pinBuilder.fromText("40+",new Cesium.Color(93/255,200/255,205/255,1.0), 48).toDataURL()
    let pin30 = pinBuilder.fromText("30+", new Cesium.Color(93/255,200/255,205/255,1.0), 48).toDataURL();
    let pin20 = pinBuilder.fromText("20+", new Cesium.Color(93/255,200/255,205/255,1.0), 48).toDataURL();
    let pin10 = pinBuilder.fromText("10+", new Cesium.Color(93/255,200/255,205/255,1.0), 48).toDataURL();
    // 聚合个数小于10的pin
    let singleDigitPins = new Array(8);
    for (let i = 0; i < singleDigitPins.length; ++i) {
        singleDigitPins[i] = pinBuilder
        .fromText(`${i + 2}`, new Cesium.Color(93/255,200/255,205/255,1.0), 48)
        .toDataURL();
    }
    dataSource.clustering.clusterEvent.addEventListener((clusteredEntities,cluster)=>{
        // clusteredEntities聚合点处的entity数组
        // cluster 包含了该聚合点的billboard,label和point样式
        cluster.label.show = false;
        cluster.billboard.show = true;
        cluster.billboard.id = cluster.label.id;
        cluster.billboard.verticalOrigin =Cesium.VerticalOrigin.BOTTOM;
        if (clusteredEntities.length >= 50) {
            cluster.billboard.image = pin50;
        } else if (clusteredEntities.length >= 40) {
            cluster.billboard.image = pin40;
        } else if (clusteredEntities.length >= 30) {
            cluster.billboard.image = pin30;
        } else if (clusteredEntities.length >= 20) {
            cluster.billboard.image = pin20;
        } else if (clusteredEntities.length >= 10) {
            cluster.billboard.image = pin10;
        } else {
            cluster.billboard.image =singleDigitPins[clusteredEntities.length - 2];
        }
    })
}
export default TDTGeocoder

new TDTGeocoder()替换掉viewer的默认geocode

 

武仙座DQ
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
【超图+CESIUM】【基础API使用示例】03、超图｜CESIUM - 初始化场景的配置项使用简单介绍
汪同学丶的博客
02-24 1632
超图初始化场景时的基础配置项介绍：导航、地图模式、全屏按钮、聚焦框等
Geocoder和Cesium自定义geocoder
bcbobo21cn的专栏
03-14 467
Cesium自定义geocoder；
Cesium--加载天地图
最新发布
JessicaLi的博客
05-09 682
背景：vue-admin-temlate + cesium +天地图。1,天地图使用方法（点击开发资源即可看到此页面）最要为了获取key （后面使用是token）步骤一：申请成为天地图开发者，创建应用。步骤二：cesium加载天地图。2,点击控制台-登录账号。
88.（cesium篇）cesium聚合图.rar
06-28
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“88.（cesium篇）cesium聚合图”。如下载有问题，可联系博主。 解压密码：cesium
cesium中添加天地图底图
tjx1997的博客
08-16 2025
天地图主要使用的是WGS84坐标系，并提供了矢量、影像、地形等多种底图。可以利用cesium的WebMapTileServiceImageryProvider完成天地图底图的加载。
Cesium + 天地图 本地部署方案
DoubleLift_DSX的博客
11-26 1102
近年来，地理信息系统（GIS）的应用越来越广泛，而Cesium和天地图作为GIS领域的两个重要工具，相结合的本地部署方案备受关注。本文将介绍如何在本地环境中搭建Cesium与天地图的集成方案，为地理可视化提供更灵活、定制化的解决方案。
cesium 调用天地图的两种方式
liyan_gis的专栏
05-24 6347
Cesium调用天地图可以使用wmts方式加载，还可以使用url模板的方式加载，效果如图所示： 本文以天地图影像为例，如果想加矢量图或者地形晕圈图，可以私信我。 方式一：wmts的方式 看下官网的说明： 提供由兼容WMTS 1.0.0的服务器提供的平铺图像。此提供程序支持HTTP KVP编码和RESTful GetTile请求，但不支持SOAP编码。 下面标出了比较重要的构造参数的参数 下面是具体代码： viewer.imageryLayers.addImageryPr...
Cesium加载天地图
qq_26610239的博客
11-03 3164
Cesium加载天地图。
slider.rar cesium加载天地图实现地图卷帘
07-21
在这个主题中，我们将深入探讨如何利用Cesium加载天地图，并实现地图卷帘功能。 首先，我们要明白“天地图”是中国的一个国家级地理信息公共服务平台，它提供了丰富的地图服务，包括基础地图、地形数据、卫星影像等...
70.（cesium篇）cesium接入天地图影像与注记（经纬度）.zip
12-22
在本教程中，我们将深入探讨如何使用Cesium库来接入天地图的影像和注记，并在Web应用中显示经纬度信息。Cesium是一个强大的开源JavaScript库，专为创建交互式的3D地球视图而设计。天地图是中国国家基础地理信息中心...
89.（cesium篇）cesium聚合图（自定义图片）.rar
06-29
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“89.（cesium篇）cesium聚合图（自定义图片）”。如下载有问题，可联系博主。 解压密码：cesium
69.（cesium篇）cesium接入天地图影像（经纬度）.zip
12-21
【cesium篇】cesium接入天地图影像（经纬度） Cesium是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式3D地球视图。它提供了丰富的地理空间数据支持，可以用于开发各种地理信息系统（GIS）应用。在本篇...
Cesium——天地图服务调用流程&文档&申请Key、token&代码
weixin_46127993的博客
01-05 3357
天地图是中国国家基础地理信息系统，由中国测绘地理信息局和国家地理信息公共服务平台共同开发和运营。它提供了包括地图数据、地理编码、路径规划、地理搜索等多项地理信息服务。天地图的目标是为各行业提供高质量、全面的地理信息数据和解决方案，支持政府决策、城市规划、资源管理、环境保护、交通导航、物流配送等领域的应用。天地图在国内广泛应用于政府机构、企事业单位以及个人用户的地理信息查询与分析工作中。
Cesium 实战 00 - Cesium 加载天地图影像图示例
linzi19900517的博客
10-10 2397
Cesium 加载天地图资源。
【cesium】点聚合和点发散
Wangzx的博客
06-09 1989
该功能包含两个部分：1.加载点集合：点集合数据源可能来源于.kml、.geojson等文件或源自数据库的api接口；2.创建聚合效果：自定义聚合点样式和聚合数量；
cesium实现点聚合
weixin_55223296的博客
09-27 1600
cesium实现点聚合功能代码如下，第一个代码定义变量以及生成随机位置的点，第二个对生成的点进行聚合功能，聚合对鼠标滚轮事件进行监听，根据点位的多少展示不同的聚合效果，对于图片的目录统一配置在public的static目录下。
Cesium 点位聚合
一路走一路学，总会不落后
02-04 1206
这里使用的是 cesium 沙盒演示中自带的数据进行实现。根据得到的 DataSource 对象配置聚合。添加到 viewer.dataSources。
在 Cesium 中添加天地图的影像底图
weixin_44942791的博客
08-04 630
在上述代码中，imageryProvider 指定了使用 Cesium.WebMapTileServiceImageryProvider 类型作为图像提供者，并设置了相关参数来连接天地图的影像服务。请注意，上述示例使用的是天地图影像服务的 URL，如果该 URL 不可用或您希望使用其他地图服务，可以更改 url、layer、style、format 和 tileMatrixSetID 参数。确保您有合法的访问权限和正确的服务配置。运行 HTML 文件，你将在 Cesium 场景中看到天地图的影像底图。
使用天地图替换掉cesium自带的geocode，代码示例
02-21
可以使用以下示例代码：// 创建天地图geocoder var tdtGeocoder = new Cesium.Geocoder({ ... key : '您申请的key' ...// 将cesium自带的geocoder替换为天地图geocoder Cesium.Geocoder.geocoder = tdtGeocoder;

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值