【SuperMap-Leaflet】等值线/面裁剪参数设置
文章目录
- 前言
- 一、项目背景
- 二、使用步骤
- 1. clipRegion参数设置
- 2. 实例
- 总结
前言
超图GIS比赛参赛过程中的随笔。
虽然很支持我国的GIS相关产业发展，但就目前来说要赶上ESRI还有很长的路要走啊。
Leaflet中示例的等值线/面裁剪卡了我好一段时间，最近终于有机会把这问题解决了，命题组比赛也可以开始收尾工作嘞。
一、项目背景
使用了Vue框架的WebGIS比赛项目。
二、使用步骤
1. clipRegion参数设置
使用的是SuperMap.SurfaceAnalystParametersSetting这个类，主要介绍其中clipRegion设置的注意事项（自己踩了不少坑的地方）。
clipRegion在官方文档中写明支持 SuperMap.Geometry.Polygon | L.Polygon | ol.geom.Polygon 这三种对象，我用的是 L.Polygon 对象，就拿这个举例。
首先要明确自己发布的地图服务的目标坐标系，我的是EPSG：3857坐标系，所以输入的L.polygon对象应该是以XY坐标系构成的。但是！！要注意L.polygon中的XY坐标是反过来的，也就是YX排序。
例子如下：
第一个pointGroup1为错误的输入，
let pointGroup1 = [[10513195.592453554,5124012.857817417],[13271652.85561858,5202327.758565817],[13271652.85561858,3117193.5261396645],[10395814.43231887,3616451.0184107157]]
let pointGroup2 = [[5124012.857817417,10513195.592453554],[5202327.758565817,13271652.85561858],[3117193.5261396645,13271652.85561858],[3616451.0184107157,10395814.43231887]]
let testRegion = L.polygon(pointGroup)
如果为EPSG：4326坐标系，则L.polygon使用经纬度创建对象，
let pointGroup = [{lat: 41.75274069053358, lng: 94.44164285639015},{lat: 42.27543350659399, lng: 119.22128605730661},{lat: 26.9497375800355, lng: 119.22128605730661},{lat: 30.87442086271361, lng: 93.38718995422346}]
let testRegion = L.polygon(pointGroup)
2. 实例
生成等值面的函数如下：
heatIsoline() { //生成全国日平均气温等值线图//获取ChinaRegionlet sqlParam_China = new SuperMap.GetFeaturesBySQLParameters({queryParameter: {name: "ChinaRegion@ChinaClimate",attributeFilter: "SmID in (2,3,13)"},datasetNames: ["ChinaClimate:ChinaRegion"],toIndex: -1 //返回至多1000条数据（在没有修改IServer文件的前提下）})L.supermap.featureService("http://localhost:8090/iserver/services/data-ChinaClimate/rest/data").getFeaturesBySQL(sqlParam_China, (serviceResult0) => {// 获取服务器返回的结果console.log(serviceResult0)let pointGroup = []let fea0 = serviceResult0.result.features.featuresfor(let u = 0; u<serviceResult0.result.featureCount; u++){let coordinates00 = fea0[u].geometry.coordinates[0][0]pointGroup[u] = []for (let b = 0; b<coordinates00.length; b++){pointGroup[u].push([coordinates00[b][1], coordinates00[b][0]])}}console.log(pointGroup)// returnlet testRegion = L.polygon(pointGroup, {color: 'red'})console.log(testRegion)//获取当日气温if (this.value1 != '') {this.heatIsolineLayer.clearLayers() //清空图层let heatNum = 0 //省会数量let heatPoints = [] //储存省会坐标信息数组let zValues = [] //省会气温//获取所有省会当日温度信息let sqlDate = "日期 like '" + this.formatOfDate(this.value1) + "%'" //SQL语句about日期let sqlParam = new SuperMap.GetFeaturesBySQLParameters({queryParameter: {name: "全国省会城市气象数据表@ChinaClimate",attributeFilter: sqlDate},datasetNames: ["ChinaClimate:全国省会城市气象数据表"],toIndex: -1 //返回至多1000条数据（在没有修改IServer文件的前提下）})L.supermap.featureService("http://localhost:8090/iserver/services/data-ChinaClimate/rest/data").getFeaturesBySQL(sqlParam, (serviceResult) => {//获取服务器返回的结果console.log(serviceResult)let features = serviceResult.result.featuresfor (let i = 0; i < features.features.length; i++) {let properties = features.features[i].propertiesheatPoints[i] = L.CRS.EPSG3857.project(L.latLng(this.cityLatlng[i][0].lat, this.cityLatlng[i][0].lng))zValues[i] = parseFloat(properties.温度)}///********插入两个点使裁剪范围覆盖国内heatPoints.push(L.CRS.EPSG3857.project(L.latLng(53.71857268815541, 135.29174240075076)))zValues.push(parseFloat(-10))heatPoints.push(L.CRS.EPSG3857.project(L.latLng(17.60606519498473, 72.9726611189788)))zValues.push(parseFloat(20))console.log(heatPoints)console.log(zValues)///提取等值线//表面分析参数设置let extractParams = new SuperMap.SurfaceAnalystParametersSetting({datumValue: -100, // 表面分析中提取等值线基准值interval: 1, // 等值距，两条等值线之间的间隔值resampleTolerance: 0, // 重采样容限smoothMethod: SuperMap.SmoothMethod.BSPLINE, // 光滑处理所使用的方法smoothness: 3, // 等值线的光滑度clipRegion: testRegion // 裁剪对象(********xy坐标一定要记得反转！！！！！！！！**************)})//表面分析提取操作参数let surfaceAnalystParams = new SuperMap.GeometrySurfaceAnalystParameters({points: heatPoints,zValues: zValues,extractParameter: extractParams,resolution: 3000,surfaceAnalystMethod: SuperMap.SurfaceAnalystMethod.ISOREGION //设置提取等值线/面})let url = 'http://localhost:8090/iserver/services/spatialAnalysis-ChinaClimate/restjsr/spatialanalyst'L.supermap.spatialAnalystService(url).surfaceAnalysis(surfaceAnalystParams, (serviceResult2) => {console.log(serviceResult2)//等值线添加到图层中let fea_result = serviceResult2.result.recordset.features.featuresfor (let f = 0; f<fea_result.length; f++){let lineValue = fea_result[f].properties.dMaxZValuelet colorValue = ''if (lineValue < -20){colorValue = '#0000CD'}else if(lineValue >= -20 && lineValue < -10){colorValue = '#6495ED'}else if(lineValue >= -10 && lineValue < 0){colorValue = '#00BFFF'}else if(lineValue >= 0 && lineValue < 10){colorValue = '#87CEFA'}else if(lineValue >= 10 && lineValue < 20){colorValue = '#FFDAB9'}else if(lineValue >= 20 && lineValue < 30){colorValue = '#FF6347'}else if(lineValue >= 30){colorValue = '#FF4500'}L.geoJSON(fea_result[f], { //服务器返回的是coord需要转成latLngcoordsToLatLng: function (coords) {return L.CRS.EPSG3857.unproject(L.point(coords[0], coords[1]));},style: {color: colorValue}}).addTo(this.heatIsolineLayer)}})})}})}
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
【SuperMap-Leaflet】等值线/面裁剪参数设置相关推荐
- customplot设置单个点的颜色_CAD教程，CAD大神总结CAD快捷键及一些参数设置大集合，码走...
嗨,我是爱踢汪.之前发过很多次快捷键整理的文章,近来有不少同学又问我有没有相关的好一些的资料,今天就再发一张快捷键表格,表格统计了一部分常用的命令快捷键.表格来源于部落窝QQ群里同学分享,希望对大家有 ...
- vlc 详细使用方法：libvlc_media_add_option 函数中的参数设置
[转载自]tinyle的专栏 [原文链接地址]http://blog.csdn.net/myaccella/article/details/7027962 [手记] 下面列出的参数可以在命令行中执行, ...
- libvlc_media_add_option 函数中的参数设置
libvlc_media_add_option 函数中的参数设置 Usage: vlc [options] [stream] ... You can specify multiple stream ...
- Caffe学习（四）数据层及参数设置
caffe的各种数据层在caffe.proto文件中有定义.通过对定义的caffe.proto文件进行编译,产生支持各种层操作的c++代码.后面将会详细解读caffe.proto文件(在caffe里就 ...
- #uni-app# u-avatar-cropper实现选择图片裁剪，设置用户头像uview （附源码）
思路: 第一步:首先需要在项目里安装uView框架 >>>点击跳转uview安装教程https://blog.csdn.net/ZHENGCHUNJUN/article/detail ...
- Supermap iDesktop模型生成缓存参数详解
如今Supermap iDesktop已经更新到11i了,在场景缓存上新增了部分功能,很多小伙伴都苦于各个参数设置上没有详细的介绍,并且在生成场景缓存时易奔溃.接下来,小编就整理了Supermap i ...
- 【短视频SDK】合成时长和文件大小对比数据---给参数设置提供参考.
本文之前我们已经有一篇文章针对现在短视频SDK暴露的参数有一个基本解析:----->传送门:对焦模式.裁剪模式.视频质量.分辨率.视频比例.帧率.关键帧间隔等参数解析.做好一个短视频SDK的核心 ...
- 2021年大数据Hadoop（二十九）：关于YARN常用参数设置
全网最详细的Hadoop文章系列,强烈建议收藏加关注! 后面更新文章都会列出历史文章目录,帮助大家回顾知识重点. 目录 本系列历史文章 前言 关于yarn常用参数设置 设置container分配最小内 ...
- 设置最大值_电机变频器参数设置不当会怎样
我们知道变频器驱动电机运行是需要设置参数的,包括变频器运行控制模式如启动.停止,频率给定的命令来源,变频器频率的上下限.加减速等等参数都要根据实际情况来正确的设置. 控制模式与接线方式的不统一造成的, ...
最新文章
- 推荐10款windows端实用软件，每一款都是精品！
- linux c glib中的hash table
- 回馈读者：赠花书一本！
- CodeForces - 1252K Addition Robot(线段树维护矩阵)
- Qt signal slot 实现机制
- 国足2-0击败菲律宾，重获出线主动权，下次对战叙利亚做了哪些准备？
- sql server XML中value(),exists(),nodes()方法
- 明日之后最好看的房子又来啦：情侣专属泰坦尼克号造型登场
- 数据之美（五）：美不胜收的数据图（上）
- android 备份游戏数据,用于Android游戏存档备份和存档还原的教程（图形中的详细信息）...
- 项目启动tomcat失败的几种可能原因和解决方法
- 什么是体素（Voxel）
- 联想开机按f2怎么修复系统图解_windows10开机按f几进入一键还原 按下F2就进入联想电脑拯救系...
- 基于S12ZVM的无感FOC失步检测
- Neo4j：SLM群集算法的过程
- 基于java闲一品交易平台计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
- minicom的使用
- 轻松写日记---日记软件
- Sql文件导入数据库-保姆级教程
- 全国计算机等级考试报名南京,南京市2019年上半年全国计算机等级考试报名通告...