cesium只展示某个区域市省地图

效果如下所示：

主要是调用_c_add_geojson_area方法

代码如下：geojson数据获取：DataV.GeoAtlas地理小工具系列

<template><div class="mapBox"><div id="cesium" ref="cesium"></div></div>
</template><script>
import mapMixin from "./js/mapMixin";
import geojson from "./js/data/town.json";
export default {data() {return {viewer:null,tilesets:null}},mounted() {this.mapInit();},methods: {mapInit() {Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( 90, -20, 110, 90); //西南东北，默认显示中国this.viewer = new Cesium.Viewer("cesium", {animation: false, //是否显示动画控件homeButton: false, //是否显示home键geocoder: false,// 查询baseLayerPicker: false, //是否显示图层选择控件timeline: false, //是否显示时间线控件fullscreenButton: false, //是否全屏显示scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源infoBox: false, //是否显示点击要素之后显示的信息sceneModePicker: false, //是否显示投影方式控件  三维/二维navigationHelpButton: false, //是否显示帮助信息控件imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",}),terrainProvider: new Cesium.CesiumTerrainProvider({ url: "http://data.marsgis.cn/terrain"}),skyAtmosphere:false,// orderIndependentTranslucency: false,contextOptions: {webgl: {alpha: true,},},});// 设置基本属性this.viewer.scene.sun.show = false; this.viewer.scene.moon.show = false;this.viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色this.viewer.scene.undergroundMode = true; this.viewer.scene.globe.show = true; this.viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 5600000;if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {//判断是否支持图像渲染像素化处理this.viewer.resolutionScale = window.devicePixelRatio;}this.viewer.scene.fxaa = true;this.viewer.scene.postProcessStages.fxaa.enabled = true;// 隐藏版权this.viewer._cesiumWidget._creditContainer.style.display = "none";this.viewer.scene.camera.setView({destination: Cesium.Cartesian3.fromDegrees(120.952811,31.854272,6000),orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(-40),roll: Cesium.Math.toRadians(0), //heading、pitch和roll就是镜头相对于xyz轴的角度，比如pitch为-90°而另外两个为0时，就是90°向下俯视地球。},});mapMixin.viewer = this.viewermapMixin._c_add_geojson_area(geojson)   // 只显示区域地图},},}
</script>
<style lang='scss'>
.mapBox{width: 100%;height: 100%;#cesium{width: 100%;height: 100%;padding:20px;box-sizing: border-box;}.cesium-selection-wrapper,.cesium-selection-wrapper-visible{display: none!important;}
}
</style>

_c_add_geojson_area方法代码如下：

// 只展示geojson地图_c_add_geojson_area: function(geojson){console.log(geojson.features[0].geometry.coordinates[0]);let arr = []geojson.features[0].geometry.coordinates[0][0].forEach(item => {arr.push(item[0])arr.push(item[1])});console.log(arr);var polygonWithHole = new Cesium.PolygonGeometry({polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([73.0, 53.0, 73.0, 0.0, 135.0, 0.0, 135.0, 53.0]), [new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(arr))])});var geometry = Cesium.PolygonGeometry.createGeometry(polygonWithHole);let instances = [];instances.push(new Cesium.GeometryInstance({geometry: geometry,attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString("#081122"))}}));function addRect(instances, left, down, right, up) {instances.push(new Cesium.GeometryInstance({geometry: new Cesium.RectangleGeometry({rectangle: Cesium.Rectangle.fromDegrees(left, down, right, up)}),attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString("#081122"))}}));}addRect(instances, -180.0, -90.0, 73.0, 90.0);addRect(instances, 135.0, -90.0, 180.0, 90.0);addRect(instances, 73.0, 53.0, 135.0, 90.0);addRect(instances, 73.0, -90.0, 135.0, 0.0);this.viewer.scene.primitives.add(new Cesium.Primitive({geometryInstances: instances,appearance: new Cesium.PerInstanceColorAppearance({flat: true,translucent: false})}));},

cesium只展示某个区域市省地图相关推荐

Web端调用高德地图-自定义地图-只显示中国区域
1. 通过以下链接注册账号密码高德开放平台 | 高德地图API高德开放平台官网https://lbs.amap.com/?ref=https%3A%2F%2Fgeohub.amap.com%2Fmap ...
高德地图-2D地图下区域遮掩(只显示固定区域里的内容)
最近遇到一个新的需求需用用到高德地图公司需要只显示固定区域范围的地图,其余地方的地图都用透明遮罩覆盖完成后如下图所示: 地图体验网址刚开始的时候研究了半天高德地图的的JS API中只有一个区域遮 ...
echarts地图双击区域展示下级市区县地图
效果图: 1.默认展示全国地图 2.双击江苏区域,展示江苏省地图 3.双击南京市区域,展示南京市地图操作效果: showMap.wmv 注:左上角点击返回上一级,可依次返回至上一级地图. 实现代码: ...
Vue中使用Echarts地图实现某省市区县地图的展示功能
在移动中台运营指标分析-大屏和开发点赞民警应用开发的过程中,需要展示某市的区县地图.通过这个两个项目开发应用实践和不断研究. 效果图展示: 大致总结了一下实现的方法步骤: 1.通过阿里 ...
百度地图高级实例2-如何利用自己的数据制作社交地图？只显示可视区域内的标注
摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注. ----------------------------------- ...
如何利用自己的数据制作社交地图？只显示可视区域内的标注
地址:http://www.cnblogs.com/milkmap/archive/2012/02/02/2335989.html [百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的 ...
【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注...
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注 ...
【26】地图可视化：基于 Echarts + Java SpringBoot 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图
在数据可视化大屏中,地图可视化是常用的高级图表之一. 很多小伙伴们以为地图太高大上了,那么实现起来估计也不容易,说实话,确实不那么容易,直接用echarts是要花些时间研究的,但是我们可以将其二次封装 ...

cesium只展示某个区域市省地图

cesium只展示某个区域市省地图相关推荐

最新文章

热门文章