為狀態(tài)層創(chuàng)建樣式?

默認(rèn)的SLD文件 states 層如下：

version="1.0.0"

xmlns="http://www.opengis.net/sld"

xmlns:ogc="http://www.opengis.net/ogc"

xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:gml="http://www.opengis.net/gml"

xsi:schemaLocation="http://www.opengis.net/sld

http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd

">

USA states population

population

Population in the United States

A sample filter that filters the United States into three

categories of population, drawn in different colors

< 2M

PERSONS

2000000

#4DFF4D

0.7

2M - 4M

PERSONS

2000000

4000000

#FF4D4D

0.7

> 4M

PERSONS

4000000

#4D4DFF

0.7

Boundary

0.2

STATE_ABBR

Times New Roman

Normal

14

0.5

0.5

現(xiàn)在，讓我們從一個(gè)完成相同任務(wù)的CSS文件開始。

首先，轉(zhuǎn)到樣式頁(yè)并單擊 Add a new style 鏈接以開始新樣式。在“新樣式”頁(yè)面中，執(zhí)行以下操作：

為新樣式命名您喜歡的任何樣式，例如 csstutorial

選擇 CSS 作為格式

在 Generate a default style 下拉選擇 Polygon 然后點(diǎn)擊 Generate...

創(chuàng)建新的CSS樣式?

這將創(chuàng)建一個(gè)示例樣式，其源與此樣式類似(顏色可能不同)：：

/* @title cyan polygon */

* {

stroke: #000000;

stroke-width: 0.5;

fill: #0099cc;

}

這演示了CSS樣式的基本元素：

A 選擇器 它標(biāo)識(shí)要設(shè)置樣式的數(shù)據(jù)的某些部分。這里，選擇器是 * 指示所有數(shù)據(jù)都應(yīng)使用樣式屬性。

屬性 在花括號(hào)內(nèi) ({{}} )它指定了受影響的特性應(yīng)該如何設(shè)置樣式。屬性由冒號(hào)分隔的名稱/值對(duì)組成 (: )

我們還可以看到設(shè)計(jì)多邊形樣式的基礎(chǔ) (fill )及其大綱 (stroke )

參見

這個(gè) 篩選器語(yǔ)法 和 屬性清單 頁(yè)面提供有關(guān)CSS樣式中可用選項(xiàng)的詳細(xì)信息。

在繼續(xù)之前，讓我們保存樣式并使用狀態(tài)層預(yù)覽它：

單擊“應(yīng)用”保存層并啟用樣式預(yù)覽

現(xiàn)在在“樣式編輯器”頁(yè)面，切換到“圖層預(yù)覽”選項(xiàng)卡，單擊“圖層預(yù)覽”鏈接，然后在對(duì)話框中選擇“狀態(tài)”圖層。

樣式編輯器現(xiàn)在應(yīng)該顯示填充和刪除的狀態(tài)層。

使用狀態(tài)層預(yù)覽CSS樣式?

讓我們用這些基礎(chǔ)知識(shí)開始翻譯狀態(tài)樣式。SLD中的第一條規(guī)則適用于 PERSONS 字段小于200萬(wàn)：：

< 2M

PERSONS

2000000

#4DFF4D

0.7

使用A CQL -基于選擇器，復(fù)制cssparameter的名稱和值，我們得到：

[PERSONS < 2000000] {

fill: #4DFF4D;

fill-opacity: 0.7;

}

對(duì)于第二種樣式，我們有 PropertyIsBetween 篩選器，它不直接轉(zhuǎn)換為CSS:：

2M - 4M

PERSONS

2000000

4000000

#FF4D4D

0.7

然而， PropertyIsBetween 可以很容易地被兩個(gè)比較選擇器的組合替換。在CSS中，只需一個(gè)接一個(gè)地放置多個(gè)選擇器，就可以對(duì)一個(gè)規(guī)則應(yīng)用多個(gè)選擇器。只有空格分隔的選擇器必須全部滿足才能應(yīng)用樣式。多個(gè)這樣的組可以通過用逗號(hào)分隔來附加到一個(gè)規(guī)則 (, )。如果某個(gè)功能與某個(gè)規(guī)則的任何逗號(hào)分隔組匹配，則應(yīng)用該樣式。因此，第二條規(guī)則的CSS等價(jià)物是：

