<!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
原文地址：https://www.cnblogs.com/xiaoguniang0204/p/11566915.html