<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>行政區划圖</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<input id="check" type="checkbox" onclick="checkboxOnclick(this,ProvinceUrl)" /> 行政區划-省 <br>
<input id="check" type="checkbox" onclick="checkboxOnclick(this,CityUrl)" /> 行政區划-市 <br>
<input id="check" type="checkbox" onclick="checkboxOnclick(this,CountyUrl)" /> 行政區划-縣 <br>
<input id="check" type="checkbox" onclick="checkboxOnclick(this,TownUrl)" /> 行政區划-鄉鎮 <br>
<div id="cesiumContainer"></div>
<script>
var myurl = "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali";
var myMapSource = new Cesium.UrlTemplateImageryProvider({url:myurl});
var myviewer = new Cesium.Viewer("cesiumContainer",{
imageryProvider:myMapSource,
baseLayerPicker:false,
// terrainProvider:Cesium.createWorldTerrain({
// requestVertexNormals:true,
// requestWaterMask:true,
// })
});
var ProvinceUrl ="cseium:shengwgs84";
var CityUrl ="cesium:city1";
var CountyUrl ="cesium:county";
var TownUrl ="cesium:town";
function checkboxOnclick(checkbox,shplayer) {
var providerShp = new Cesium.WebMapServiceImageryProvider({
url:"http://127.0.0.1:8083/geoserver/cesium/wms",
layers:shplayer,//
fill:Cesium.Color.PINK.withAlpha(0.1),
parameters:{
service:"WMS",
format:"image/png",
transparent:true
}
});
if(checkbox.checked===true){
y =myviewer.imageryLayers.addImageryProvider(providerShp);
}
else
{
myviewer.imageryLayers.remove(y);
}
}
</script>
</body>
</html>
一、希望實現的功能：選中復選框，顯示行政界限；清除復選框，清除行政界限。實現思路：做好的shp文件，通過geo發布並設置樣式；
js中寫一個復選功能函數，實現點擊運行；標簽中采用input type=checkbox,onclick=函數。詳細可見全代碼。
二、思路：雖然是cesium一個入門級的功能,但是也做了好幾天，第一種思路是將shp轉為本地json文件，到了鄉鎮級別，json文件已經百兆以上，功能實現后加載非常卡。
但是這種方法小文件可以，本地加載json的樣式、字體等都容易設置。所以轉換思路采用切片通過geoserver發布。
三、遇到的問題及解決方案：
1、geosercer無法發布的問題。網上有很多原因，不再復贅，個人遇到的一個問題,在引用本地wms時候，一定要注意這個地址是否正確，可以先試一下。
比如常規是localhost:***,本機為
127.0.0.1。
2、geoserver發布后的字體問題，主要還是要將編碼encode設置為GB2312，geoserver有2處，一處是style樣式中的encoding,一處是數據存儲中具體數據的“DBF的
字符集”；html文件不需要更改。
3、順利加載后，選擇<input type=“checkebox”>標簽，配合js的if（checkebox.checked===ture）,else語句,應該說還是比較簡單的。這里遇到了清除復選框后，
圖層無法消失的問題。實際上，最初就意識到了，圖層應該為全局變量，否則在else中無法清楚if中的變量所以在頭部寫了 var y（圖層名），但是無論如何都無法成功，
后來又嘗試了各種辦法（比如刪除1-n圖層，0為底圖）都有問題。百度后才知道，不用var，直接寫變量名為全局變量，這是個人js剛初入問題。
https://blog.csdn.net/less_cold/article/details/52594083