cesium實現注記功能

 希望實現：加載json外部文件的行政區划圖，實現貼地效果，並在每個行政區划的中間做一個label顯示地名，實現類似天地圖的注記功能。

首先，理解幾個知識點

#PolygonGraphics(options)感謝以前還不算差的英語，考研71分好像，至少現在讀英文API能大概知道什么意思...真的是大概

API的描述：Describes a polygon defined by an hierarchy of linear rings which make up the outer shape and any nested holes. The polygon conforms to the curvature of the globe and can be placed on the surface or at altitude and can optionally be extruded into a volume.

PolygonGraphics（多邊形面圖形）是由各個層次的線所組成的面構成（外邊、內邊），這個多邊形能夠適應球體，能夠被設置在球體表面或者特定高度，也能夠放置（縮放）在特定空間。

Name

Type

Description

options

Object

optional Object with the following properties:

Name	Type	Default	Description
show	Property	true	optional A boolean Property specifying the visibility of the polygon.
hierarchy	Property		optional A Property specifying the PolygonHierarchy.
height	Property	0	optional A numeric Property specifying the altitude of the polygon relative to the ellipsoid surface.
heightReference	Property	HeightReference.NONE	optional A Property specifying what the height is relative to.位置高程參考
extrudedHeight	Property		optional A numeric Property specifying the altitude of the polygon's extruded face relative to the ellipsoid surface.
extrudedHeightReference	Property	HeightReference.NONE	optional A Property specifying what the extrudedHeight is relative to.拉升高度參考
stRotation	Property	0.0	optional A numeric property specifying the rotation of the polygon texture counter-clockwise from north.
granularity粒子	Property	Cesium.Math.RADIANS_PER_DEGREE	optional A numeric Property specifying the angular distance between each latitude and longitude point.
fill	Property	true	optional A boolean Property specifying whether the polygon is filled with the provided material.
material填充材質	MaterialProperty	Color.WHITE	optional A Property specifying the material used to fill the polygon.
outline外	Property	false	optional A boolean Property specifying whether the polygon is outlined.
outlineColor	Property	Color.BLACK	optional A Property specifying the Color of the outline.
outlineWidth	Property	1.0	optional A numeric Property specifying the width of the outline.
perPositionHeight	Property	false	optional A boolean specifying whether or not the the height of each position is used.
closeTop封頂	Boolean	true	optional When false, leaves off the top of an extruded polygon open.
closeBottom封底	Boolean	true	optional When false, leaves off the bottom of an extruded polygon open.
arcType弧形狀，球體上兩點之間點連線是有多種方式的，不是平面，一般用大地線，也就是最短路徑線	Property	ArcType.GEODESIC	optional The type of line the polygon edges must follow.
shadows陰影	Property	ShadowMode.DISABLED	optional An enum Property specifying whether the polygon casts or receives shadows from each light source.
distanceDisplayCondition距離顯示	Property		optional A Property specifying at what distance from the camera that this polygon will be displayed.
classificationType貼地形還是貼3dtiles	Property	ClassificationType.BOTH	optional An enum Property specifying whether this polygon will classify terrain, 3D Tiles, or both when on the ground.
zIndex類似html5的顯示層次	ConstantProperty	0	optional A property specifying the zIndex used for ordering ground geometry. Only has an effect if the polygon is constant and neither height or extrudedHeight are specified.

 

#PolygonGeometry

API是這么寫的A description of a polygon on the ellipsoid. The polygon is defined by a polygon hierarchy. Polygon geometry can be rendered with both Primitive and GroundPrimitive.

球體上的多邊形，多邊形可以是層次嵌套，多邊形幾何實例可以使用primitive方式或者GroundPrimitive渲染，所以polygonGeometry是球體實例，只能用primitive方式渲染，使用entity方式生成實例時候就不要來查geometry的API了。

 #多邊形的中點

boundingSphere類，api的定義：A bounding sphere with a center and a radius.

Cesium.BoundingSphere.fromPoints(positions, result) → BoundingSphere

#HorizontalOrigin與VerticalOrigin  平面上的水平朝向與垂直朝向

#distanceDisplayCondition與scaleByDistance

distanceDisplayCondition:new Cesium.DistanceDisplayCondition(0,100000),在這個范圍內可見

scaleByDistance:new Cesium.NearFarScalar(100, 0.5, 100000, 0.6)，在（小於）100米時候scale為0.5，100-100000（大於）米之間逐漸放大到0.6

#最基礎的實現，先實現顯示注記

var jsonPromise = new Cesium.GeoJsonDataSource.load("./data/jxgeojson.json");
jsonPromise.then(function(datasource){
    viewer.dataSources.add(datasource);
    var entities = datasource.entities.values;
    for (let i = 0; i < entities.length; i++) {
        var entity  = entities[i];
　　　　//名稱用加載數據的一項屬性
        entity.name = entity.properties.XZQMC;
　　　　//獲取此時此刻的點集
　　　　//整個Entity API的屬性設計是不僅僅考慮是一個常量值，而需要設置一些隨時間變換的值。

　　　　　//所有的屬性類實現 Property 接口, Cesium中定義了很多種屬性類。為了讀取屬性的值，我們需要調用 getValue函數,時間參數傳當前場景時間即可。

       //vacr poinitsArray = entity.polygon.hierarchy.getValue(Cesium.clock.currentTime).positions;效果一樣 
       var pointsArray = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
　　　　//獲取entity的polygon的中心點
        var centerpoint = Cesium.BoundingSphere.fromPoints(pointsArray).center;
      //將entity的position設置為centerpoint，這里很好奇一個polygon沒有position么，
　　　　//如果沒有設置，確實為undefined
　　　　 entity.position = centerpoint;
　　　　//設置標簽名稱
        entity.label={
            text:entity.name
        }
    }
})

#改進顯示注記

jsonPromise.then(function(datasource){
    viewer.dataSources.add(datasource);
    var entities = datasource.entities.values;
    for (let i = 0; i < entities.length; i++) {
        var entity  = entities[i];
        if(Cesium.defined(entity.polygon))//設置entity.polygon的樣式
        {
            entity.polygon.material=new Cesium.Color.fromRandom({maximumRed:0.8,maximumBlue:0.8,maximumGreen:0.7,alpha:0.5});
           //ClassificationType:Whether a classification affects terrain, 3D Tiles or both. 
            entity.polygon.classificationType=Cesium.ClassificationType.TERRAIN;
            entity.name = entity.properties.XZQMC;
        }        
        var pointsArray = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
        var centerpoint = Cesium.BoundingSphere.fromPoints(pointsArray).center;
        entity.position = centerpoint;
        entity.label={
            text:entity.name,
            scale:1,
            showBackground:true,
            //水平朝向，就是這個label放在position的左，中，右
            horizontalOrigin:Cesium.HorizontalOrigin.LEFT,
            verticalOrigin:Cesium.VerticalOrigin.CENTER,
            distanceDisplayCondition:new Cesium.DistanceDisplayCondition(0,10000),
　　　　　　　//遠近-大小的關系設置
            scaleByDistance:new Cesium.NearFarScalar(0.5, 0.5, 3, 0.5)
        }
    }
})