把leaflet换成cesium,并没有看出来差别,可能是面积太小了吧 变形不明显。。
http://localhost:8080/cesium/Apps/HelloWorld.html
<script> Cesium.Ion.defaultAccessToken='xxxx'; let viewerOption = { animation: false, // 控制场景动画的播放速度控件 baseLayerPicker: false, // 底图切换控件 fullscreenButton: false, // 全屏控件 geocoder: false, // 地理位置查询定位控件 homeButton: false, // 默认相机位置控件 timeline: false, // 时间滚动条控件 infoBox: false, //是否显示信息框 sceneModePicker: false, //是否显示3D/2D选择器 selectionIndicator: false, // 点击点绿色弹出 是否显示选取指示器组件 sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING navigationHelpButton: false, // 默认的相机控制提示控件 scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存 navigationInstructionsInitiallyVisible: false, showRenderLoopErrors: false, //是否显示渲染错误 orderIndependentTranslucency:false,//设置背景透明 errainProvider: Cesium.createWorldTerrain() }; let viewer = new Cesium.Viewer("cesiumContainer", viewerOption); var TDU_Key = "xxxxxx"//天地图申请的** //在线天地图影像服务地址(墨卡托投影) var TDT_IMG_W = "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + TDU_Key; //在线天地图矢量地图服务(墨卡托投影) var TDT_VEC_W = "http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default&format=tiles&tk=" + TDU_Key; //在线天地图影像中文标记服务(墨卡托投影) var TDT_CIA_W = "http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default.jpg&tk=" + TDU_Key //在线天地图矢量中文标记服务(墨卡托投影) var TDT_CVA_W = "http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" + "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" + "&style=default.jpg&tk=" + TDU_Key; //此处插播广告。有BIM模型引擎的需求,可以找我们。官网http://www.qmodel.cn/ let Img = new Cesium.WebMapTileServiceImageryProvider({ //调用影响中文服务 url: TDT_VEC_W,//url地址,换影像还是矢量,随便你喜欢 layer: "img_w", //WMTS请求的层名称 style: "default",//WMTS请求的样式名称 format: "tiles",//MIME类型,用于从服务器检索图像 tileMatrixSetID: "GoogleMapsCompatible",// 用于WMTS请求的TileMatrixSet的标识符 subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地图8个服务器 minimumLevel: 0,//最小层级 maximumLevel: 18,//最大层级 }) viewer.imageryLayers.addImageryProvider(Img)//添加到cesium图层上 let cia = new Cesium.WebMapTileServiceImageryProvider({ //调用影响中文注记服务 url: TDT_CVA_W, layer: "cia_w", style: "default", format: "tiles", tileMatrixSetID: "GoogleMapsCompatible", subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地图8个服务器 minimumLevel: 0, maximumLevel: 18, }) viewer.imageryLayers.addImageryProvider(cia)//添加到cesium图层上 viewer.scene.globe.depthTestAgainstTerrain = !0; // 没有影像图层时地球的底色 viewer.scene.globe.baseColor = Cesium.Color.BLACK; viewer.camera.setView({ destination: new Cesium.Cartesian3(6788280.844465209, -81980750.10214644, 1061921.04004376) }); viewer.camera.flyTo({ // destination: new Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 10000000.0), // duration:8 destination: new Cesium.Cartesian3.fromDegrees(116.435314, 22.960521, 2000.0), duration:18 }); </script>