|
@@ -0,0 +1,223 @@
|
|
|
+function initTdt(){
|
|
|
+ var token = 'e95115c454a663cd052d96019fd83840';
|
|
|
+ // 服务域名
|
|
|
+ var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
|
|
|
+ // 服务负载子域
|
|
|
+ var subdomains=['0','1','2','3','4','5','6','7'];
|
|
|
+
|
|
|
+ // cesium 初始化
|
|
|
+ var viewer = new Cesium.Map('cesiumContainer', {
|
|
|
+ animation: false,
|
|
|
+ vrButton: false, // VR模式
|
|
|
+ sceneModePicker: false,
|
|
|
+ baseLayerPicker: false,
|
|
|
+ shouldAnimate: true,
|
|
|
+ selectionIndicator:true,
|
|
|
+ infoBox:true,
|
|
|
+ homeButton: true
|
|
|
+ });
|
|
|
+
|
|
|
+ // 叠加影像服务
|
|
|
+ var imgMap = new Cesium.UrlTemplateImageryProvider({
|
|
|
+ url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
|
|
|
+ subdomains: subdomains,
|
|
|
+ tilingScheme : new Cesium.WebMercatorTilingScheme(),
|
|
|
+ maximumLevel : 18
|
|
|
+ });
|
|
|
+ viewer.imageryLayers.addImageryProvider(imgMap);
|
|
|
+
|
|
|
+ // 叠加地形服务
|
|
|
+ var terrainUrls = new Array();
|
|
|
+
|
|
|
+ for (var i = 0; i < subdomains.length; i++){
|
|
|
+ var url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?tk=' + token;
|
|
|
+ terrainUrls.push(url);
|
|
|
+ }
|
|
|
+
|
|
|
+ var provider = new Cesium.GeoTerrainProvider({
|
|
|
+ urls: terrainUrls
|
|
|
+ });
|
|
|
+
|
|
|
+ viewer.terrainProvider = provider;
|
|
|
+
|
|
|
+ // 叠加三维地名服务
|
|
|
+ var wtfs = new Cesium.GeoWTFS({
|
|
|
+ viewer,
|
|
|
+ subdomains:subdomains,
|
|
|
+ metadata:{
|
|
|
+ boundBox: {
|
|
|
+ minX: -180,
|
|
|
+ minY: -90,
|
|
|
+ maxX: 180,
|
|
|
+ maxY: 90
|
|
|
+ },
|
|
|
+ minLevel: 1,
|
|
|
+ maxLevel: 20
|
|
|
+ },
|
|
|
+ aotuCollide: true, //是否开启避让
|
|
|
+ collisionPadding: [5, 10, 8, 5], //开启避让时,标注碰撞增加内边距,上、右、下、左
|
|
|
+ serverFirstStyle: true, //服务端样式优先
|
|
|
+ labelGraphics: {
|
|
|
+ font:"28px sans-serif",
|
|
|
+ fontSize: 28,
|
|
|
+ fillColor:Cesium.Color.WHITE,
|
|
|
+ scale: 0.5,
|
|
|
+ outlineColor:Cesium.Color.BLACK,
|
|
|
+ outlineWidth: 5,
|
|
|
+ style:Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
|
+ showBackground:false,
|
|
|
+ backgroundColor:Cesium.Color.RED,
|
|
|
+ backgroundPadding:new Cesium.Cartesian2(10, 10),
|
|
|
+ horizontalOrigin:Cesium.HorizontalOrigin.MIDDLE,
|
|
|
+ verticalOrigin:Cesium.VerticalOrigin.TOP,
|
|
|
+ eyeOffset:Cesium.Cartesian3.ZERO,
|
|
|
+ pixelOffset:new Cesium.Cartesian2(0, 8)
|
|
|
+ },
|
|
|
+ billboardGraphics: {
|
|
|
+ horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
|
|
|
+ verticalOrigin:Cesium.VerticalOrigin.CENTER,
|
|
|
+ eyeOffset:Cesium.Cartesian3.ZERO,
|
|
|
+ pixelOffset:Cesium.Cartesian2.ZERO,
|
|
|
+ alignedAxis:Cesium.Cartesian3.ZERO,
|
|
|
+ color:Cesium.Color.WHITE,
|
|
|
+ rotation:0,
|
|
|
+ scale:1,
|
|
|
+ width:18,
|
|
|
+ height:18
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //三维地名服务,使用wtfs服务
|
|
|
+ wtfs.getTileUrl = function(){
|
|
|
+ return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&tk='+ token;
|
|
|
+ }
|
|
|
+ wtfs.initTDT([{"x":6,"y":1,"level":2,"boundBox":{"minX":90,"minY":0,"maxX":135,"maxY":45}},{"x":7,"y":1,"level":2,"boundBox":{"minX":135,"minY":0,"maxX":180,"maxY":45}},{"x":6,"y":0,"level":2,"boundBox":{"minX":90,"minY":45,"maxX":135,"maxY":90}},{"x":7,"y":0,"level":2,"boundBox":{"minX":135,"minY":45,"maxX":180,"maxY":90}},{"x":5,"y":1,"level":2,"boundBox":{"minX":45,"minY":0,"maxX":90,"maxY":45}},{"x":4,"y":1,"level":2,"boundBox":{"minX":0,"minY":0,"maxX":45,"maxY":45}},{"x":5,"y":0,"level":2,"boundBox":{"minX":45,"minY":45,"maxX":90,"maxY":90}},{"x":4,"y":0,"level":2,"boundBox":{"minX":0,"minY":45,"maxX":45,"maxY":90}},{"x":6,"y":2,"level":2,"boundBox":{"minX":90,"minY":-45,"maxX":135,"maxY":0}},{"x":6,"y":3,"level":2,"boundBox":{"minX":90,"minY":-90,"maxX":135,"maxY":-45}},{"x":7,"y":2,"level":2,"boundBox":{"minX":135,"minY":-45,"maxX":180,"maxY":0}},{"x":5,"y":2,"level":2,"boundBox":{"minX":45,"minY":-45,"maxX":90,"maxY":0}},{"x":4,"y":2,"level":2,"boundBox":{"minX":0,"minY":-45,"maxX":45,"maxY":0}},{"x":3,"y":1,"level":2,"boundBox":{"minX":-45,"minY":0,"maxX":0,"maxY":45}},{"x":3,"y":0,"level":2,"boundBox":{"minX":-45,"minY":45,"maxX":0,"maxY":90}},{"x":2,"y":0,"level":2,"boundBox":{"minX":-90,"minY":45,"maxX":-45,"maxY":90}},{"x":0,"y":1,"level":2,"boundBox":{"minX":-180,"minY":0,"maxX":-135,"maxY":45}},{"x":1,"y":0,"level":2,"boundBox":{"minX":-135,"minY":45,"maxX":-90,"maxY":90}},{"x":0,"y":0,"level":2,"boundBox":{"minX":-180,"minY":45,"maxX":-135,"maxY":90}}]);
|
|
|
+ return viewer;
|
|
|
+}
|
|
|
+
|
|
|
+function initCityLand(viewer, geoserver){
|
|
|
+// 叠加广东地块服务
|
|
|
+ var gridsetName = 'EPSG:3857';
|
|
|
+ var gridNames = [];
|
|
|
+ for(let i=0;i<=30;i++){
|
|
|
+ gridNames.push(i)
|
|
|
+ }
|
|
|
+ var iboMap = new Cesium.WebMapTileServiceImageryProvider({
|
|
|
+ url : geoserver+'/gwc/service/wmts/rest/wuhan:gdcityland30/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
|
|
|
+ layer:'wuhan:gdcityland30',
|
|
|
+ format: "image/png",
|
|
|
+ style:'',
|
|
|
+ maximumLevel: gridNames.length,
|
|
|
+ tileMatrixSetID:gridsetName,
|
|
|
+ tileMatrixLabels:gridNames,
|
|
|
+ tilingScheme:new Cesium.WebMercatorTilingScheme()
|
|
|
+ });
|
|
|
+ // viewer.imageryLayers.addImageryProvider(iboMap);
|
|
|
+}
|
|
|
+
|
|
|
+function createCanvas(content, id, color){
|
|
|
+ var conLen = content.length;
|
|
|
+ var div = document.getElementById('tagDiv');
|
|
|
+ var canvas = document.createElement('canvas');
|
|
|
+ canvas.id = id;
|
|
|
+ canvas.className="modelTag";
|
|
|
+ div.appendChild(canvas);
|
|
|
+ let width = 130
|
|
|
+ let height = 34
|
|
|
+ let h2 = (height - 4) / 2
|
|
|
+
|
|
|
+ canvas.width = width; //
|
|
|
+ canvas.height = height + 5;
|
|
|
+ var c = document.getElementById(id);
|
|
|
+ var cxt = c.getContext("2d");
|
|
|
+ cxt.strokeStyle = color;
|
|
|
+ cxt.lineWidth = cxt.lineWidth+1
|
|
|
+ cxt.beginPath();
|
|
|
+ cxt.moveTo(h2 + 5, 2);
|
|
|
+ cxt.arc(h2 + 5, h2 + 2, h2, -Math.PI / 2, Math.PI / 2, true);
|
|
|
+
|
|
|
+ cxt.lineTo(width / 2 - 5, height - 2);
|
|
|
+ cxt.lineTo(width / 2, height - 2 + 5);
|
|
|
+ cxt.lineTo(width / 2 + 5, height - 2);
|
|
|
+
|
|
|
+ cxt.lineTo(width - 5 - h2 + 2, height - 2);
|
|
|
+
|
|
|
+ cxt.arc(width - 5 - h2, h2 + 2, h2, Math.PI / 2, -Math.PI / 2, true);
|
|
|
+ cxt.lineTo(h2 + 5, 2);
|
|
|
+ cxt.stroke();
|
|
|
+ cxt.font="14px Arial";
|
|
|
+ cxt.fillStyle=color;
|
|
|
+ let textCenter = (14 * conLen) / 2
|
|
|
+ cxt.fillText(content, width / 2 - textCenter, (height / 2) + (14 / 2));
|
|
|
+ return canvas;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function initXzqh(viewer, geoserver){
|
|
|
+ var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
|
|
|
+ silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
|
|
|
+ silhouetteBlue.uniforms.length = 2;
|
|
|
+ silhouetteBlue.selected = [];
|
|
|
+
|
|
|
+ var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
|
|
|
+ silhouetteGreen.uniforms.color = Cesium.Color.LIME;
|
|
|
+ silhouetteGreen.uniforms.length = 2;
|
|
|
+ silhouetteGreen.selected = [];
|
|
|
+ viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue, silhouetteGreen]));
|
|
|
+ let flag = false
|
|
|
+
|
|
|
+ let tool = layui.tool
|
|
|
+ let geoJsonUrl = geoserver + "/wuhan/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=wuhan:qy-z&maxFeatures=1000&outputFormat=application/json"
|
|
|
+ geoJsonUrl += "&Filter=(<Filter><ogc:PropertyIsLike wildCard='*' singleChar='.' escape='!' xmlns:ogc='http://www.opengis.net/ogc' >" +
|
|
|
+ "<ogc:PropertyName>pac</ogc:PropertyName><ogc:Literal>441821*</ogc:Literal></ogc:PropertyIsLike></Filter>)"
|
|
|
+ console.log(geoJsonUrl)
|
|
|
+ tool.get(geoJsonUrl, function(data){
|
|
|
+ let res = Cesium.GeoJsonDataSource.load(data,{
|
|
|
+ stroke: Cesium.Color.fromAlpha(Cesium.Color.WHITE, 1),
|
|
|
+ fill: Cesium.Color.fromAlpha(Cesium.Color.WHITE, 0.01),
|
|
|
+ strokeWidth: 1,
|
|
|
+ markerSymbol: '?'
|
|
|
+ })
|
|
|
+ const promise = viewer.dataSources.add(res)
|
|
|
+ viewer.dataSources.add(promise); // 加载这个geojson资源
|
|
|
+ promise.then((datasource) => {
|
|
|
+ const entities = datasource.entities.values;
|
|
|
+ for (let index = 0; index < entities.length; index++) {
|
|
|
+ const entity = entities[index];
|
|
|
+ entity.polygon.heightReference = Cesium.HeightReference.RELATIVE_TO_GROUND; // 贴地
|
|
|
+ entity.polygon.height = 0; // 距地高度0米
|
|
|
+ entity.polygon.extrudedHeightReference =Cesium.HeightReference.RELATIVE_TO_GROUND; //拉伸
|
|
|
+ // entity.polygon.extrudedHeight = 800; // 拉伸高度
|
|
|
+ let now = Cesium.JulianDate.now()
|
|
|
+ let name = entity.properties.name.getValue(now)
|
|
|
+ let id = entity.properties.objectid.getValue(now)
|
|
|
+ let polyPositions = entity.polygon.hierarchy.getValue(now).positions;
|
|
|
+ let polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;//中心点
|
|
|
+ viewer.entities.add({
|
|
|
+ position:polyCenter,
|
|
|
+ billboard:{
|
|
|
+ image: createCanvas(name,"tag_"+id,"WHITE"),
|
|
|
+ width: 130, // default: undefined
|
|
|
+ height: 34, // default: undefined
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ viewer.flyTo(datasource)
|
|
|
+ });
|
|
|
+
|
|
|
+ viewer.screenSpaceEventHandler.setInputAction(function(movement) {
|
|
|
+ let pickedFeature = viewer.scene.pick(movement.endPosition);
|
|
|
+ if(Cesium.defined(pickedFeature)) {
|
|
|
+ pickedFeature = pickedFeature.id;
|
|
|
+ if (silhouetteBlue.selected[0] && silhouetteBlue.selected[0]._id === pickedFeature._id) {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ silhouetteBlue.selected = [pickedFeature];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+}
|