Cesium实战记录（七）添加arcgis 矢量服务后二维变三维

前言：

cesium 加载矢量地图后，在三维模式下会平铺在地面上，我们配好的标注也会变形，非常影响效果。如下图所示：加载的arcgis 矢量服务后。

需求:

我们想要加载普通的矢量服务后也要有三维的效果，点图标是立起来的，标注是三维始终面向用户的，面和线是可以在地形上的。

看下渲染的三维效果：

思路：

针对arcgis mapserver ：

1、获取屏幕范围

2、获取屏幕范围内的要素点

3、重新渲染

其中第二点可以调用它的服务 query 接口 ，找到一个mapserver ，点进去具体的server ，拉到最下面有个query 点进去，然后在where 一栏中 输入 1 = 1 ，看下地址栏参数，这个页面右上角有help 也可以看下帮助手册。

代码实现：

今天心情不错，直接贴源码吧。提前祝大家新年快乐~~~

 markerPoint  配置：

/**
 * @Description: 符号集合
 * @author MrKuang
 * @VX k792794653
 * @date 2022/8/22 0022
*/
import * as Cesium from "cesium";

/**
 * 点图片+点标签
 * @type {{label: {fillColor: Color, outlineWidth: number, verticalOrigin: VerticalOrigin.BOTTOM, showBackground: boolean, outlineColor: module:cesium.Color, horizontalOrigin: HorizontalOrigin.LEFT, style: LabelStyle.FILL_AND_OUTLINE, pixelOffset: module:cesium.Cartesian2, font: string}, billBoard: {image: *, verticalOrigin: VerticalOrigin.BOTTOM, width: number, heightReference: HeightReference.RELATIVE_TO_GROUND, height: number}}}
 */
const markerPoint ={
    billBoard:{
        image:require('@/assets/billboard.png'),
        verticalOrigin:Cesium.VerticalOrigin.BOTTOM,
        heightReference:Cesium.HeightReference.RELATIVE_TO_GROUND,
        height:40,
        width:35,
    },
    label:{
        font : '18px sans-serif',
        fillColor:Cesium.Color.WHITE,
        outlineColor :  new Cesium.Color(0 / 255, 229 / 255, 255 / 255, 0.8),
        outlineWidth : 0.5,
        style:Cesium.LabelStyle.FILL_AND_OUTLINE,
        showBackground:false,
        pixelOffset:new Cesium.Cartesian2(-20,-40),//像素偏移
        horizontalOrigin:Cesium.HorizontalOrigin.LEFT,//相对于对象的原点的水平位置
        verticalOrigin:Cesium.VerticalOrigin.BOTTOM,//相对于对象的原点的垂直位置
    }
}

export {
    markerPoint
}

car3ToDegress 方法：

export const car3ToDegress=(v)=>{
    let c = Cesium.Cartographic.fromCartesian(v);
    let d1 = Cesium.Math.toDegrees(c.longitude);
    let d2 = Cesium.Math.toDegrees(c.latitude);
    return [d1,d2];
}

LayerApi.arcgisQuery 是我自己封装的get 请求，一个参数 是url ，另个参数 是params ，代码里有， 你自己根据ajax 或者 axios 去请求都行

哦了~~~