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();
    });
}