Cesium：结合天地图实现中文定位

运行效果

实现

cesium原生自带的geocoder使用的Bing地图，国内很多地方搜索不到，而且会出现英文检索。
网上说可以改写geocoder，我暂时还做不到= =
于是我把之前得控件隐藏了，自己写了一个控件，结合天地图的API，实现了中文定位。

代码

<div id="map-3d"><div class="multiple_search" id="multiple_search"><input type="text" class="search_input" id="search-input" placeholder="请输入地名"><div class="search_button" id="search-button"></div></div>
</div>

.multiple_search {height: 32px;width: 290px;position: absolute;top: 8px;right: 85px;overflow: hidden;
}.multiple_search .search_input {border-radius: 5px;height: 30px;width: 258px;border: 1px solid #303336;background-color: rgba(48, 51, 54, .5);font-size: 15px;position: absolute;top: 0;left: 258px;text-indent: 10px;padding: 0;color: #fff;
}.multiple_search .search_input::-webkit-input-placeholder { /*Webkit browsers*/color: #fff;
}.multiple_search .search_input:-moz-placeholder { /*Mozilla Firefox 4 to 8*/color: #fff;
}.multiple_search .search_input::moz-placeholder { /*Mozilla Firefox 19+*/color: #fff;
}.multiple_search .search_input:-ms-input-placeholder { /*Internet Explorer 10+*/color: #fff;
}.multiple_search .search_input:focus {outline: none;border: 1px solid #303336;background-color: rgba(48, 51, 54, .5);
}.multiple_search .search_button {border-radius: 5px;height: 32px;width: 32px;background: #303336 url(../../Img/home/搜索.png);border: 1px solid #303336;background-size: cover;position: absolute;right: 0;top: 0;z-index: 999;cursor: pointer;
}.multiple_search .search_button:hover {color: #fff;fill: #fff;background: #48b url(../../Img/home/搜索.png);background-size: cover;border-color: #aef;box-shadow: 0 0 8px #fff;
}

function initSearch() {let $button = $('#search-button');let $input = $('#search-input');let $search = $('#multiple_search');$button.on({mouseenter: function f() {$input.animate({left: 0}, 700);if (parseInt($input.css('left')) !== 0) {$input.val('');}},click: function f1() {let place = $input.val();if (place === '') {alert('请输入位置！')} else {$.ajax({url: `http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"${place}"}&tk=${天地图key}`,type: 'get',async: false,success: function (response) {let result = JSON.parse(response).location;if (result === undefined) {alert('无法获取' + place + '地理位置！');} else {viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(result.lon, result.lat, 40000),duration: 0});}}});}}});$search.mouseleave(function () {$input.animate({left: 258}, 700);$input.blur();});
}

Cesium：结合天地图实现中文定位相关推荐

Cesium调用天地图的新问题
在开发CSTK 的过程中,尝试在Cesium上加载天地图,这个过程在2021年的年中已经解决了. 使用了网上的代码 viewer = new Viewer("cesiumContainer& ...
Cesium 添加天地图三维地形
天地图三维地址地址列表地址三维地形服务 //t{s}.tianditu.gov.cn/mapservice/swdx?T=elv_c&tk={key} 三维地名服务 //t{s}.tia ...
基于cesium实现城市查询并定位
思路:利用高德地图的搜索插件(PlaceSearch)获取索要搜索的城市的经纬度进行cesium的定位效果演示截图: - HTML代码 <div id="searchPostions ...
cesium mars3d天地图标注置顶
如图所示,文字跟道路在影像文件顶部 1. cesium三维: 必须得重新添加一下标注文件,并设置属性天地图标注: var tileLayer = new mars3d.layer.TdtLayer ...
cesium调用天地图服务
全球矢量地图服务 var viewer = new Cesium.Viewer("cesiumContainer", {animation: false, //是否显示动画控件 b ...
Cesium调用天地图服务【亲测可用】
废话不多说直接上代码 var viewer = new Cesium.Viewer("cesiumContainer", {animation: false, //是否显示动画控件 ...
最新版Cesium使用天地图三维地形、地名服务
目录 1.项目地址 2.实现效果 3.实现方法 1.项目地址可直接运行. https://github.com/zhengjie9510/cesium-tdt 2.实现效果 3.实现方法参考博客修 ...
利用cesium模拟台风移动路径——以利奇马台风为例
根据cesium官网示例(https://sandcastle.cesium.com/?src=Interpolation.html)改造为台风移动轨迹,台风数据从台风路径实时发布系统获取.模拟台风移 ...
1.（cesium之家）cesium加载接入天地图
该示例已无法正常调用,请查看 69.(cesium篇)cesium接入天地图影像(经纬度) 文章末尾处提供保证可运行完整代码包,运行如有问题,可"私信"博主. 效果如下所示: 下面 ...
Cesium设置所在定位位置
最新在项目中客户提出了一个需求,将Cesium定位到中国地图上,在此,总结一下目前所实现的方法: 在Cesium中是可以打开默认定标和视角的,跟谷歌地球一样,同时注意Cesium使用的坐标系是从地心坐 ...

Cesium：结合天地图实现中文定位

运行效果

实现

代码

Cesium：结合天地图实现中文定位相关推荐

最新文章

热门文章