画多边形
<!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=”Cesium/Cesium.js”></script>
<style>
@import url(Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id=”cesiumContainer”></div>
<div style=”position: absolute; float: right;right: 10px;top: 50px; z-index: 999999;”>
<input id=”startDraw” type=”button” value=”开始绘制(双击结束绘制)” class=”cesium-button”>
</div>
<script>
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
baseLayerPicker : false,
geocoder : false,
homeButton : false,
navigationHelpButton : false,
timeline : false,
animation : false
});
viewer.imageryLayers.removeAll();
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(112.52133465950095, 23.071194052564465, 1063.5910571697082),
orientation : {
heading : 0.9183320934226114,
pitch : -0.2851308873567558,
roll : 0.00200137740773787
}
});
//天地图在线影像
var TDTimageryLayer = new Cesium.WebMapTileServiceImageryProvider({
url : “http://{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles”,
layer : “tdtImgBasicLayer”,
style : “default”,
subdomains : [‘t0’, ‘t1’, ‘t2’, ‘t3’, ‘t4’, ‘t5’, ‘t6’, ‘t7’],
format : “image/jpeg”,
tileMatrixSetID : “GoogleMapsCompatible”,
maximumLevel : 17,
credit : “天地图”,
show : true
});
//天地图在线影像注记
var TDTimageryLabel = new Cesium.WebMapTileServiceImageryProvider({
url : “http://{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles”,
layer : “tdtImgBasicLayer”,
style : “default”,
subdomains : [‘t0’, ‘t1’, ‘t2’, ‘t3’, ‘t4’, ‘t5’, ‘t6’, ‘t7’],
format : “image/jpeg”,
tileMatrixSetID : “GoogleMapsCompatible”,
maximumLevel : 17,
credit : “天地图影像注记”,
show : true
});
viewer.imageryLayers.addImageryProvider(TDTimageryLayer);
viewer.imageryLayers.addImageryProvider(TDTimageryLabel);
viewer.scene.screenSpaceCameraController.minimumZoomDistance=-1000;
var CreatePolygon = (function() {
function _(positons) {
if (!Cesium.defined(positons)) {
throw new Cesium.DeveloperError(‘positions is required!’);
}
if (positons.length < 3) {
throw new Cesium.DeveloperError(‘positions 的长度必须大于等于3’);
}
this.options = {
polygon : {
show : true,
hierarchy : undefined,
material : Cesium.Color.YELLOW.withAlpha(0.5)
}
};
this.path = positons;
this._init();
}
_.prototype._init = function() {
var that = this;
var positionCBP = function() {
return that.path;
};
this.options.polygon.hierarchy = new Cesium.CallbackProperty(positionCBP, false);
viewer.entities.add(this.options);
};
return _;
})();
var isDraw = false;
var polygonPath = [];
var polygon = undefined;
var handler = viewer.cesiumWidget.screenSpaceEventHandler;
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
handler.setInputAction(function(movement) {
var ray = viewer.scene.camera.getPickRay(movement.endPosition);
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
if (cartesian) {
if (isDraw) {
if (polygonPath.length < 2) {
return;
}
if (!Cesium.defined(polygon)) {
polygonPath.push(cartesian);
polygon = new CreatePolygon(polygonPath);
} else {
polygon.path.pop();
polygon.path.push(cartesian);
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function(movement) {
var ray = viewer.scene.camera.getPickRay(movement.position);
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
if (cartesian) {
if (isDraw) {
polygonPath.push(cartesian);
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function() {
isDraw = false;
polygonPath = [];
polygon = undefined;
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
document.getElementById(‘startDraw’).onclick = function() {
isDraw = true;
};
</script>
</body>
</html>
转载自：https://blog.csdn.net/wt346326775/article/details/81119842
