WebGL绘制面并转为地理坐标二维多边形存储到数据库

本文主要是介绍WebGL绘制面并转为地理坐标二维多边形存储到数据库,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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"}}//组装JSONfor (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>

这篇关于WebGL绘制面并转为地理坐标二维多边形存储到数据库的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/399948

相关文章

SpringBoot3.X 整合 MinIO 存储原生方案

《SpringBoot3.X整合MinIO存储原生方案》本文详细介绍了SpringBoot3.X整合MinIO的原生方案,从环境搭建到核心功能实现,涵盖了文件上传、下载、删除等常用操作,并补充了... 目录SpringBoot3.X整合MinIO存储原生方案:从环境搭建到实战开发一、前言:为什么选择MinI

SQL server数据库如何下载和安装

《SQLserver数据库如何下载和安装》本文指导如何下载安装SQLServer2022评估版及SSMS工具,涵盖安装配置、连接字符串设置、C#连接数据库方法和安全注意事项,如混合验证、参数化查... 目录第一步:打开官网下载对应文件第二步:程序安装配置第三部:安装工具SQL Server Manageme

C#连接SQL server数据库命令的基本步骤

《C#连接SQLserver数据库命令的基本步骤》文章讲解了连接SQLServer数据库的步骤,包括引入命名空间、构建连接字符串、使用SqlConnection和SqlCommand执行SQL操作,... 目录建议配合使用:如何下载和安装SQL server数据库-CSDN博客1. 引入必要的命名空间2.

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

MySQL数据库中ENUM的用法是什么详解

《MySQL数据库中ENUM的用法是什么详解》ENUM是一个字符串对象,用于指定一组预定义的值,并可在创建表时使用,下面:本文主要介绍MySQL数据库中ENUM的用法是什么的相关资料,文中通过代码... 目录mysql 中 ENUM 的用法一、ENUM 的定义与语法二、ENUM 的特点三、ENUM 的用法1

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁

MySQL之InnoDB存储引擎中的索引用法及说明

《MySQL之InnoDB存储引擎中的索引用法及说明》:本文主要介绍MySQL之InnoDB存储引擎中的索引用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1、背景2、准备3、正篇【1】存储用户记录的数据页【2】存储目录项记录的数据页【3】聚簇索引【4】二