SuperMap WebGL绘制面并转为地理坐标二维多边形存储到数据库，主要用途是完成数据采集工作。记录了空间笛卡尔坐标转地理坐标并组装成JSON请求体的过程。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>绘制</title>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap-select.min.js"></script>
<script src="./js/tooltip.js"></script>
<script src="./js/config.js"></script>
<script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
<!--
帮助文档http://support.supermap.com.cn:8090/iserver/help/html/zh/index.htm
json_parse.js 提供了 JSON 字符串的解析函数 json_parse，
toJSON.js 提供了获取 XMLHttpRequest 对象的函数 getcommit、将 JavaScript 对象转化为 JSON 字符串的函数 toJSON
-->
<script type="text/javascript" src="./js/toJSON.js"></script>
<script type="text/javascript" src="./js/json_parse.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div id="toolbar" class="param-container tool-bar">
<button type="button" id="point" class="button black">绘制点</button>
<button type="button" id="polyline" class="button black">绘制线</button>
<button type="button" id="polygon" class="button black">绘制面</button>
<button type="button" id="marker" class="button black">添加地标</button>
<button type="button" id="clear" class="button black">清除</button>
</div>
<script type="text/javascript">
function onload(Cesium) {
// 初始化viewer部件
var viewer = new Cesium.Viewer('cesiumContainer', {
infoBox: false,
selectionIndicator: false
});
viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
url: 'https://dev.virtualearth.net',
mapStyle: Cesium.BingMapsStyle.AERIAL,
key: URL_CONFIG.BING_MAP_KEY
}));
var scene = viewer.scene;
scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果（明暗程度）
scene.skyAtmosphere.brightnessShift = 0.4; //修改大气的亮度
scene.debugShowFramesPerSecond = true;
scene.hdrEnabled = false;
scene.sun.show = false;
// 01设置环境光的强度-新处理CBD场景
scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
// 添加光源
var position1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531, 480);
//光源方向点
var targetPosition1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531, 430);
var dirLightOptions = {
targetPosition: targetPosition1,
color: new Cesium.Color(1.0, 1.0, 1.0, 1),
intensity: 0.55
};
directionalLight_1 = new Cesium.DirectionalLight(position1, dirLightOptions);
scene.addLightSource(directionalLight_1);
try {
// 打开所发布三维服务下的所有图层
var promise = scene.open(URL_CONFIG.SCENE_CBD);
Cesium.when(promise, function (layers) {
// 设置相机位置、视角，便于观察场景
scene.camera.setView({
destination: new Cesium.Cartesian3.fromDegrees(116.4563, 39.8969, 553),
orientation: {
heading: 5.901089214916513,
pitch: -0.40668579780875524,
roll: 6.281842456812987
}
});
for (var i = 0; i < layers.length; i++) {
layers[i].selectEnabled = false;
}
if (!scene.pickPositionSupported) {
alert('不支持深度纹理,无法拾取位置！');
}
}, function (e) {
if (widget._showRenderLoopErrors) {
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
widget.showErrorPanel(title, undefined, e);
}
});
} catch (e) {
if (widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
}
var clampMode = 0;
var tooltip = createTooltip(document.body);
var handlerPoint = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
handlerPoint.activeEvt.addEventListener(function (isActive) {
if (isActive == true) {
viewer.enableCursorStyle = false;
viewer._element.style.cursor = '';
$('body').removeClass('drawCur').addClass('drawCur');
} else {
viewer.enableCursorStyle = true;
$('body').removeClass('drawCur');
}
});
handlerPoint.movingEvt.addEventListener(function (windowPosition) {
tooltip.showAt(windowPosition, '<p>点击绘制一个点</p>');
});
handlerPoint.drawEvt.addEventListener(function (result) {
tooltip.setVisible(false);
});
/*划线start*/
var handlerLine = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Line);
handlerLine.activeEvt.addEventListener(function (isActive) {
if (isActive == true) {
viewer.enableCursorStyle = false;
viewer._element.style.cursor = '';
$('body').removeClass('drawCur').addClass('drawCur');
} else {
viewer.enableCursorStyle = true;
$('body').removeClass('drawCur');
}
});
handlerLine.movingEvt.addEventListener(function (windowPosition) {
if (handlerLine.isDrawing) {
tooltip.showAt(windowPosition, '<p>左键点击确定折线中间点</p><p>右键单击结束绘制</p>');
} else {
tooltip.showAt(windowPosition, '<p>点击绘制第一个点</p>');
}
});
handlerLine.drawEvt.addEventListener(function (result) {
tooltip.setVisible(false);
//捕获线点位
console.log(result);
console.log(result.object._length);
console.log(result.object._positions);
let my_cartesian3 = new Cesium.Cartesian3();
my_cartesian3.x = result.object._positions[0].x;
my_cartesian3.y = result.object._positions[0].y;
my_cartesian3.z = result.object._positions[0].z;
let ellipsoid = viewer.scene.globe.ellipsoid;
let cartographic = ellipsoid.cartesianToCartographic(my_cartesian3);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let lng = Cesium.Math.toDegrees(cartographic.longitude);
let alt = cartographic.height;
console.log(lat);
console.log(lng);
console.log(alt);
});
/*划线end*/
var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, clampMode);//clampMode换成数字0表示空间多边形、1贴地、2贴对象
handlerPolygon.activeEvt.addEventListener(function (isActive) {
if (isActive == true) {
viewer.enableCursorStyle = false;
viewer._element.style.cursor = '';
$('body').removeClass('drawCur').addClass('drawCur');
} else {
viewer.enableCursorStyle = true;
$('body').removeClass('drawCur');
}
});
handlerPolygon.movingEvt.addEventListener(function (windowPosition) {
if (handlerPolygon.isDrawing) {
tooltip.showAt(windowPosition, '<p>点击确定多边形中间点</p><p>右键单击结束绘制</p>');
} else {
tooltip.showAt(windowPosition, '<p>点击绘制第一个点</p>');
}
});
handlerPolygon.drawEvt.addEventListener(function (result) {
tooltip.setVisible(false);
//捕获多边形点位
console.log(result);
console.log(result.object.positions);
// 实体
let NewFeature = {
"fieldNames": [
"SMUSERID",
"Z_value"
],
"fieldValues": [
"0",
0
],
"geometry": {
"parts": null,
"points": [
// {"x": 0, "y": 0},
// {"x": 0, "y": 20}
],
"style": null,
"type": "REGION"
}
}
//组装JSON
for (let i = 0; i < result.object.positions.length; i++) {
let my_cartesian3 = new Cesium.Cartesian3();
my_cartesian3.x = result.object.positions[i].x;
my_cartesian3.y = result.object.positions[i].y;
my_cartesian3.z = result.object.positions[i].z;
let ellipsoid = viewer.scene.globe.ellipsoid;
let cartographic = ellipsoid.cartesianToCartographic(my_cartesian3);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let lng = Cesium.Math.toDegrees(cartographic.longitude);
let alt = cartographic.height;
console.log(lat);
console.log(lng);
console.log(alt);
let point = {"x": lng, "y": lat};
NewFeature.geometry.points.push(point);
NewFeature.fieldValues[1] = alt;
}
NewFeature.geometry.points.push(NewFeature.geometry.points[0]);
//JSON组装完成，其他属性可以继续从这里添加
NewFeature = JSON.stringify(NewFeature);//JSON转为字符串
console.log(NewFeature);
addline(NewFeature);//提交到后台数据库
});
// 添加要素到数据库
function addline(NewFeature) {
var commit = getcommit();
//数据服务地址
var uri = "http://localhost:8090/iserver/services/data-mymap/rest/data/datasources/name/mydata/datasets/name/Region2d/features.rjson";
//欲增加的要素信息集合（包含1个要素）
var entity = [NewFeature];
commit.open("POST", encodeURI(uri) + "?returnContent=true", false, "", "");
commit.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
commit.send(toJSON(entity));
//解析从服务器端返回的 json 字符串，解析为一个 JavaScript 对象。
var response = json_parse(commit.responseText, null);
console.log(response);
//提示结果
if (response.length > 0) {
alert("创建要素成功，添加的要素资源的 ID 为：" + response[0])
} else {
alert("创建要素失败")
}
}
var handlerMarker = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Marker);
handlerMarker.activeEvt.addEventListener(function (isActive) {
if (isActive == true) {
viewer.enableCursorStyle = false;
viewer._element.style.cursor = '';
$('body').removeClass('drawCur').addClass('drawCur');
} else {
viewer.enableCursorStyle = true;
$('body').removeClass('drawCur');
}
});
handlerMarker.movingEvt.addEventListener(function (windowPosition) {
tooltip.showAt(windowPosition, '<p>点击绘制地标</p>');
});
handlerMarker.drawEvt.addEventListener(function (result) {
tooltip.setVisible(false);
});
$('#point').click(function () {
deactiveAll();
handlerPoint.activate();
});
$('#polyline').click(function () {
deactiveAll();
handlerLine.activate();
// console.log("handlerLine");
});
$('#polygon').click(function () {
deactiveAll();
handlerPolygon.activate();
});
$('#marker').click(function () {
deactiveAll();
handlerMarker.activate();
});
$('#clear').click(function () {
clearAll();
});
$('#toolbar').show();
$('#loadingbar').remove();
function deactiveAll() {
handlerLine.deactivate();
handlerPoint.deactivate();
handlerPolygon.deactivate();
handlerMarker.deactivate();
}
function clearAll() {
handlerLine.clear();
handlerPoint.clear();
handlerPolygon.clear();
handlerMarker.clear();
}
if (!scene.pickPositionSupported) {
alert('不支持深度拾取,无法进行鼠标交互绘制！');
}
}
if (typeof Cesium !== 'undefined') {
window.startupCalled = true;
onload(Cesium);
}
</script>
</body>
</html>
1216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