[PERSONS >= 2000000] [PERSONS < 4000000] {

fill: #FF4D4D;

fill-opacity: 0.7;

}

第三條規(guī)則的處理方式與第一條規(guī)則大致相同：

[PERSONS >= 4000000] {

fill: #4D4DFF;

fill-opacity: 0.7;

}

第四條也是最后一條規(guī)則有點(diǎn)不同。它將標(biāo)簽和大綱應(yīng)用于所有狀態(tài)：

Boundary

0.2

STATE_ABBR

Times New Roman

Normal

14

0.5

0.5

這引入了呈現(xiàn)提取值的思想 (STATE_ABBR )直接進(jìn)入地圖，不同于目前所有的規(guī)則。為此，可以使用括在方括號(hào)中的cql表達(dá)式 ([] )作為CSS屬性的值。還需要將包含空白的值括起來，例如 Times New Roman ，單引號(hào)或雙引號(hào) (" ， ' )。考慮到這些細(xì)節(jié)，讓我們編寫規(guī)則：

* {

stroke-width: 0.2;

label: [STATE_ABBR];

label-anchor: 0.5 0.5;

font-family: "Times New Roman";

font-fill: black;

font-style: normal;

font-size: 14;

}

把它們放在一起，你現(xiàn)在應(yīng)該有一個(gè)如下的風(fēng)格：

[PERSONS < 2000000] {

fill: #4DFF4D;

fill-opacity: 0.7;

}

[PERSONS >= 2000000] [PERSONS < 4000000] {

fill: #FF4D4D;

fill-opacity: 0.7;

}

[PERSONS >= 4000000] {

fill: #4D4DFF;

fill-opacity: 0.7;

}

* {

stroke-width: 0.2;

label: [STATE_ABBR];

label-anchor: 0.5 0.5;

font-family: "Times New Roman";

font-fill: black;

font-style: normal;

font-size: 14;

}

單擊 Apply 用于保存更改的按鈕。

應(yīng)用于 states 圖層?

你會(huì)看到邊界不見了！在geoserver css模塊中，每種符號(hào)都有一個(gè)“key”屬性，用于控制是否應(yīng)用它。如果沒有這些“鍵”屬性，則忽略從屬屬性。這些“鍵”屬性是：

fill ，控制是否應(yīng)用多邊形填充。這指定了用于填充的顏色或圖形。

劃 ，控制是否應(yīng)用線條和多邊形輪廓筆劃。這指定筆劃的顏色(或圖形填充)。

mark ，控制是否繪制點(diǎn)標(biāo)記。這將標(biāo)識(shí)要使用的已知標(biāo)記或圖像URL。

標(biāo)簽 ，它控制是否在地圖上繪制標(biāo)簽。這標(biāo)識(shí)用于標(biāo)記地圖的文本，通常作為CQL表達(dá)式。

halo-radius ，控制是否在標(biāo)簽周圍繪制光環(huán)。這指定了這樣的光暈應(yīng)該有多大。

參見

這個(gè) 屬性清單 有關(guān)其他屬性的信息。

因?yàn)槲覀儧]有指定 stroke 顏色，不應(yīng)用筆劃。讓我們添加它，替換最后一個(gè)規(guī)則，使其現(xiàn)在看起來像這樣：

* {

stroke: black;

stroke-width: 0.2;

label: [STATE_ABBR];

label-anchor: 0.5 0.5;

font-family: "Times New Roman";

font-fill: black;

font-style: normal;

font-size: 14;

}

添加到樣式的邊框?

總結(jié)

以上是生活随笔為你收集整理的css样式 数据展示,教程：使用CSS设置数据样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。