admin管理员组文章数量:1595246
wordpress轻量服务器不租了，内容先挪过来，有空再整理
1，System.Data.Entity.Core.EntityCommandExecutionException:“执行命令定义时出错。有关详细信息，请参阅内部异常。”
，一般是数据库没有更新的缘故，将最新的sql文件导到数据库里。或是SVN最新的数据库里的字段发生了变化，本地的数据库做出相应修改即可
2，svn错误 is already locked 解决方案
遇到这种问题的原因有很多，网络慢，磁盘不够，用户取消等等，导致svn代码被锁定；
解决方案如下图
点击clean up
点击ok即可
来看官方对clean up的解释：它的作用就是查找工作拷贝中的所有遗留的日志文件，删除进程中工作拷贝的锁。
3，找不到引用microsoft.office.core解决办法
打开项目引用，删除有叉标记的引用,右击选择添加引用，选择COM里面选择Microft Office 12.0 object Library
4，SVN一直提示输入用户名和密码
清理数据，或者直接改密码
5，word页码
（1）目录页，“更新域”，自动改变页码
（2）页码数不是从头到尾，可能是分为了好几节，“段落”里的“显示/隐藏编辑符号”，将不需要的分节符删除
6，网线连接，无网络
网络与Internet>更改适配器选项>属性>版本协议4>改成自动选取或改成可以用的ip地址
7，查看Windows日志
（1）、在打开的控制面板当中（右键我的电脑，选择属性，找到控制面板），以’类别‘方式来查看时，点击系统和安全；
（2）、在’系统和安全‘面板中找到’管理工具‘，点击下面的’查看事件日志‘，就可以打开’事件查看器‘了。
8，CTRL+F5和F5
Ctrl+F5是直接运行生成的程序，不进行重新编绎，所以运行起来比较快
F5是重新编绎后再运行，这样可以在程序代码中设置断点跟踪来调试程序
9，github上传本地项目代码
前提：有github账户
1，git工具安装和基本配置
1，官网下载：https://git-scm/
2，下载后安装，默认安装到Finish完成安装即可
3，配置git bash：
（下面的命令没有连接在一起的说明是有空格的，不要忽略了）
①打开Git Bash,输入ssh-keygen -t rsa -C"xxxx@qq"(自己github的注册邮箱)，回车（注意空格，没连在一起就是有空格）
②然后根据提示输入密码(passphrasw)，然后在输入一次密码(输入的密码为了安全，不会显示)，回车
③在显示的路径中的.ssh目录中找到id_rsa.pub文件(这是公共密钥，另一个文件里是私人密钥)，复制里面的内容
④登录github网站自己的账号，依次找到Settings>SSH and GPG keys，点击New SSH key,将上一步复制的内容粘贴到key中，title可填可不填，点击add ssh key即可
⑤然后回到Git Bush，输入ssh -T git@github，回车，然后输入你的github密码(仍然不会显示)，回车，
如果出现了You’ve successfully authenticated, but GitHub does not provide shell access 。那就说明，已经成功连上了GitHub
⑥输入git config --global user.name “xxx” （此处name可修改也不是用于登录github的登录名），回车；
输入git config --global user.email “xxxx@qq” (此处email必须与登录邮箱一致) ，回车。
可以输入git config --list查看自己的git信息
2，github上传本地项目代码
在github的库创建完成之后(我给库起名为myProject)，会出现一个网址(https://github/xxx/myProject.git)，下面会用到
①我想将文件放到d盘，所以需要将git bash定位到D盘；输入cd /D ，回车
②输入git clone https://github/xxx/myProject.git .(git clone后面就是上面的网址)，回车
③打开d盘，发现新出现了一个以我的库名命名的文件夹(myProject)。打开这个文件夹，创建一个txt文件，随便写点话。
④在git bash中定位到这个文件夹，输入cd /D/myProject ，回车。输入ls（是字母ls，作用是查看所定位的文件夹中有那些文件），回车，可以看到刚创建的txt文件出现了。
⑤输入git add 说明.txt，回车；
然后输入git commit -m “第一个测试文件”，（引号内的内容是自己写的给文件的备注），回车；
之后输入git push origin master，回车，出现登录界面，输入邮箱或用户名，和密码，然后点击Login.
之后可能再输入用户名和密码，打开你的GitHub，找到创建的库，发现已经有了刚才上传的文件
⑥之后再上传只需将文件放到库的对应文件夹中，然后定位到这个文件夹，使用git add 说明.txt；git commit -m “第一个测试文件”；git push origin master；类似指令提交。
⑦上传文件夹：
git clone https://github/xxx/myProject.git (把github上面的仓库克隆到本地，只在项目开始或github上项目被别人改动时才使用);
git add . (后面有个空格和点；把项目文件夹下面的文件都添加进来，后面如果要修改项目只需使用此句及下面两句)；
git commit -m "备注” (提交说明，准备提交暂存区中的更改的已跟踪文件);
git push -u origin master (把本地仓库push到github上面)；
10，ArcGIS10.2及ArcGIS Server10.2安装
链接：https://pan.baidu/s/1rEQNvn5dGmMmjZkAXrxUFg
提取码：w9wa
1，ArcGIS安装步骤
安装之前必须具备.NET FrameWork 3.5环境（即在控制面板>程序>程序与功能里，找到启用或关闭Windows功能，将.NET Framework 3.5(包括.NET 2.0和3.0)里面所有内容选中）
1、安装Desktop
2、安装LicenseManager
3、LicenseManager安装完成后，在License Server Administrator中点击停止，点击ok，并关闭。用arcgis10.2破解文件里的ARCGIS.exe、service.txt覆盖License Manager安装主目录下bin文件夹内的内容（如遇不能替换，打开任务管理器关闭imgrd.exe进程）
4、在“所有程序”里打开License Server Administrator，点击启动，重新读取许可。
5、将ArcGIS Administrator打开，选择Desktop结点 ->勾选Advanced(ArcInfo） Concurrent Use->将License Manager指向本机（localhost）（即立即定义一个许可管理器里填入localhost）。
2，ArcGIS Server安装步骤
https://blog.csdn/nominior/article/details/80211963
1,安装过程
1） 下载安装包并解压
2） 找到ESRI.exe安装文件并运行
3） 进入安装界面后，选择arcgis for server，点击setup安装
4） 点击“Next”按钮，进入下一步
5） 选择同接受许可协议后，点击“Next”按钮，进入下一步
6） 选择安装组件及方法，默认即可；选择安装目录，server为64位软件默认安装在系统盘ProgramFiles下，可更改
7） 为server安装python2.7，不建议修改安装路径
8） 创建操作系统账户和密码，创建后win账户中会增加一个账户，用户管理ArcGIS Server的操作系统进程。务必牢记账户和密码，可使用记事本的记录。
9） 是否导入已有Server配置，默认否
10） 点击install，开始自动安装
11） 等待一段时间后，安装完成，点击finish完成安装
12） 弹出认证方式，，选择使用认证文件认证，单击Browse，选择下载目录中的许可文件，点击下一步开始授权
13） 显示授权成功，你已经授权的文件功能，点击完成，完成安装及破解
2，网站创建
1）完成安装后会自动打开web网页，地址为http://localhost:6080/arcgis/manager/，首次进入需要创建站点管理员账户，用户管理站点中的各种服务形式的GIS资源，与之前创建的操作系统账户无关。建议记事本记录账户密码
2）指定站点服务器文件位置，默认即可
3）单击完成，完成配置，开始创建站点，需要较长时间
4）站点创建完成，进入首页（之后的登录都是这个页面），输入站点管理员账户和密码，登录站点
5）成功登录站点，显示为ArcGIS Server Manager，站点中有默认的简单世界城市地图服务，也可以自己使用arcmap发布其他服务
3， ArcGIS Server Manager无法进入问题的部分解决方案
有时输入http://localhost:6080/arcgis/manager/无法进入站点，如果多次刷新仍然无果
需要检查ArcGIS Server服务是否启动
- 进入win服务
1） 右击桌面的任务栏，单击任务管理器或者同时按下ctrl + alt +del键，在安全选项中选择任务管理器
2） 点击详细信息，选择服务标签，点击下方打开服务，进入win服务管理界面
3） 找到ArcGIS Server服务（服务按首字母排序，一般在考前位置），查看状态，一般无法进入站点原因为服务未打开，如图状态，可右击启动，服务启动后，再次尝试进入站点，可能会有少许延长，刷新1~2次即可。也可将Server服务设置为自动启动，双击服务，打开服务属性，在启动类型中选择自动，应用并确定。
11，字符串截取
1，字符串截取从第a位到第b位
str=str.substring(a,b);2，
start=str.indexOf("a"); //start表示a字符在str字符串第一次出现的位置，
end=str.lastindexOf("e"); //end表示e字符在str字符串最后一次出现的位置
以上如果找不到对应字符就返回-1；
3，JavaScript split() 方法用于把一个字符串分割成字符串数组
var data="1:2:3:4:5";
var array=data.split(":");
array=["1","2","3","4","5"];12，ORA-12560: TNS: TNS:protocol adapter error 协议适配器错误,
原因：监听器及database instance服务没有启动。
1，启动监听服务，OracleOraDb11g_home1TNSlistener
2,启动database instance,OracleServiceLIU,LIU就是你database的SID
其他原因：注册表问题。regedit，然后进入HKEY_LOCAL_MACHINE\SOFTWARE\ORACLE\HOME0将该环境变量ORACLE_SID设置为XXXX,XXXX就是你的database SID.或者右几我的电脑，属性–高级–环境变量—系统变量–新建，变量名=oracle_sid,变量值=XXXX,XXXX就是你的database SID.或者进入sqlplus前，在command line下输set oracle_sid=XXXX,XXXX就是你的database SID.
13，VUE出现的一些问题
0,，This relative module was not found
先npm run install更新包，再看看显示的错误文件是否有，路径是否正确
1，npm ERR! code ELIFECYCLE npm ERR! errno 1。
解决方法：进入项目目录，运行命令：npm install --save-dev node-sass
2,vue-cli 更新安装遇到的问题，卸载不掉旧版本2.9.6
解决方法：①执行卸载命令: 全局卸载：npm uninstall vue-cli -g
②删文件，
.npmrc文件删除掉：npm config ls -l可以查看文件位置：userconfig = "C:\\Users\\Administrator\\.npmrc"
删vue原始文件：窗口运行命令：where vue,找到当前安装位置，找到文件，删掉。保险起见可以再执行一次npm uninstall vue-cli -g，vue -V，已经没有版本号了
③安装新版：npm install -g @vue/cli
（vue cli安装指定版本：npm install -g @vue/cli@版本号）
3，VSCode配置启动Vue项目：安装两个插件
https://blog.csdn/ywl570717586/article/details/79754543
①、vetur插件的安装
该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选项->设置 打开设置界面，在设置界面右侧添加配置
②、eslint插件的安装
eslint智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误。至于安装，同样打开插件扩展窗口输入eslint点击安装插件，装好后也需要进行配置，在同vetur插件一样的地方进行配置
③，导入项目并编译
打开文件夹 导入项目，Ctrl+shift+Y呼出控制台，在控制台终端输入npm install添加包依赖
运行项目
4，vue/cli-ui新建工程报unknown option -- skipGetStart错误问题解决
https://blog.csdn/qq_15651815/article/details/105054030
14，vue cli自定义配置
按方向键 ↓↑选择，空格选中或取消。
enter键确定
15，“。。。”is not allowed to connect to this mysql server
SQL编辑器，运行下面语句
GRANT ALL PRIVILEGES ON . TO ‘myuser’@‘%’ IDENTIFIED BY ‘mypassword’ WITH GRANT OPTION;
FLUSH PRIVILEGES;FLUSH PRIVILEGES;
16，将name值相同的数组value值相加，合并成新的对象
arr={[name:'aa',value:11],[name:'bb',value:11],[name:'aa',value:22]}
function trans(arr) {
var result = [];
for (var i = 0; i < arr.length; i++) { var sum = arr[i].value; var arrOld = arr.concat([]); for (var j = arr.length - 1; j > i; j--) {
if (arr[i].name == arr[j].name) {
sum += arr[j].value;
arrOld.splice(j, 1);
}
}
arr = arrOld;
result.push({
name: arr[i].name,
value: sum
});
}
return result;
}
17，VUE中使用element-ui控件默认为英文修改为中文
main.js中添加
import enLocale from ‘element-ui/lib/locale/lang/en’; //英文import zhLocale from ‘element-ui/lib/locale/lang/zh-CN’; //中文
Vue.use(ElementUI, { zhLocale }); //要使用中文环境就引用中文，用英文则引用英文
18，SQL错误（1366）
字段不支持中文，字段字符集改成utf-8
19，对数组根据时间进行排序
sortDataArray: function(dataArray) {
return dataArray.sort(function(a, b) {
return new Date(b.date) - new Date(a.date);
})
}
20，鼠标的点击事件：双击时不触发单击事件
var timer = null;
//单击事件
//这里的layer是获取到的地图图层，点击事件针对此图层
layer.on(‘click’, (e) = >{
//清除第一次的单击事件
clearTimeout(timer);
//给单击事件添加一个计时器,当单击事件还没有触发时,取消这个事件,最后就只有双击事件的内容触发了
//setTimeout 计时器(延时器)
timer = setTimeout(function() {
console.log("触发了单击事件");
},
500, e) //1，500毫秒之后运行点击事件；2，将参数e传递到setTimeout函数里
})
//双击事件
layer.on(‘DblClick’, (e) = >{
//清除第二次的单击事件
clearTimeout(timer);
console.log(“触发了双击事件”);
})
21，vue中为标注点(arcgis)添加自定义弹窗
引入弹窗文件window.js
import showWindow from '../../../util/window'
使用window.js中的方法显示弹窗
var map = this.$map.mapControl;//获取地图
this.dataList2.forEach(function (item, i) {
//遍历数组，为点添加弹窗
//如果要显示标注，需要有坐标信息
if (item.LAT != 0 && item.LON != 0) {
//污染类型
var pipetype2 = item.POLLUTETYPE
//创建几何点
var pt2 = new esri.geometry.Point(
[item.LON, item.LAT],
new esri.SpatialReference({ wkid: 4549 })
)
//自定义弹窗
//console.log(showWindow.isOpenedByID());
if (showWindow.isOpenedByID(pipetype2 + item.Id) == false) {
var name = item.NAME
var html2 = ''
html2 =
'<div class="mapWindow_monitor">' +
'<div class="mapWindow_monitor_corner">' +
'</div>' +
'<div class="mapWindow_monitor_body">' +
'<div class="mapWindow_monitor_name">' +
name +
'</div>' +
'<ul class="mapWindow_monitor_content">' +
' <li class="mapWindow_monitor_normal">' +
' <span>污染类型:</span>' +
'<span>' +
item.POLLUTETYPE +
'</span>' +
'</li>' +
' <li class="mapWindow_monitor_normal">' +
' <span>企业性质:</span>' +
'<span>' +
item.NATURE +
'</span>' +
'</li>' +
' <li class="mapWindow_monitor_normal">' +
' <span>尾水排水河道:</span>' +
'<span>' +
item.DRAINAGERIVER +
'</span>' +
'</li>' +
' </ul>' +
'</div>' +
'</div>'
//显示地图窗体控件
showWindow.showLabel(pipetype2 + item.Id, map, pt2, html2, true)
}
}
})
window.js:
export default {
//var MapWindow = {
//窗体控件缓存
_mapWindowCatch: {},
//根据ID关闭窗体控件
closeByID: function (id) {
if (this._mapWindowCatch[id]) {
this._mapWindowCatch[id].Close();
delete this._mapWindowCatch[id];
}
},
//判断窗体是否已经存在
isOpenedByID: function (id) {
var isOpened = false;
if (this._mapWindowCatch[id]) {
console.log(this._mapWindowCatch);
isOpened = true;
}
return isOpened;
},
//关闭所有窗体控件
closeAll: function () {
var id;
for (id in this._mapWindowCatch) {
this._mapWindowCatch[id].Close();
delete this._mapWindowCatch[id];
}
},
//显示窗体控件
showLabel: function (id, map, point, html, canMove) {
if (!this._mapWindowCatch[id]) {
var mapWindow = new this.MapWindow(id, map, point, html, canMove);
this._mapWindowCatch[id] = mapWindow;
mapWindow.Show(point);
} else {
this._mapWindowCatch[id].Html(html);
this._mapWindowCatch[id].Point = point;
this._mapWindowCatch[id].Show();
}
},
showAlarm: function (id, map, point) {
if (!this._mapWindowCatch[id]) {
var mapWindow = new this.MapWindow(id, map, point, "", true);
this._mapWindowCatch[id] = mapWindow;
mapWindow.ShowAlarm();
}
},
labelAlarm: function (id) {
if (this._mapWindowCatch[id]) {
this._mapWindowCatch[id].AlarmShow();
}
},
labelAlarmOnlyOne: function (id) {
var myId;
for (myId in this._mapWindowCatch) {
this._mapWindowCatch[myId].AlarmHide();
}
if (this._mapWindowCatch[id]) {
this._mapWindowCatch[id].AlarmShow();
}
},
//窗体控件对象
MapWindow: function (id, map, point, html, canMove) {
var mapWindow = document.getElementById("mapWindow_" + id);
var alarmLabel = null;
if (!mapWindow) {
mapWindow = document.createElement("div");
mapWindow.setAttribute("id", "mapWindow_" + id);
mapWindow.style.position = "absolute";
mapWindow.style.visibility = "hidden";
//放在这里鼠标可以拖动地图
if (canMove) {
map.__container.appendChild(mapWindow);
//$(map.__container).append(mapWindow);
}
//这里鼠标不能拖动地图
else {
map.container.appendChild(mapWindow);
//$(map.container).append(mapWindow);
}
}
mapWindow.style.visibility = "hidden";
mapWindow.innerHTML = html;
if (mapWindow.children.length > 0) {
var $child = mapWindow.children[0];
$child.style.position = "absolute";
$child.style.top = -($child.height) + 'px';
$child.style.left = -($child.width / 2) + 'px';
}
mapWindow.style.display = "none";
mapWindow.style.visibility = "visible";
mapWindow.addEventListener('mouseenter', function () {
this.style.zIndex = 2;
})
mapWindow.addEventListener('mouseleave', function () {
this.style.zIndex = '';
})
this.Html = function (html) {
innerHTML(html);
};
//关闭临时图层
this.Close = function () {
//解除事件绑定
dojo.disconnect(onZoomStart);
dojo.disconnect(onExtentChange);
dojo.disconnect(onPan);
//移除临时图层
mapWindow.parentNode.removeChild(mapWindow);
// $(mapWindow).hide("slow", function () {
// $(mapWindow).remove();
// });
};
this.Show = function (point) {
showMapWindow(point);
};
this.ShowAlarm = function () {
showMapWindow();
this.AlarmShow();
};
this.AlarmShow = function () {
if (!alarmLabel) {
alarmLabel = getAlarm();
mapWindow.prepend(alarmLabel);
}
};
this.AlarmHide = function () {
if (alarmLabel) {
$(alarmLabel).remove();
alarmLabel = null;
}
};
//获取临时图层的坐标
this.Point = point;
var innerHTML = function (html) {
mapWindow.innerHTML = html;
var hidded = false;
if (mapWindow.style.display == 'none') {
mapWindow.style.display = 'block';
hidded = true;
}
if (mapWindow.children.length > 0) {
var $child = mapWindow.children[0];
$child.style.position = "absolute";
$child.style.top = -($child.height) + 'px';
$child.style.left = -($child.width / 2) + 'px';
}
if (hidded) {
mapWindow.style.display = 'none';
}
// mapWindow.html(html);
// var hidded = false;
// if (mapWindow.css('display') == 'none') {
// //if (!mapWindow.is(":visible")) {
// mapWindow.show();
// hidded = true;
// }
// var $child = mapWindow.children();
// $child.css({
// "position": "absolute",
// "top": -($child.height()),
// "left": -($child.width() / 2)
// });
// if (hidded) {
// mapWindow.hide();
// }
};
//私有方法：绘制报警动画
var getAlarm = function () {
var alarmCanvas = document.createElement('canvas');
alarmCanvas.style.position = "absolute";
alarmCanvas.setAttribute("width", "200px");
alarmCanvas.setAttribute("height", "200px");
alarmCanvas.style.left = "-100px";
alarmCanvas.style.top = "-100px";
alarmCanvas.style.zIndex = 1;
var ctx = alarmCanvas.getContext("2d");
var radius = 0;
var ap = 1.0;
var d = 1 / (60.0 / 5);
var i = 0;
var drawEllipse = setInterval(function () {
ctx.clearRect(0, 0, 700, 550);
var grd = ctx.createRadialGradient(100, 100, 0, 100, 100, radius);
grd.addColorStop(0, "rgba(230, 0, 0, 0)");
grd.addColorStop(0.25, "rgba(230, 0, 0, " + ap + ")");
grd.addColorStop(0.5, "rgba(230, 0, 0, 0)");
grd.addColorStop(0.75, "rgba(230, 0, 0, " + ap + ")");
grd.addColorStop(1, "rgba(230, 0, 0, 0)");
ctx.beginPath();
ctx.arc(100, 100, radius, 0, 2 * Math.PI, true);
ctx.fillStyle = grd;
ctx.fill();
ctx.beginPath();
ctx.arc(100, 100, 5, 0, 2 * Math.PI, true);
ctx.fillStyle = "rgba(230, 0, 0,1)";
ctx.fill();
if (radius >= 60 && ap <= 1 && ap >= 0) {
radius = 1; ap = 1.0;
}
i += 1;
radius += 5;
ap = ap / 1.16;
}, 100);
return alarmCanvas;
};
//私有方法：绘制临时图层
var showMapWindow = function (point) {
var point = point;
var location = map.toScreen(point);
if (location.x > 0 && location.y > 0 && location.x < map.width && location.y < map.height) {
mapWindow.style.top = location.y + 'px';
mapWindow.style.left = location.x + 'px';
mapWindow.style.display = 'block';
// mapWindow.css("top", location.y);
// mapWindow.css("left", location.x);
//mapWindow.fadeIn();
} else {
//mapWindow.hide();
mapWindow.style.display = 'none';
}
};
//私有方法：绑定地图缩放开始事件
var onZoomStart = dojo.connect(map, "onZoomStart", function () {
mapWindow.style.display = 'none';
//$(mapWindow).hide();
});
//私有方法：绑定地图缩放事件
var onExtentChange = dojo.connect(map, "onExtentChange", function () {
showMapWindow(point);
});
var onPan = dojo.connect(map, "onPan", function (extent, p) {
var location = map.toScreen(point);
mapWindow.style.left = (location.x + p.x) + 'px';
mapWindow.style.top = (location.y + p.y) + 'px';
// mapWindow.css("left", location.x + p.x);
// mapWindow.css("top", location.y + p.y);
});
}
//},
}
22，pycharm中文设置及出现的问题
中文设置：将resources_cn.jar文件放到pycharm安装目录的lib文件夹下，重新打开pycharm即可。
但会出现设置打不开等状况，这时将该中文包再拿出来就正常了。用完设置之后再把中文包放进去
链接：https://pan.baidu/s/1wmEanvl88ACJQ1m1rpJjsA
提取码：ee5v
23，pycharm更换python版本导致不能正常运行
File->Settings->Project->Project Interpreter，设置本地安装的Python解释器版本
将里面的路径都换成你自己的python安装路径
中文下无法打开设置，要改为英文
24，pycurl-7.43.1-cp34-cp34m-win_amd64.whl is not a supported wheel on this platform.
cp34表示对应python为3.4，要和自己用的python版本对应
25，pyspider运行卡死在result_worker starting 的解决办法
.bat文件运行
start cmd /c pyspider all
start cmd /c pyspider all
start cmd /c pyspider all
28，SQL
一、SQL语法
import pymysql
# 打开数据库连接
db=pymysql.connect(host='localhost',user='xxx',passwd='xxx',db='pyspider',port=3306,charset='utf8')
# 使用cursor()方法创建cursor游标对象
cursor=db.cursor()
# 1,SELECT语句：从数据库中提取数据
# ①SELECT 语句，从qndb表中选取id和title列("SELEXT * FROM qndb"SQL语句从表中选取所有列)
sql="""SELECT id,title,who FROM qndb
"""
# ②SELECT DISTINCT 语句,仅从qndb表的who列中选取唯一不同的值，也就是去掉who列重复值
sql="""SELECT DISTINCT who FROM qndb
"""
# ③WHERE子句，用于提取那些满足条件的记录(还有AND 和OR运算符)
sql="""SELECT * FROM qndb
WHERE day<=3 AND (who='独自一人' OR who='')
"""
# ④ORDER BY关键字，用于对结果集进行排序(带DESC为降序排序，ASC为升序排序，默认是ASC)
# BY后面可以是一列也可以是多列，这里先按date列进行排序，date相同的再按照date列降序排列
sql="""SELECT * FROM qndb ORDER BY day,date DESC
"""
# ⑤SELECT LIMT语句。用于规定要返回的记录的数目
sql="""SELECT * FROM qndb LIMIT 5
"""
# 2，INSERT INTO语句，向表中插入一个新行(id列是自动更新的)，可以插入所有指定列，也可以只插入部分列，只要对应字段即可
sql="""INSERT INTO qndb (url,title,date,day,who,text)
VALUES ('url','测试','2020-12-11',5,'独自一人','测试文本')
"""
# 3，UPDATE语句，用于更新表中已存在的记录(如果没有WHERE子句，代码会将表中所有数据修改)
sql="""UPDATE qndb
SET title='测试更新',image='iamge'
WHERE title='测试'
"""
# 4，DELETE语句，用于删除表中的行("DELETE * FROM qndb"删除表中所有数据)
sql="""DELETE FROM qndb
WHERE title='待删除' AND url='url'
"""
# 5,LIKE操作符，用于在WHERE子句中搜索列中的指定模式
# '%西藏%':title包含"西藏"的数据；'前言%':"前言"开头的数据；'%攻略'：以“攻略”结尾的数据
# %:%通配符
sql="""SELECT * FROM qndb
WHERE title LIKE '%西藏%'
"""
# 6，通配符，可用于替代字符串中的任何其他字符，常与LIKE操作符一起使用
# %:替代0个或多个字符；_:替代一个字符；[charlist]：字符列中的任何单一字符；[^charlist]或[!charlist]：不在字符列中的任何单一字符
# ①_通配符
# 选取title以一个任意字符开始，然后是"试"，然后又是一个任意字符，然后是“新”的数据
sql="""SELECT * FROM qndb
WHERE title LIKE '_试_新'
"""
# ②[charlist]通配符
# 选取url从a到h字母开头的网站
sql="""SELECT * FROM qndb
WHERE url REGEXP '^[a-h]'
"""
# 7，IN操作符，允许在WHERE子句中规定多个值
# 选取who为“独自一人”或“情侣”的所有数据
sql="""SELECT * FROM qndb
WHERE who IN ('独自一人','情侣')
"""
# 8，BETWEEN操作符，用于选取介于两个值之间的数据范围内的值
# ①BETWEEN操作符
sql="""SELECT * FROM qndb
WHERE day BETWEEN 1 AND 3
"""
# ②NOT BETWEEN操作符
sql="""SELECT * FROM qndb
WHERE day NOT BETWEEN 1 AND 3
"""
# ③带有IN的BETWEEN操作符
# 带有文本值，选取url介于‘h’和‘J’开头,并且who不为"三五好友";
# 带有日期值,date介于'2020-07-01'和'2020-8-31'的所有数据
sql="""SELECT * FROM qndb
WHERE (url BETWEEN 'h' AND 'j')
AND who NOT IN ('三五好友')
AND date BETWEEN '2020-07-01' AND '2020-8-31'
"""
# 查找用户表中Email格式错误的用户记录
# sql="""SELECT *
# FROM users
# WHERE email NOT REGEXP '^[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}$'
# """
# 9，SQL别名，可以为表名称或列名称指定别名
"""
在下面的情况下，使用别名很有用：
在查询中涉及超过一个表
在查询中使用了函数
列名称很长或者可读性差
需要把两个列或者多个列结合在一起
"""
# 选取qndb表中的id字段等于wiyiguahao表中的id字段，并且qndb表中day为1的对应数据
# 显示qndb表中的title字段和对应wiyiguahao表中的expertName字段
sql="""SELECT q.title,w.expertName
FROM qndb AS q,wiyiguahao as w
WHERE q.id=w.id and q.day=1
"""
# 10，SQL连接（JOIN），用于把来自两个或多个表的行结合起来
# ①INNER JOIN关键字，表中存在至少一个匹配时返回行(INNER JOIN和JOIN是相同的),取AB交集
sql="""SELECT qndb.id,qndb.title,wiyiguahao.expertName
FROM qndb
INNER JOIN wiyiguahao
ON qndb.id=wiyiguahao.id
"""
# ②LEFT JOIN关键字，先返回qndb表中所有数据，再返回两表匹配的数据，如果表二没有匹配，则相应字段显示为NONE，取A全部，B没有对应的值为NULL
# RIGHT JOIN关键字，先返回wiyiguahao表中所有数据，再返回两表匹配的数据，如果表一没有匹配，则相应字段显示为NONE，取B全部，A没有对应的值为NULL
sql="""SELECT qndb.id,qndb.title,wiyiguahao.expertName
FROM qndb
RIGHT JOIN wiyiguahao
ON qndb.id=wiyiguahao.id
"""
# 11，UNION操作符，合并两个或多个SELECT语句的结果
"""
UNION 内部的每个 SELECT 语句必须拥有相同数量的列。列也必须拥有相似的数据类型。
同时，每个 SELECT 语句中的列的顺序必须相同。
UNION自带去重
"""
sql="""SELECT id,title FROM qndb
WHERE id<=100
UNION ALL
SELECT id,expertName FROM wiyiguahao
WHERE id<=150
ORDER BY id
"""
# 12,INSERT INTO SELECT语句，从一个表复制数据，然后把数据插入到一个已存在的表中
# 将wiyiguahao表中对应数据插入到qndb表中
sql="""INSERT INTO qndb (title,url)
SELECT expertName,image FROM wiyiguahao
WHERE id<=5
"""
# 13，CREATE DATABASE语句，创建数据库(F NOT EXISTS,如果不存在的话)
sql="""CREATE DATABASE IF NOT EXISTS my_db
"""
# CREATE TABLE语句创建数据库中的表
sql="""CREATE TABLE IF NOT EXISTS Persons
(
PersonID int NOT NULL,
LastName varchar(255) NOT NULL,
FirstName varchar(255) DEFAULT 'hansen',
Address varchar(255),
City varchar(255),
PRIMARY KEY (PersonID),
UNIQUE (LastName)
)
"""
# 14,SQL约束（Constraints）
# ①NOT NULL 约束，强制列不接受NULL值
# 添加NOT NULL约束
sql="""ALTER TABLE Persons
MODIFY FirstName varchar(255) NOT NULL
"""
# 删除NOT NULL约束
sql="""ALTER TABLE Persons
MODIFY LastName varchar(255) NULL
"""
# ②UNIQUE约束，唯一标识数据库表中的每条记录
"""
UNIQUE (索引)和 PRIMARY KEY (主索引)约束均为列或列集合提供了唯一性的保证。
PRIMARY KEY 约束拥有自动定义的 UNIQUE 约束。
请注意，每个表可以有多个 UNIQUE 约束，但是每个表只能有一个 PRIMARY KEY 约束。
"""
# 如表已被创建时，如需创建UNIQUE约束，则
sql="""ALTER TABLE Persons
ADD UNIQUE (LastName)
"""
# 撤销UNIQUE约束
sql="""ALTER TABLE Persons
DROP INDEX LastName
"""
# ③PRIMARY KEY约束，
"""
PRIMARY KEY 约束唯一标识数据库表中的每条记录。
主键必须包含唯一的值。
主键列不能包含 NULL 值。
每个表都应该有一个主键，并且每个表只能有一个主键
"""
# 如表已被创建时，如需创建PRIMARY KEY约束，则
sql="""ALTER TABLE Persons
ADD PRIMARY KEY (PersonID)
"""
# 撤销PRIMARY KEY约束
sql="""ALTER TABLE Persons
DROP PRIMARY KEY
"""
# ④FOREIGN KEY约束(外键)，一个表中的FOREIGN KEY 指向另一个表中的UNIQUE KEY（唯一约束的键）
"""
字段类型要相同
"Orders" 表中的 "p_Id" 列指向 "Persons" 表中的 "PersonID" 列。
"Persons" 表中的 "PersonID" 列是 "Persons" 表中的 PRIMARY KEY。
"Orders" 表中的 "p_Id" 列是 "Orders" 表中的 FOREIGN KEY。
FOREIGN KEY 约束用于预防破坏表之间连接的行为。
FOREIGN KEY 约束也能防止非法数据插入外键列，因为它必须是它指向的那个表中的值之一。
"""
sql="""ALTER TABLE Orders
ADD FOREIGN KEY (p_Id)
REFERENCES Persons (PersonID)
"""
# 撤销FOREIGN KEY约束(这里的orders_ibfk_1是外键说明名称)
sql="""ALTER TABLE Orders
DROP FOREIGN KEY orders_ibfk_1
"""
# ⑤CHECK约束，用于限制列中的值得范围
"""
如果对单个列定义 CHECK 约束，那么该列只允许特定的值。
如果对一个表定义 CHECK 约束，那么此约束会基于行中其他列的值在特定的列中对值进行限制
MySQL8.0.16以下版本不支持SQL检查约束
"""
sql="""ALTER TABLE Persons
ADD CHECK (PersonID>1)
"""
# 撤销
sql="""ALTER TABLE Persons
DROP CHECK chk_Person
"""
# ⑥DEFAULT约束，用于向列中插入默认值
sql="""ALTER TABLE Persons ALTER City SET DEFAULT '某城市'
"""
# 15，CREATE INDEX语句，用于在表中创建索引(在不读取整个表的情况下，索引使数据库应用程序可以更快地查找数据)
# CREATE UNIQUE INDEX创建一个唯一的索引，不允许使用重复的值，而下面的语句则允许使用重复的值
sql="""CREATE INDEX index1
ON Persons (City)
"""
# 16，SQL DROP语句，撤销索引，撤销表，撤销数据库
# ①撤销索引
sql="""ALTER TABLE Persons DROP INDEX index1
"""
# ②删除表
sql="""DROP TABLE test
"""
# ③删除数据库
sql="""DROP DATABASE test
"""
# ④删除表内数据，不删除表
sql="""TRUNCATE TABLE test
"""
# 17,ALTER TABLE语句，用于在已有的表中添加。删除或修改列
# ①在表中添加列
sql="""ALTER TABLE test
ADD name varchar(255)
"""
# ②改变表中列的数据类型
sql="""ALTER TABLE test
MODIFY COLUMN name varchar(100)
"""
# ③删除列
sql="""ALTER TABLE test
DROP COLUMN name
"""
# 18,AUTO_INCREMENT字段，自增
sql="""CREATE TABLE test
(
ID int NOT NULL AUTO_INCREMENT,
name varchar(255),
PRIMARY KEY (ID)
)
"""
# 自增从2开始
sql="""ALTER TABLE test AUTO_INCREMENT=2
"""
# 19,Views视图(拿出部分数据来)
# CREATE VIEW 创建qndb的视图，命名为view_one
# REATE OR REPLACE VIEW 如果数据库中存在这个名字的视图，就替代它，若没有则创建视图
sql="""CREATE VIEW view_one AS
SELECT title
FROM qndb
"""
# 查询视图
sql="""SELECT * FROM view_one
"""
# 撤销视图
sql="""DROP VIEW view_one
"""
# 20，SQL日期（Dates）
"""
NOW() 返回当前的日期和时间；CURDATE() 返回当前的日期；CURTIME() 返回当前的时间
DATE() 提取日期或日期/时间表达式的日期部分
EXTRACT() 返回日期/时间的单独部分
DATE_ADD 向日期添加指定的时间间隔
DATE_SUB() 从日期减去指定的时间间隔
DATEDIFF() 返回两个日期之间的天数
DATE_FORMAT() 用不同的格式显示日期/时间
"""
sql="""SELECT EXTRACT(YEAR FROM NOW()),DATE_ADD(NOW(),INTERVAL 45 DAY)
"""
try:
# 执行SQL语句
cursor.execute(sql)
# 提交到数据库执行
dbmit()
# 获取符合条件的所有数据
results = cursor.fetchall()
for item in results:
print(item)
except Exception as e:
# 发生错误时回滚
db.rollback()
print(e)
# 关闭数据库连接
db.close()
二、SQL函数
import pymysql
# 创建数据库连接
db=pymysql.connect(host='localhost',user='xxx',passwd='xxx',db='pyspider',port=3306,charset='utf8')
# 创建cursor游标对象
cursor=db.cursor()
# SQL语句
sql="""SELECT * FROM qndb
"""
# 1,SQL Aggregate函数，计算从列中取得的值，返回一个单一的值
# ①AVG()函数，返回数值列的平均值
# 选择day值大于day列平均值的数据
sql="""SELECT Id,day FROM qndb
WHERE day > (SELECT AVG(day) FROM qndb)
"""
# ②COUNT()函数，返回匹配指定条件的行数
# 选择day值为1的行数
sql="""SELECT COUNT(day) FROM qndb
WHERE day=1
"""
# ③FIRST()函数，返回指定列中第一个记录的值(类比还有LAST()函数，返回最后一个值)
# 只有MS Access支持FIRST()函数
sql="""SELECT FIRST(day) FROM qndb
"""
# 而MYSQL就需要限制返回数据数目来达到同样的目的
# ORDER BY id ASC 按id列顺序排列；LIMIT 1 限制返回数据数目为1
# 若要返回最后一个值，只需改为逆序排列(ORDER BY id DESC)
sql="""SELECT day FROM qndb
ORDER BY id ASC
LIMIT 1
"""
# ④MAX()函数，返回指定列的最大值;MIN()函数，返回指定列的最小值
sql="""SELECT MAX(day) FROM qndb
"""
# ⑤SUM()函数，返回数值列的和
sql="""SELECT SUM(day) FROM qndb
"""
# 2,SQL Scalar函数，基于输入值，返回一个单一的值
# ①UCASE()函数，把字段的值转换为大写;LCASE()函数，把字段的值转化为小写
sql="""SELECT UCASE(url) FROM qndb
"""
# ②MIN()函数，用于从文本中提取字符
# 从school表的school_name列中提取前5个字符
sql="""SELECT MID(school_name,1,5) FROM school
"""
# ③LENGTH()函数，返回文本字段中值得长度
# 从school表中选取school_name列和school_name列中值得长度
sql="""SELECT school_name,LENGTH(school_name) FROM school
"""
# ④ROUND()函数，用于把数值字段舍入为指定的小数位数(ROUND返回值被变换为一个BIGINT)
sql="""SELECT ROUND(day,2) FROM qndb
"""
# ⑤NOW()函数，返回当前系统的日期和时间
sql="""SELECT title,NOW() FROM qndb
"""
# ⑥FORMAT()函数，用于对字段的显示进行格式化
sql="""SELECT title,DATE_FORMAT(NOW(),'%Y-%m-%d') FROM qndb
"""
# 3,GROUP BY语句，可结合一些聚合函数来使用，根据一个或多个列队结果进行分组
# 统计表中每个城市大学的数目
sql="""SELECT city,SUM(1)
FROM school GROUP BY city
"""
# GROUP BY多表连接
# HAVING 子句，筛选分组后的各组数据
sql="""SELECT school.city,COUNT(qndb.Id) FROM qndb
LEFT JOIN school
ON qndb.Id=school.Id
GROUP BY school.city
HAVING COUNT(qndb.Id)>9
"""
# 4，EXISTS运算符，用于判断查询子句是否有记录，如果有返回True,否则返回False
sql="""SELECT school_name
FROM school
WHERE EXISTS
(SELECT day FROM qndb WHERE school.Id=qndb.Id
AND day<=5 )
"""
# 取日期倒数第三条数据
sql="""SELECT * FROM
(SELECT * FROM qndb ORDER BY date DESC LIMIT 3) AS derived
ORDER BY date
LIMIT 1
"""
# 从倒数第二的位置向后取一条数据
sql="""SELECT * FROM qndb
ORDER BY date DESC
LIMIT 2,1
"""
try:
# 执行SQL语句
cursor.execute(sql)
# 提交到数据库执行
dbmit()
# 后去符合条件的所有数据
results=cursor.fetchall()
for item in results:
print(item)
except Exception as e:
print(e)
# 发生错误，则数据库执行回滚
db.rollback()
# 关闭数据库
db.close()29，在IIS里发布的项目里，aspx文件未被识别，显示404错误(还有模块列表中不存在此处理程序所需的指定模块，如果你添加脚本映射处理程序映射，则IsapiModule或CgiModule必须在模块列表中)
解决步骤：
一、添加脚本映射
1，打开处理映射程序
2，添加脚本映射
脚本映射的内容：
请求路径：
*.aspx
可执行文件：%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll
名称：PageHandlerFactory-ISAPI-4.0_64bit
请求限制：
二、点击确定之后，报了另一个错误：
(模块列表中不存在此处理程序所需的指定模块，如果你添加脚本映射处理程序映射，则IsapiModule或CgiModule必须在模块列表中)
解决措施：模块列表中不存在那就去模块列表看一下吧，选中对应的网站右侧 模块 列表中确实没有对应的模块，且新建本地模块时并无该选项，在C:\Windows\System32\inetsrv\config目录找到applicationHost.config文件；在里面的globalModules节点里面配置模块列表中显示的内容。既：
<add name="CgiModule" image="%windir%\System32\inetsrv\cgi.dll" />
<add name="IsapiModule" image="%windir%\System32\inetsrv\isapi.dll" />
30，用一句sql语句将数据库中的两列值进行交换
update table set first=second, second=first;
其中table需要写上你需要的表的名字，first和second都是table中的列属性
在这句后面可以加上条件还可以做其他的精确查询
31，Navicat创建oracle表一些问题
ORA-00904:"SNO" 标识符无效；
"ORA-00942: 表或视图不存在"。
Oracle 是大小写敏感的，会将字段名和表名转成大写
比如MENU表里的Name字段，到后台就变成NAME了，如果后台的模型文件中还是：
public string Name {get;set;}就会报错ORA-00904了
32，常用SQL 查询语句(MYSQL版)
1，查看表所有字段数据
select * from account2，查看表部分字段
select id,customer_name from account3，查看表10条数据
select id,customer_name from account limit 104，根据字段值分组，统计数量
select customer_type,count(customer_type) from account group by customer_type5，连表查询（内连接）
select account.id,account_balance_record.customer_name from account join account_balance_record on account.id=account_balance_record.account_id6，连表查询（左连接-外连接）
select account.id,account_balance_record.customer_name from account left join account_balance_record on account.id=account_balance_record.account_id
左外连接包含left join左表所有行，如果左表中某行在右表没有匹配，则结果中对应行右表的部分全部为空(NULL).
注：此时我们不能说结果的行数等于左表数据的行数。当然此处查询结果的行数等于左表数据的行数，因为左右两表此时为一对一关系。
7，连表查询（右连接-外连接）
select account.id,account_balance_record.customer_name from account right join account_balance_record on account.id=account_balance_record.account_id
右外连接包含right join右表所有行，如果左表中某行在右表没有匹配，则结果中对应左表的部分全部为空(NULL)。
注：同样此时我们不能说结果的行数等于右表的行数。当然此处查询结果的行数等于左表数据的行数，因为左右两表此时为一对一关系。
8，连表查询（完全外连接-外连接）
select account.id,account_balance_record.account_id from account left join account_balance_record on account.id=account_balance_record.account_id
UNION
select account.id,account_balance_record.account_id from account right join account_balance_record on account.id=account_balance_record.account_id
9，查询当前连接所有数据库名
SELECT SCHEMA_NAME AS `Database` FROM INFORMATION_SCHEMA.SCHEMATA;10，查询填写数据所有表名（这里的数据库名为ncgas）
select table_name from information_schema.tables where table_schema='ncgas';11，查询数据库某一张表的所有字段
SELECT
column_name
FROM
information_schema.columns
WHERE
table_schema='ncgas'
AND
table_name='account'33，SuperMap 3D_WebGL(一)通视分析,可视域分析
div：
<html>
<head></head>
<body>
<div id="spaceAnalys" style="display:none; position:absolute;width:300px;height:50px;top:100px;right:500px">
<div id="intervisibilityBar" class="param-container tool-bar">
<button type="button" id="chooseView" class="button black">选取观察位置</button>
<button type="button" id="addPoint" class="button black" style="display:none">添加目标点</button>
<button type="button" id="clear" class="button black">清除</button>
</div>
</div>
</body>
</html>
JS：
$(function () {
var startBtn = document.getElementById("visionField");
var startBtn1 = document.getElementById("intervisibility"); startBtn.onclick =
function () { visibleAreaAnalys.init();
} startBtn1.onclick =
function () { throughAbleAnalys.init();
}
})
/** * 可视域分析 * */
var visibleAreaAnalys = { viewer: top.Freedom.iClient3D.viewer,
scene: top.Freedom.iClient3D.scene,
viewPosition: null,
isBind : false,
Cesium: top.Cesium,
container: null, //工具条
pointHandler: null,//画点处理器
handler: null,//可视域分析处理器
//建可视域分析对象
viewshed3D: null,
viewModel: null, //绑定的模型 knockout
bindEvent: function () { var that = this; $(".close", window.top.document).click(function () { $("#wrapper", window.top.document).hide(); }); var addPointBtn = top.document.getElementById("addPoint"); if (addPointBtn) { addPointBtn.style.display = 'none'; }
// 鼠标移动时间回调
that.handler.setInputAction(function (e) {
// 若此标记为false，则激活对可视域分析对象的操作
if (!that.scene.viewFlag) {
//获取鼠标屏幕坐标,并将其转化成笛卡尔坐标
var position = e.endPosition;
var last = that.scene.pickPosition(position); //计算该点与视口位置点坐标的距离
var distance = that.Cesium.Cartesian3.distance(that.viewPosition, last); if (distance > 0) {
// 将鼠标当前点坐标转化成经纬度
var cartographic = that.Cesium.Cartographic.fromCartesian(last);
var longitude = that.Cesium.Math.toDegrees(cartographic.longitude); var latitude = that.Cesium.Math.toDegrees(cartographic.latitude); var height = cartographic.height;
/* 通过该点设置可视域分析对象的距离及方向 */ that.viewshed3D.setDistDirByPoint([longitude, latitude, height]); } } }, that.Cesium.ScreenSpaceEventType.MOUSE_MOVE); that.handler.setInputAction(function (e) {
/* 鼠标右键事件回调，不再执行鼠标移动事件中对可视域的操作 */ that.scene.viewFlag = true;
$("#wrapper", window.top.document).show(); that.viewModel.direction = that.viewshed3D.direction; that.viewModel.pitch = that.viewshed3D.pitch; that.viewModel.distance = that.viewshed3D.distance; that.viewModel.horizontalFov = that.viewshed3D.horizontalFov; that.viewModel.verticalFov = that.viewshed3D.verticalFov; }, that.Cesium.ScreenSpaceEventType.RIGHT_CLICK); top.document.getElementById("chooseView").onclick = function () { that.bindData(); if (that.pointHandler.active) { that.pointHandler.deactivate(); } //先清除之前的可视域分析 that.viewer.entities.removeAll(); that.viewshed3D.distance = 0.1; that.scene.viewFlag = true; //激活绘制点类 that.pointHandler.activate(); }; that.pointHandler.drawEvt.addEventListener(function (result) { var point = result.object; var position = point.position; that.viewPosition = position; // 将获取的点的位置转化成经纬度 var cartographic = that. Cesium.Cartographic.fromCartesian(position); var longitude = that.Cesium.Math.toDegrees(cartographic.longitude); var latitude = that.Cesium.Math.toDegrees(cartographic.latitude); var height = cartographic.height + 1.8; point.position = that.Cesium.Cartesian3.fromDegrees(longitude, latitude, height); if (that.scene.viewFlag) { // 设置视口位置 that.viewshed3D.viewPosition = [longitude, latitude, height]; that.viewshed3D.build(); // 将标记置为false以激活鼠标移动回调里面的设置可视域操作 that.scene.viewFlag = false; } }); $("#clear", window.top.document).on("click", function () { that.viewer.entities.removeAll(); console.log(that.viewer.entities); that.viewshed3D.distance = 0.1; that.scene.viewFlag = true; $("#wrapper", window.top.document).hide(); }) }, unbindEvent: function () { //在这里写解绑handler的内容,不然各功能的事件会相互影响。 }, bindData: function () { var that = this; //判断是否已经绑定过； for (var i = 0; i < top.Freedom.App.applyBindingItems.length; i++) { if (top.Freedom.App.applyBindingItems[i] == "wrapper") { isBind = true; return; } } //没有绑定过再进行绑定 if (!that.isBind) { that.Cesium.knockout.track(that.viewModel); var toolbar = top.document.getElementById('wrapper'); that.Cesium.knockout.applyBindings(that.viewModel, toolbar); that.Cesium.knockout.getObservable(that.viewModel, 'direction').subscribe( function (newValue) { that.viewshed3D.direction = parseFloat(newValue); } ); that.Cesium.knockout.getObservable(that.viewModel, 'pitch').subscribe( function (newValue) { that.viewshed3D.pitch = parseFloat(newValue); } ); that.Cesium.knockout.getObservable(that.viewModel, 'distance').subscribe( function (newValue) { that.viewshed3D.distance = parseFloat(newValue); } ); that.Cesium.knockout.getObservable(that.viewModel, 'verticalFov').subscribe( function (newValue) { that.viewshed3D.verticalFov = parseFloat(newValue); } ); that.Cesium.knockout.getObservable(that.viewModel, 'horizontalFov').subscribe( function (newValue) { that.viewshed3D.horizontalFov = parseFloat(newValue); } ); that.Cesium.knockout.getObservable(that.viewModel, 'visibleAreaColor').subscribe( function (newValue) { var color = that. Cesium.Color.fromCssColorString(newValue); that.viewshed3D.visibleAreaColor = color; } ); that.Cesium.knockout.getObservable(that.viewModel, 'invisibleAreaColor').subscribe( function (newValue) { var color = that.Cesium.Color.fromCssColorString(newValue); that.viewshed3D.hiddenAreaColor = color; } ); //top.Freedom.App.applyBindingItems.push("wrapper"); } }, init: function (viewshed3D) { var that = this; that.container = top.document.getElementById("spaceAnalys");//工具条 that.viewshed3D = new top.Cesium.ViewShed3D(that.scene); //建可视域分析对象 that.viewModel= { direction: 1.0, pitch: 1.0, distance: 1.0, verticalFov: 1.0, horizontalFov: 1.0, visibleAreaColor: '#ffffffff', invisibleAreaColor: '#ffffffff' };//绑定的模型 knockout if (that.container) { that.container.style.display = 'block'; } that.pointHandler = new top.Cesium.DrawHandler(that.viewer, that.Cesium.DrawMode.Point);//画点处理器 that.handler = new top.Cesium.ScreenSpaceEventHandler(that.scene.canvas);//可视域分析处理器 //that.setViewFlag(true); that.scene.viewFlag = true; that.bindEvent(); } } /** * 通视分析 * */ var throughAbleAnalys = { viewer : top.Freedom.iClient3D.viewer, scene : top.Freedom.iClient3D.scene, Cesium: top.Cesium, sightline: null, container: null, bindEvent: function () { var that = this; var addPointBtn = top.document.getElementById("addPoint"); var chooseViewBtn = top.document.getElementById("chooseView"); var clearBtn = top.document.getElementById("clear"); if (addPointBtn) { addPointBtn.style.display = 'inline-block'; } chooseViewBtn.onclick = function () { if (that.pointHandler.active) { return; } that.scene.viewFlag = true; that.viewer.entities.removeAll(); if (that.sightline.couldRemove) { that.sightline.removeAllTargetPoint(); } //激活绘制点类 that.pointHandler.activate(); }; addPointBtn.onclick = function () { that.scene.viewFlag = false; that.pointHandler.activate(); }; that.pointHandler.drawEvt.addEventListener(function (result) { var point = result.object; point.show = false; var position = result.object.position; // 将获取的点的位置转化成经纬度 var cartographic = that.Cesium.Cartographic.fromCartesian(position); var longitude = that.Cesium.Math.toDegrees(cartographic.longitude); var latitude = that.Cesium.Math.toDegrees(cartographic.latitude); var height = cartographic.height; var Circle1 = top.Freedom.iClient3D.viewer.entities.add({ position: top.Cesium.Cartesian3.fromDegrees(longitude, latitude), name: "Green circle at height with outline", ellipse: { semiMinorAxis: 100.0, semiMajorAxis: 100.0, height:10, material: top.Cesium.Color.RED.withAlpha(0.5), outline: false, // height must be set for outline to display }, }); var Circle2 = top.Freedom.iClient3D.viewer.entities.add({ position: top.Cesium.Cartesian3.fromDegrees(longitude, latitude), name: "Green circle at height with outline", ellipse: { semiMinorAxis: 150.0, semiMajorAxis: 150.0, height:10, material: top.Cesium.Color.RED.withAlpha(0.2), outline: true, // height must be set for outline to display }, }); if (that.scene.viewFlag) { that.viewer.entities.add({ position: position, point: { pixelSize: 10, color: that.Cesium.Color.WHITE } }); //设置视口位置 that.sightline.viewPosition = [longitude, latitude, height]; that.scene.viewFlag = false; } else { //添加视点 that.sightline.addTargetPoint({ position: [longitude, latitude, height], name: "point" + new Date() }); that.sightline.couldRemove = true; } }); clearBtn.onclick = function () { that.viewer.entities.removeAll(); if (that.sightline.couldRemove) { that.sightline.removeAllTargetPoint(); that.sightline.couldRemove = false; } } }, unbindEvent: function () { /**********重要************/ //在这里写解绑handler的内容,不然各功能的事件会相互影响。 }, init: function () { var that = this; that.sightline = new top.Cesium.Sightline(that.scene); that.sightline.couldRemove = false; that.scene.viewFlag = true; that.pointHandler = new top.Cesium.DrawHandler(that.viewer, that.Cesium.DrawMode.Point); that.container = top.document.getElementById("spaceAnalys"); if (that.container) { that.container.style.display = 'block'; } that.sightline.build(); that.bindEvent(); } }
34，SuperMap 3D_WebGL(二)分屏显示
主要函数：multiViewportMode(获取或者设置当前场景的多视口模式,默认单视口)。
html:
<html>
<head></head>
<body>
<a id="screenSplit" class="columitems">分屏显示</a>
<!--分屏-->
<div id="split_up" style="display: none;"></div>
<div id="split_bottom" style="display: none;"></div>
<div id="split_left" style="display: none;"></div>
<div id="split_right" style="display: none;"></div>
<div id="split_vertical_trisection_left" style="display: none;"></div>
<div id="split_vertical_trisection_right" style="display: none;"></div>
<div id="screenSplit" class="param-container tool-bar" style="display:none;position:absolute;width:200px;height:200px;top:50px;left:1000px;">
<select id="viewportType"> <option value="NONE" selected="">不使用分屏</option> <option value="HORIZONTAL">水平分屏</option> <option value="VERTICAL">垂直分屏</option> <option value="TRIPLE">三视口</option> <option value="VerticalTrisection">水平三视口</option> <option value="QUAD">四视口</option> </select>
<div id="pannel" style="padding: 10px;display: none;">
<div id="ground">
<p>地形：</p>
<div>
<label id="g_one" class="Split"> <input type="checkbox" id="ground_one" data-value="0" checked="" /> <span>一</span> </label>
<label id="g_two" class="Split"> <input type="checkbox" id="ground_two" data-value="1" checked="" /> <span>二</span> </label>
</div>
<div>
<label id="g_three" class="Split"> <input type="checkbox" id="ground_three" data-value="2" checked="" /> <span>三</span> </label>
<label id="g_four" class="Split"> <input type="checkbox" id="ground_four" data-value="3" checked="" /> <span>四</span> </label>
</div>
</div>
<div id="building" style="margin-top: 1rem;">
<p>建筑(DY_ZZXXB)：</p>
<div>
<label id="b_one" class="Split"> <input type="checkbox" id="building_one" data-value="0" checked="" /> <span>一</span> </label>
<label id="b_two" class="Split"> <input type="checkbox" id="building_two" data-value="1" checked="" /> <span>二</span> </label>
</div>
<div>
<label id="b_three" class="Split"> <input type="checkbox" id="building_three" data-value="2" checked="" /> <span>三</span> </label>
<label id="b_four" class="Split"> <input type="checkbox" id="building_four" data-value="3" checked="" /> <span>四</span> </label>
</div>
</div>
</div>
</div>
</body>
</html>
css:
label[class="Split"] {
display: inline-block;
margin-right: 1rem;
visibility: visible;
}
label > input, label > span {
display: inline-block;
vertical-align: middle;
}
#split_up {
position: absolute;
background-color: white;
left: 50%;
bottom: 50%;
width: 2px;
height: 50%;
-webkit-transform: translate(-50%, 0);
}
#split_bottom {
display: none;
position: absolute;
background-color: white;
left: 50%;
top: 50%;
width: 2px;
height: 50%;
-webkit-transform: translate(-50%, 0);
}
#split_left {
position: absolute;
background-color: white;
right: 50%;
bottom: 50%;
height: 2px;
width: 50%;
-webkit-transform: translate(0, -50%);
}
#split_right {
position: absolute;
background-color: white;
left: 50%;
bottom: 50%;
height: 2px;
width: 50%;
-webkit-transform: translate(0, -50%);
}
#split_vertical_trisection_left {
position: absolute;
background-color: white;
left: 33.33%;
top: 0;
height: 100%;
width: 2px;
}
#split_vertical_trisection_right {
position: absolute;
background-color: white;
right: 33.33%;
top: 0;
height: 100%;
width: 2px;
}
js:
var startBtn = $("#screenSplit");
startBtn.on('click',
function() {
unbindhandler();
cur = "screenSplit";
toggleActive($(this));
screenSplit.init();
}) var screenSplit = {
viewer: top.Freedom.iClient3D.viewer,
scene: top.Freedom.iClient3D.scene,
Cesium: top.Cesium,
container: null,
bindEvent: function() {
var that = this;
var select = top.document.getElementById("viewportType");
var split_up = top.document.getElementById("split_up");
var split_bottom = top.document.getElementById("split_bottom");
var split_left = top.document.getElementById("split_left");
var split_right = top.document.getElementById("split_right");
var split_vertical_trisection_left = top.document.getElementById("split_vertical_trisection_left");
var split_vertical_trisection_right = top.document.getElementById("split_vertical_trisection_right"); //var pannel = top.document.getElementById("pannel"); select.onchange = function () { var value = select.value; switch (value) { case "NONE": //不使用分屏 split_up.style.display = 'none'; split_bottom.style.display = 'none'; split_left.style.display = 'none'; split_right.style.display = 'none'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; break; case "HORIZONTAL": //水平分屏 split_up.style.display = 'block'; split_bottom.style.display = 'block'; split_left.style.display = 'none'; split_right.style.display = 'none'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; break; case "VERTICAL": //垂直分屏 split_up.style.display = 'none'; split_bottom.style.display = 'none'; split_left.style.display = 'block'; split_right.style.display = 'block'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; break; case "TRIPLE": //三视口 split_up.style.display = 'block'; split_bottom.style.display = 'none'; split_left.style.display = 'block'; split_right.style.display = 'block'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; break; case "VerticalTrisection": //水平三视口 split_up.style.display = 'none'; split_bottom.style.display = 'none'; split_left.style.display = 'none'; split_right.style.display = 'none'; split_vertical_trisection_left.style.display = 'block'; split_vertical_trisection_right.style.display = 'block'; break; case "QUAD": //四视口 split_up.style.display = 'block'; split_bottom.style.display = 'block'; split_left.style.display = 'block'; split_right.style.display = 'block'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; break; default: split_up.style.display = 'none'; split_bottom.style.display = 'none'; split_left.style.display = 'none'; split_right.style.display = 'none'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; break; } //获取或者设置当前场景的多视口模式,默认单视口。 top.Freedom.iClient3D.scene.multiViewportMode = top.Cesium.MultiViewportMode[value]; },function(e) { }; }, unbindEvent: function () { /**********重要************/ //在这里写解绑handler的内容,不然各功能的事件会相互影响。 }, init: function () { var that = this; that.container = top.document.getElementById("screenSplit"); if (that.container) { that.container.style.display = 'block'; } that.bindEvent(); }
或者js2
splitScreenAnalys.init(cur);
var splitScreenAnalys = {
viewer: top.Freedom.iClient3D.viewer,
scene: top.Freedom.iClient3D.scene,
Cesium: top.Cesium,
container: null,
ground: null,
//地形图层 build:null,//建筑图层 bindEvent: function () { var that = this; var select = top.document.getElementById("viewportType"); //分屏窗口 var split_up = top.document.getElementById("split_up"); var split_bottom = top.document.getElementById("split_bottom"); var split_left = top.document.getElementById("split_left"); var split_right = top.document.getElementById("split_right"); var split_vertical_trisection_left = top.document.getElementById("split_vertical_trisection_left"); var split_vertical_trisection_right = top.document.getElementById("split_vertical_trisection_right"); var pannel = top.document.getElementById("pannel"); //复选框控制图层显示/隐藏 var b_one = top.document.getElementById("b_one"); var b_two = top.document.getElementById("b_two"); var b_three = top.document.getElementById("b_three"); var b_four = top.document.getElementById("b_four"); var g_one = top.document.getElementById("g_one"); var g_two = top.document.getElementById("g_two"); var g_three = top.document.getElementById("g_three"); var g_four = top.document.getElementById("g_four"); //选择列表当前值变化改变窗口显示隐藏 select.onchange = function () { //这里用that表示 that.build = top.Freedom.iClient3D.scene.layers.find("这里是发布的建筑图层名称"); that.ground = top.Freedom.iClient3D.scene.layers.find("发布地形图层名称"); var value = select.value; switch (value) { case "NONE": //不使用分屏 split_up.style.display = 'none'; split_bottom.style.display = 'none'; split_left.style.display = 'none'; split_right.style.display = 'none'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; pannel.style.display = "none"; break; case "HORIZONTAL": //水平分屏 split_up.style.display = 'block'; split_bottom.style.display = 'block'; split_left.style.display = 'none'; split_right.style.display = 'none'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; pannel.style.display = "block"; b_one.style.visibility = "visible"; g_one.style.visibility = "visible"; b_two.style.visibility = "visible"; g_two.style.visibility = "visible"; b_three.style.visibility = "hidden"; g_three.style.visibility = "hidden"; b_four.style.visibility = "hidden"; g_four.style.visibility = "hidden"; break; case "VERTICAL": //垂直分屏 split_up.style.display = 'none'; split_bottom.style.display = 'none'; split_left.style.display = 'block'; split_right.style.display = 'block'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; pannel.style.display = "block"; b_one.style.visibility = "visible"; g_one.style.visibility = "visible"; b_two.style.visibility = "visible"; g_two.style.visibility = "visible"; b_three.style.visibility = "hidden"; g_three.style.visibility = "hidden"; b_four.style.visibility = "hidden"; g_four.style.visibility = "hidden"; break; case "TRIPLE": //三视口 split_up.style.display = 'block'; split_bottom.style.display = 'none'; split_left.style.display = 'block'; split_right.style.display = 'block'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; pannel.style.display = "block"; b_one.style.visibility = "visible"; g_one.style.visibility = "visible"; b_two.style.visibility = "visible"; g_two.style.visibility = "visible"; b_three.style.visibility = "visible"; g_three.style.visibility = "visible"; b_four.style.visibility = "hidden"; g_four.style.visibility = "hidden"; break; case "VerticalTrisection": //水平三视口 split_up.style.display = 'none'; split_bottom.style.display = 'none'; split_left.style.display = 'none'; split_right.style.display = 'none'; split_vertical_trisection_left.style.display = 'block'; split_vertical_trisection_right.style.display = 'block'; pannel.style.display = "block"; b_one.style.visibility = "visible"; g_one.style.visibility = "visible"; b_two.style.visibility = "visible"; g_two.style.visibility = "visible"; b_three.style.visibility = "visible"; g_three.style.visibility = "visible"; b_four.style.visibility = "hidden"; g_four.style.visibility = "hidden"; break; case "QUAD": //四视口 split_up.style.display = 'block'; split_bottom.style.display = 'block'; split_left.style.display = 'block'; split_right.style.display = 'block'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; pannel.style.display = "block"; b_one.style.visibility = "visible"; g_one.style.visibility = "visible"; b_two.style.visibility = "visible"; g_two.style.visibility = "visible"; b_three.style.visibility = "visible"; g_three.style.visibility = "visible"; b_four.style.visibility = "visible"; g_four.style.visibility = "visible"; break; default: split_up.style.display = 'none'; split_bottom.style.display = 'none'; split_left.style.display = 'none'; split_right.style.display = 'none'; split_vertical_trisection_left.style.display = 'none'; split_vertical_trisection_right.style.display = 'none'; break; } //获取或者设置当前场景的多视口模式,默认单视口。 top.Freedom.iClient3D.scene.multiViewportMode = top.Cesium.MultiViewportMode[value]; }; //得到改变状态的复选框，这里top.document可以让函数跳出原本窗口，操作更上一层的对象 $('#ground input[type=checkbox]',top.document).on("input propertychange", function (evt) { var value = Number($(this).attr('data-value')); //设置对象在哪个分屏窗口显示，并根据复选框是否被选中控制图层 that.ground.setVisibleInViewport(value, $(this).prop("checked")); }); $('#building input[type=checkbox]', top.document).on("input propertychange", function (evt) { var value = Number($(this).attr('data-value')); that.build.setVisibleInViewport(value, $(this).prop("checked")); }); }, function (e) { }, unbindEvent: function () { /**********重要************/ $("#screenSplit",top.document).hide(); var value = "NONE"; if (value) { //不使用分屏 $("#split_up", top.document).css("display", "none"); $("#split_bottom", top.document).css("display", "none"); $("#split_left", top.document).css("display", "none"); $("#split_right", top.document).css("display", "none"); $("#split_vertical_trisection_left", top.document).css("display", "none"); $("#split_vertical_trisection_right", top.document).css("display", "none"); } //获取或者设置当前场景的多视口模式,默认单视口。 top.Freedom.iClient3D.scene.multiViewportMode = top.Cesium.MultiViewportMode[value]; //在这里写解绑handler的内容,不然各功能的事件会相互影响。 }, init: function () { var that = this; that.container = top.document.getElementById("screenSplit"); if (that.container) { that.container.style.display = 'block'; } that.bindEvent(); } }
35，SuperMap 3D_WebGL(三)模型卷帘
模型卷帘
html：
<!--模型卷帘-->
<html>
<head></head>
<body>
<div id="vertical-slider" style="z-index: 0;display: none;"></div>
<div id="horizontal-slider" style="z-index: 0;display: none;"></div>
<div style="display:none;" class="vertical-slider" id="vertical-slider-left" data-slider="left"></div>
<div style="display: none;" class="vertical-slider" id="vertical-slider-right" data-slider="right"></div>
<div style="display: none;" class="horizontal-slider" id="horizontal-slider-top" data-slider="top"></div>
<div style="display: none;" class="horizontal-slider" id="horizontal-slider-bottom" data-slider="bottom"></div>
<!-- 卷帘控制栏 -->
<div id="modelShutter" class="param-container" style="display:none;">
<div>
<span>参与卷帘图层</span>
<ul id="layer-list" style="padding: 0; margin: 0.5rem 0;"></ul>
</div>
<div class="divider"></div>
<div>
<span>卷帘模式</span>
<div style="padding: 0;margin: 0.5rem 0;">
<div style="margin: 0.2rem 0;">
<label> <input type="checkbox" id="use-roller" style="vertical-align: middle;" checked="" /><span style="vertical-align: middle;">使用卷帘</span> </label>
</div>
<div style="margin: 0.2rem 0;">
<label> <input type="radio" name="roller-category" value="lr-roller" checked="" /> <span>左右卷帘</span> </label>
<div style="text-indent: 1rem;" id="lr-roller-mode">
<label> <input type="radio" name="roller-mode" value="left-roller" style="vertical-align: middle;" checked="" /> <span style="vertical-align: middle;">屏蔽左侧</span> </label>
<label> <input type="radio" name="roller-mode" value="right-roller" style="vertical-align: middle;" /> <span style="vertical-align: middle;">屏蔽右侧</span> </label>
</div>
</div>
<div style="margin: 0.2rem 0;">
<label> <input type="radio" name="roller-category" value="tb-roller" /> <span>上下卷帘</span> </label>
<div style="text-indent: 1rem; display: none;" id="tb-roller-mode">
<label> <input type="radio" name="roller-mode" value="top-roller" style="vertical-align: middle;" /> <span style="vertical-align: middle;">屏蔽上侧</span> </label>
<label> <input type="radio" name="roller-mode" value="bottom-roller" style="vertical-align: middle;" /> <span style="vertical-align: middle;">屏蔽下侧</span> </label>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
js:
/**
* 模型卷帘
* */
/* 代码说明：
* 水平和竖直卷帘。
* 主要涉及接口：
* S3MTilesLayer.prototype.splitDirection 卷帘分割方向
* 可取值： Cesium.SplitDirection.NONE 禁用卷帘
* Cesium.SplitDirection.LEFT 屏蔽左侧
* Cesium.SplitDirection.RIGHT 屏蔽右侧
* Cesium.SplitDirection.TOP 屏蔽上方
* Cesium.SplitDirection.BOTTOM 屏蔽下方
*
* S3MTilesLayer.prototype.splitPosition 卷帘分割位置，像素为单位
*/
var modelShulter = {
init: function () {
this.verticalSlider = top.document.getElementById('vertical-slider');
this.horizontalSlider = top.document.getElementById('horizontal-slider');
this.windowWidth = $('body', top.document).width();
this.windowHeight = $('body', top.document).height();
this.rollerShutterConfig = { // 卷帘配置参数，以对象方式实现地址传递
splitDirection: top.Cesium.SplitDirection.LEFT,
verticalSplitPosition: this.windowWidth / 2,
horizontalSplitPosition: this.windowHeight / 2,
splitLayers: [], // 参与卷帘的S3M图层名
wholeLayers: [], // 所有S3M图层的名称
latestSplitDirection: null // 用于在禁用卷帘后恢复之前的卷帘方向
};
this.initBtns();
this.initLayerLists();
},
verticalSlider: null,
horizontalSlider: null,
viewer: top.Freedom.iClient3D.viewer,
scene: top.Freedom.iClient3D.scene,
windowWidth: 0, // 窗口宽度
windowHeight: 0, // 窗口高度
rollerShutterConfig: null,
layers: top.Freedom.App.LayerInfos,
initLayerLists: function () {
var that = this;
for (var layer of that.layers) {
//添加图层列表 供选择参与卷帘的图层
$("#layer-list").append(`
<li style="margin: 0.2rem 0;">
<label style="vertical-align: middle;">
<input id=${layer.name} name="layer" type='checkbox' value=${layer.name} style="vertical-align: middle;" checked/>
${layer.name}
</label>
</li>
`);
that.rollerShutterConfig.splitLayers.push(layer.name); // 初始时所有S3M图层都参与卷帘
that.rollerShutterConfig.wholeLayers.push(layer.name);
console.log(that.rollerShutterConfig.splitLayers);
}
that.initRollerShutter(that.scene, that.rollerShutterConfig);
},
showElemByID: function (id, displayType) {
var btn = document.getElementById(id);
if (btn && displayType) {
btn.style.display = displayType;
}
},
initBtns: function () {
this.verticalSlider.style.display = "block";
//this.horizontalSlider.style.display = "block";
this.showElemByID("modelShutter", "block");
this.showElemByID("viewportType", "none");
this.showElemByID("topographicExcavationInfoBox", "none");
this.showElemByID("chooseView", "none");
this.showElemByID("addPoint", "none");
this.showElemByID("clipMode", "none");
this.showElemByID("clipBoxTools", "none");
this.showElemByID("clear", "none")
},
unbindEvent: function () {
console.log("modelShulter1 unbinded")
this.horizontalSlider.style.display = "none";
this.verticalSlider.style.display = "none";
this.rollerShutterConfig.latestSplitDirection = this.rollerShutterConfig.splitDirection;
this.rollerShutterConfig.splitDirection = top.Cesium.SplitDirection.NONE;
this.setRollerShutterSplit(this.scene, this.rollerShutterConfig);
},
/**
* 初始化卷帘。设置分割条初始位置及绑定相关事件。
* @param scene 场景。
* @param rollerShutterConfig 卷帘配置参数。
*/
initRollerShutter: function (scene, rollerShutterConfig) {
var that = this;
that.setRollerShutterSplit(scene, rollerShutterConfig);
//that.bindSliderEvt(scene, rollerShutterConfig);
$('input[type=radio][name="roller-mode"]').on('input propertychange', function () {
let splitDirectionCustomStr = $('input[type=radio][name="roller-mode"]:checked').val();
switch (splitDirectionCustomStr) {
case 'left-roller':
rollerShutterConfig.splitDirection = top.Cesium.SplitDirection.LEFT;
break;
case 'right-roller':
rollerShutterConfig.splitDirection = top.Cesium.SplitDirection.RIGHT;
break;
case 'top-roller':
rollerShutterConfig.splitDirection = top.Cesium.SplitDirection.TOP;
break;
case 'bottom-roller':
rollerShutterConfig.splitDirection = top.Cesium.SplitDirection.BOTTOM;
break;
default:
break;
}
that.setRollerShutterSplit(scene, rollerShutterConfig);
});
// 在 “左右模式” 和 “上下模式” 之间切换
$('input[type=radio][name="roller-category"]').on("input propertychange", function () {
let splitDirectionCategory = $('input[type=radio][name="roller-category"]:checked').val();
switch (splitDirectionCategory) {
case 'lr-roller':
that.verticalSlider.style.display = 'block';
that.horizontalSlider.style.display = 'none';
$("#lr-roller-mode").css("display", "block");
$("#tb-roller-mode").css("display", "none");
rollerShutterConfig.splitDirection = top.Cesium.SplitDirection.LEFT;
$("input[type=radio][value='left-roller']").prop("checked", "checked");
break;
case 'tb-roller':
that.verticalSlider.style.display = 'none';
that.horizontalSlider.style.display = 'block';
$("#lr-roller-mode").css("display", "none");
$("#tb-roller-mode").css("display", "block");
rollerShutterConfig.splitDirection = top.Cesium.SplitDirection.TOP;
$("input[type=radio][value='top-roller']").prop("checked", "checked");
break;
default:
break;
}
that.setRollerShutterSplit(scene, rollerShutterConfig);
});
// 控制图层是否参与卷帘
$('input[type=checkbox][name="layer"]').on("input propertychange", function () {
let operationLayerName = $(this).val();
if ($(this).prop("checked")) { // 图层参与卷帘
rollerShutterConfig.splitLayers.push(operationLayerName);
} else {
var index = rollerShutterConfig.splitLayers.indexOf(operationLayerName);
rollerShutterConfig.splitLayers.splice(index, 1);
}
that.setRollerShutterSplit(scene, rollerShutterConfig);
});
// 是否使用卷帘
$("#use-roller").on("input propertychange", function () {
if ($(this).prop("checked")) {
if (rollerShutterConfig.latestSplitDirection === top.Cesium.SplitDirection.LEFT ||
rollerShutterConfig.latestSplitDirection === top.Cesium.SplitDirection.RIGHT) {
that.verticalSlider.style.display = 'block';
that.horizontalSlider.style.display = 'none';
} else {
that.verticalSlider.style.display = 'none';
that.horizontalSlider.style.display = 'block';
}
rollerShutterConfig.splitDirection = rollerShutterConfig.latestSplitDirection;
} else {
rollerShutterConfig.latestSplitDirection = rollerShutterConfig.splitDirection;
rollerShutterConfig.splitDirection = top.Cesium.SplitDirection.NONE;
that.verticalSlider.style.display = 'none';
that.horizontalSlider.style.display = 'none';
}
that.setRollerShutterSplit(scene, rollerShutterConfig);
});
},
/**
* 注册卷帘分割条的拖拽事件。
* @param scene 场景。
* @param rollerShutterConfig 卷帘配置参数。
*/
//bindSliderEvt: function (scene, rollerShutterConfig) {
// var that = this;
// that.verticalSlider.addEventListener('mousedown', mouseDown, false);
// that.horizontalSlider.addEventListener('mousedown', mouseDown, false);
// top.document.addEventListener('mouseup', mouseUp, false);
// function mouseUp(e) {
// top.document.removeEventListener('mousemove', sliderMove, false);
// }
// function mouseDown(e) {
// top.document.addEventListener('mousemove', sliderMove, false);
// }
// function sliderMove(e) { // 鼠标拖拽时执行
// // 解决拖拽鼠标粘滞的问题
// if (e.preventDefault) {
// e.preventDefault();
// } else {
// e.returnValue = false;
// }
// if (rollerShutterConfig.splitDirection === top.Cesium.SplitDirection.LEFT || rollerShutterConfig.splitDirection === top.Cesium.SplitDirection.RIGHT) {
// that.verticalSlider.style.left = e.clientX + 'px';
// rollerShutterConfig.verticalSplitPosition = e.clientX;
// } else if (rollerShutterConfig.splitDirection === top.Cesium.SplitDirection.TOP || rollerShutterConfig.splitDirection === top.Cesium.SplitDirection.BOTTOM) {
// let clientY = e.clientY;
// if (clientY < 0) {
// clientY = 0;
// } else if (clientY > that.windowHeight) {
// clientY = that.windowHeight - $(that.horizontalSlider).height();
// }
// that.horizontalSlider.style.top = clientY + 'px';
// rollerShutterConfig.horizontalSplitPosition = that.windowHeight - clientY;
// }
// that.setRollerShutterSplit(scene, rollerShutterConfig);
// }
//},
/**
* 设置卷帘的分割方向及分割条的位置。
* @param scene 场景。
* @param rollerShutterConfig 卷帘配置参数。
*/
setRollerShutterSplit: function (scene, rollerShutterConfig) {
var that = this;
let splitPosition = null;
if (rollerShutterConfig.splitDirection === top.Cesium.SplitDirection.LEFT || rollerShutterConfig.splitDirection === top.Cesium.SplitDirection.RIGHT) {
splitPosition = rollerShutterConfig.verticalSplitPosition;
} else if (rollerShutterConfig.splitDirection === top.Cesium.SplitDirection.TOP || rollerShutterConfig.splitDirection === top.Cesium.SplitDirection.BOTTOM) {
splitPosition = rollerShutterConfig.horizontalSplitPosition;
}
for (let layer of scene.layers.layerQueue) {
// 判断图层是否是参与卷帘的图层
if (rollerShutterConfig.splitLayers.indexOf(layer.name) != -1) {
layer.splitDirection = rollerShutterConfig.splitDirection;
if (splitPosition) { // 如果禁用卷帘就没有必要设置分割位置
layer.splitPosition = splitPosition;
}
} else {
layer.splitDirection = top.Cesium.SplitDirection.NONE;
}
}
}
}
36，JS报 Uncaught SyntaxError: Unexpected token <
一般是引用路径的问题
版权声明：本文标题：番外-待整理的内容 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728225188a1150120.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论