Cesium（八）小地图与实时显示位置

之前搜罗一堆资料，发现有个老哥用两个viewer实现了类似小地图的功能，但是我尝试了一下发现性能方面好像不太友好。而且里面是个球体，就算可以隐藏地球，但是一切都变得复杂了，而我只需要一个二维地图就行了。

思路

1.创建小地图
2.小地图上绘制点
3.根据坐标修改点的位置
4.如何监听坐标的改变

创建小地图

我这里使用的mapboxgl，我很喜欢里面的自定义地图样式，用别的应该可以可以的，比如leaflet，但是我就没去试了。

            mapboxgl.accessToken = 'token';var map = new mapboxgl.Map({container: 'map', // div的idstyle: '', //自定义样式center: [109.608275784, 18.3086668], // 开始的中心位置zoom: 16 // 开始的缩放倍数});

小地图上绘制点

这里如果不加on,load就会报错的，说什么样式还没加载完.

var _this = thismap.on('load', function () {map.addSource("polygon",_this.createDot([109.608275784, 18.3086668], 0.01));//0.01是点的大小map.addLayer({"id": "polygon","type": "fill","source": "polygon","layout": {},"paint": {"fill-color": "blue","fill-opacity": 0.6,}});})//这个方法是看了哪个老哥的帖子，现在找不到了。。createDot(center, radiusInKm, points){if(!points) points = 64;var coords = {latitude: center[1],longitude: center[0]};var km = radiusInKm;var ret = [];var distanceX = km/(111.320*Math.cos(coords.latitude*Math.PI/180));var distanceY = km/110.574;var theta, x, y;for(var i=0; i<points; i++) {theta = (i/points)*(2*Math.PI);x = distanceX*Math.cos(theta);y = distanceY*Math.sin(theta);ret.push([coords.longitude+x, coords.latitude+y]);}ret.push(ret[0]);return {"type": "geojson","data": {"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Polygon","coordinates": [ret]}}]}};}

我这里还有一个插入图片的方法，大家可以参考一下，尝试把点换成图片

2020.12.04改：

var _this = thismap.on('load', function () {map.addSource("geojson", _this.createDot([xx,xx], 0.007));map.loadImage('/static/img/pen.png', function(error, image) {if (error) throw error;map.addImage('point', image);map.addLayer({"id": "points","type": "symbol","source": "geojson","layout": {"icon-image": "point","icon-size": 0.1},});})})// 更新位置的方法this.updata = function(){console.log(this.transPosition)let data = this.createDot([this.transPosition[0],this.transPosition[1]], 0.007).datamap.getSource('geojson').setData(data);}},// 返回json格式createDot(center){var coords = {latitude: center[1],longitude: center[0]};var ret = [];ret.push([coords.longitude, coords.latitude]);ret.push(ret[0]);return {"type": "geojson","data": {"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Point","coordinates": ret[0]}}]}};}

根据坐标修改点的位置

回到我们熟悉的Cesium，这里有点小问题，用moveStart或者moveEnd其实效果都是不很好，很长一段移动的话，是不会一直显示的，比如你一直直行，就只会更新一下，但是你改变方向或者缩放还是能继续触发的，我暂时也没想到别的办法。（测试好像没有问题）

viewer.scene.camera.moveStart.addEventListener(function(e){console.log(viewer.camera.position)var position = viewer.camera.positionvar arr = []var cartographic = Cesium.Cartographic.fromCartesian(position)arr.push(Cesium.Math.toDegrees(cartographic.longitude))arr.push(Cesium.Math.toDegrees(cartographic.latitude))_this.transPosition = arr});

2020.12.04改：用changed会好很多。

viewer.scene.camera.changed.addEventListener(function(){console.log(`changed,${viewer.camera.position}`)var position = viewer.camera.positionvar arr = []var cartographic = Cesium.Cartographic.fromCartesian(position)arr.push(Cesium.Math.toDegrees(cartographic.longitude))arr.push(Cesium.Math.toDegrees(cartographic.latitude))_this.transPosition = arr})

改变点的坐标的话，这边有个方法，写在小地图这个组件里面就行了

	let data = this.createDot([this.transPosition[0],this.transPosition[1]], 0.01).datamap.getSource('polygon').setData(data);

父子组件通信我就不在这里赘述了。

如何监听坐标的改变

最后就是监听了，在watch里面监听，然后调用上面的方法。

watch:{transPosition(n,o){if(o!=''){this.XXX()//调用上面的方法}}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！