Javascript 使用Cesium Js通过搜索框查找对象
我正在使用铯，我想做一个非常简单的手术。我想通过在右上角的搜索栏中键入其名称来查找我创建的对象。 让我们考虑一下<<代码>点>代码>教程中的“代码>沙山城堡/代码>：Javascript 使用Cesium Js通过搜索框查找对象,javascript,cesium,Javascript,Cesium,我正在使用铯，我想做一个非常简单的手术。我想通过在右上角的搜索栏中键入其名称来查找我创建的对象。 让我们考虑一下代码>教程中的“代码>沙山城堡/代码>： function addPoint() { Sandcastle.declare(addPoint); viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), name : 'POINT N
function addPoint() {
Sandcastle.declare(addPoint);
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
name : 'POINT NAME'
point : {
pixelSize : 10,
color : Cesium.Color.YELLOW
}
});
}
点名称我能够生成一个代码，其中我创建了一个包含10个点的czml文件。我现在可以在搜索栏上找到他们，只需输入他们的名字，并根据需要在地图上找到他们。这里有一个小代码来描述它：
/**
* This class is an example of a custom geocoder. It provides geocoding by searching inside a LabelCollection.
* @alias LabelCollectionGeocoder
* @constructor
*/
function LabelCollectionGeocoder() {
}
/**
* The function called to geocode using this geocoder service.
*
* @param {String} input The query to be sent to the geocoder service
* @returns {Promise<GeocoderResult[]>}
*/
LabelCollectionGeocoder.prototype.geocode = function (input) {
var searchtext = input;
var searchlist = [];
var gcLC = tax_labels;
var len = gcLC.length;
for (var i = 0; i < len; ++i) {
var l = gcLC.get(i);
if ( l.text.toLowerCase().indexOf( searchtext.toLowerCase() ) > -1 ) {
searchlist.push(l);
}
}
return Cesium.loadText("")
.then(function (results) {
var bboxDegrees;
return searchlist.map(function (resultObject) {
console.log(resultObject);
var lonlat = Cesium.Ellipsoid.WGS84.cartesianToCartographic(resultObject.position);
var heightmin = 10000;
var heightmax = 10000;
if (resultObject.distanceDisplayCondition.near) heightmin = resultObject.distanceDisplayCondition.near;
if (resultObject.distanceDisplayCondition.far) heightmax = resultObject.distanceDisplayCondition.far;
var horizdeg = Math.sqrt(.5*6371000*(heightmax+heightmin)/2)/111000;
console.log(horizdeg);
var nwlat = lonlat.latitude + Math.PI/180*horizdeg/2; if (nwlat > Math.PI/2) nwlat=(nwlat/Math.PI/2) % 1 * Math.PI/2;
var nwlon = lonlat.longitude + Math.PI/360*horizdeg; if (nwlon > Math.PI) nwlon=(nwlon/Math.PI - 1) % 1 * Math.PI;
var swlat = lonlat.latitude - Math.PI/180*horizdeg/2; if (swlat < -Math.PI/2) swlat=(swlat/Math.PI/2) % 1 * Math.PI/2;
var swlon = lonlat.longitude - Math.PI/360*horizdeg; if (swlon < -Math.PI) swlon=(swlon/Math.PI + 1) % 1 * Math.PI;
var carto = [
new Cesium.Cartographic(swlon, swlat, heightmin),
new Cesium.Cartographic(nwlon, nwlat, heightmax)
];
console.log(carto);
var recto = Cesium.Rectangle.fromCartographicArray(carto);
var returnObject = {
displayName: resultObject.text,
destination: recto
};
return returnObject;
});
});
};
var czml = [{
"id" : "document",
"name" : "CZML Point",
"version" : "1.0"
}, {
"id" : "point 0",
"name": "point 0",
"position" : {
"cartographicDegrees" : [17.0, 44.8, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
}, {
"id" : "point 1",
"name": "point 1",
"position" : {
"cartographicDegrees" : [49.9, 56.7, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
}, {
"id" : "point 2",
"name": "point 2",
"position" : {
"cartographicDegrees" : [17.0, 25.4, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
}, {
"id" : "point 3",
"name": "point 3",
"position" : {
"cartographicDegrees" : [9.6, 33.3, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
}, {
"id" : "point 4",
"name": "point 4",
"position" : {
"cartographicDegrees" : [21.0, 1.9, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
}, {
"id" : "point 5",
"name": "point 5",
"position" : {
"cartographicDegrees" : [49.3, 25.8, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
}, {
"id" : "point 6",
"name": "point 6",
"position" : {
"cartographicDegrees" : [4.6, 26.6, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
}, {
"id" : "point 7",
"name": "point 7",
"position" : {
"cartographicDegrees" : [19.8, 2.0, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
}, {
"id" : "point 8",
"name": "point 8",
"position" : {
"cartographicDegrees" : [6.1, 44.2, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
}, {
"id" : "point 9",
"name": "point 9",
"position" : {
"cartographicDegrees" : [50.6, 51.2, 0]
},
"point": {
"color": {
"rgba": [255, 255, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 0, 255]
},
"outlineWidth" : 4,
"pixelSize": 20
}
}];
var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: new LabelCollectionGeocoder()
});
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
var tax_labels = viewer.scene.primitives.add(new Cesium.LabelCollection() );
for (var i = 1; i < czml.length; i++) {
tax_labels.add( {position : Cesium.Cartesian3.fromDegrees(czml[i].position.cartographicDegrees[0], czml[i].position.cartographicDegrees[1]), text : czml[i].name, font : '15.75px sans-serif', distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10442450.000000,25000000.000000) });
}
/**
*此类是自定义地理编码器的示例。它通过在LabelCollection内搜索提供地理编码。
*@alias LabelCollectionGeocoder
*@constructor
*/
函数LabelCollectionGeocoder（）{
}
/**
*使用此geocoder服务调用geocode的函数。
*
*@param{String}输入要发送到地理编码器服务的查询
*@returns{Promise}
*/
LabelCollectionGeocoder.prototype.geocode=函数（输入）{
var searchtext=输入；
var searchlist=[]；
var gcLC=税务标签；
var len=gcLC.长度；
对于（变量i=0；i-1）{
searchlist.push（l）；
}
}
返回铯。loadText（“”）
.然后（函数（结果）{
变异程度；
返回searchlist.map（函数（resultObject）{
console.log（resultObject）；
var lonlat=铯椭球体。WGS84。直角坐标制图（结果对象位置）；
var heightmin=10000；
var heightmax=10000；
如果（resultObject.distanceDisplayCondition.near）heightmin=resultObject.distanceDisplayCondition.near；
如果（resultObject.distanceDisplayCondition.far）heightmax=resultObject.distanceDisplayCondition.far；
var horizdeg=数学sqrt（.5*6371000*（最大高度+最小高度）/2）/111000；
控制台日志（水平度）；
var nwlat=lonlat.lation+Math.PI/180*horizdeg/2；如果（nwlat>Math.PI/2）nwlat=（nwlat/Math.PI/2）%1*Math.PI/2；
var nwlon=lonlat.longitude+Math.PI/360*horizdeg；如果（nwlon>Math.PI）nwlon=（nwlon/Math.PI-1）%1*Math.PI；
var swlat=lonlat.lation-Math.PI/180*horizdeg/2；if（swlat<-Math.PI/2）swlat=（swlat/Math.PI/2）%1*Math.PI/2；
var swlon=lonlat.longitude-Math.PI/360*horizdeg；如果（swlon<-Math.PI）swlon=（swlon/Math.PI+1）%1*Math.PI；
var carto=[
新铯制图（swlon、swlat、heightmin），
新铯。制图（nwlon、nwlat、heightmax）
];
控制台日志（carto）；
var recto=制图阵列（carto）中的铯矩形；
var returnObject={
displayName:resultObject.text，
目的地：recto
};
返回对象；
});
});
};
变量czml=[{
“id”：“文件”，
“名称”：“CZML点”，
“版本”：“1.0”
}, {
“id”：“点0”，
“名称”：“点0”，
“职位”：{
“制图度”：[17.0,44.8,0]
},
“要点”：{
“颜色”：{
“rgba”：[255，255，255，255]
},
“大纲颜色”：{
“rgba”：[255,0,0,255]
},
“大纲宽度”：4，
“像素大小”：20
}
}, {
“id”：“第1点”，
“名称”：“第1点”，
“职位”：{
“制图度”：[49.9,56.7,0]
},
“要点”：{
“颜色”：{
“rgba”：[255，255，255，255]
},
“大纲颜色”：{
“rgba”：[255,0,0,255]
},
“大纲宽度”：4，
“像素大小”：20
}
}, {
“id”：“第2点”，
“名称”：“第2点”，
“职位”：{
“制图度”：[17.0,25.4,0]
},
“要点”：{
“颜色”：{
“rgba”：[255，255，255，255]
},
“大纲颜色”：{
“rgba”：[255,0,0,255]
},
“大纲宽度”：4，
“像素大小”：20
}
}, {
“id”：“第3点”，
“名称”：“第3点”，
“职位”：{
“制图度”：[9.6,33.3,0]
},
“要点”：{
“颜色”：{
“rgba”：[255，255，255，255]
},
“大纲颜色”：{
“rgba”：[255,0,0,255]
},
“大纲宽度”：4，
“像素大小”：20
}
}, {
“id”：“第4点”，
“名称”：“第4点”，
“职位”：{
“制图度”：[21.0,1.9,0]
},
“要点”：{
“颜色”：{
“rgba”：[255，255，255，255]
},
“大纲颜色”：{
“rgba”：[255,0,0,255]
},
“大纲宽度”：4，
“像素大小”：20
}
}, {
“id”：“第5点”，
“名称”：“第5点”，
“职位”：{
“制图度”：[49.3,25.8,0]
},
“要点”：{
“颜色”：{
“rgba”：[255，255，255，255]
},
“大纲颜色”：{
“rgba”：[255,0,0,255]
},
“大纲宽度”：4，
“像素大小”：20
}
}, {
“id”：“第6点”，
“名称”：“第6点”，
“职位”：{
“制图度”：[4.6,26.6,0]
},
“要点”：{
“颜色”：{
“rgba”：[255，255，255，255]
},
“大纲颜色”：{
“rgba”：[255,0,0,255]
},
“大纲宽度”：4，
“像素大小”：20
}
}, {
“id”：“第7点”，
“名称”：“第7点”，
“职位”：{
“制图度”：[19.8,2.0,0]
},
“要点”：{
“颜色”：{
“rgba”：[255，255，255，255]
},
“奥文