WebGIS
苟冬新
......
展开
-
OpenLayers中线拆分
方法参数说明layer图层对象,选中的图元feature,layerID图层ID。原创 2022-08-01 21:45:00 · 535 阅读 · 0 评论 -
OpenLayers中面拆分
方法参数说明layer图层对象,选中的图元feature,layerID图层ID。原创 2022-08-01 17:03:15 · 379 阅读 · 0 评论 -
OpenLayers与Leaflet之间的区别
OpenLayers 和 Leaflet 都提供了常见的功能,如平铺层、矢量图层和应用程序的移动支持。OpenLayers 中的平铺层可以根据用户的要求从任何网页中提取信息。此外,如果需要,还可以使用未缝合的层。地理空间地图服务也可以根据需要使用。Leaflet提供了缩放选项,以便用户在滚动地图时可以在平铺层中找到确切位置。我们可以在手机上安装这两个应用程序,但 Leaflet 更轻量级。OpenLayers 正在构建轻量级和移动友好的组件,以便用户可以使用它们。...翻译 2022-06-28 21:45:00 · 4316 阅读 · 0 评论 -
cesium中缓冲区分析
效果这里是点缓冲区与点数据分析的15000个点代码添加缓冲区 /** * @Description: 初始化点缓冲 * @param centerPoint 缓冲区中心点 * @param dataPoint 缓冲区分析的数据 * @param bufferDistance 缓冲区距离 * @return ptsWithin 缓冲区分析结果 */ initPointBuffer(centerPoint, dataPoint, b原创 2021-07-25 19:43:17 · 1400 阅读 · 0 评论 -
cesium中加载点图标
贴代码// primitives可加载大量数据,性能方面比entities要好一些let billboard = viewer.scene.primitives.add(new Cesium.BillboardCollection());billboards.add({ image: imgUrl, // 图片地址 width: 22, height: 22, // scale: 1.0, // sizeInMeters : true, //图像的尺寸被指定成原创 2021-01-30 21:44:33 · 3559 阅读 · 1 评论 -
Cesium中加载geojson数据,根据数据中的属性做等级展示
cesium加载GeoJson数据,并做等级显示效果const promise = viewer.dataSources.add(Cesium.GeoJsonDataSource.load(urlChina));//默认是黄色promise.then(function (dataSource) { _this.jsonDatas[keydataSource] = dataSource; const entities = dataSource.entities.values;原创 2021-01-30 21:34:53 · 2180 阅读 · 0 评论 -
cesium中长度测量和面积测量
效果vue+cesium做的测量功能,参考网上修改// *************测量空间直线距离************ static measureLineSpace() { this.removeMeasure(); let _this = this; let viewer = this.viewer; // 取消双击事件-追踪该位置 viewer.cesiumWidget.screenSpaceEventH转载 2020-11-29 09:38:27 · 2978 阅读 · 3 评论 -
VUE+Cesium项目搭建
效果如下:一、 安装cesium包npm install cesium –save二、 在build/webpack.dev.conf.js下配置参数const cesiumSource = 'node_modules/cesium/Source'const cesiumWorkers = '../Build/Cesium/Workers'new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: '原创 2020-08-28 17:15:43 · 1064 阅读 · 1 评论 -
openlayers加载天地图及天地图地形图影像图
export function tianditu(map) { // T=vec_c表示请求的是路网数据,x 表示切片的 x 轴坐标,y 表示切片的y轴坐标,z表示切片所在的缩放级别。 // 使用 ol.source.XYZ 加载切片,并将获取的数据初始化一个切片图层 ol.layer.Tile: //天地图底图 var source = new XYZ({ url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=6cb8af42原创 2020-05-31 17:06:52 · 12282 阅读 · 1 评论 -
openlayers萤火图实现
先放代码,有空在改在这里插入图片描述// 萤火图var ChinaBlue, fireData;export function initFirefly(viewMap) { map = viewMap; fireFly()}function fireFly() { if(ChinaBlue) map.removeLayer(ChinaBlue); if(fireDa...原创 2020-03-31 23:16:26 · 456 阅读 · 0 评论 -
openlayers点图元渲染及画圆
下面是openlayers点图元渲染效果图及在4326坐标系中画圆效果图。因为功能需要所以写的可能有点麻烦,只截取了方法实现的代码。 // 渲染点图标及画圆 renderIcon(rows) { let rows = {}; rows.centerPoint = "116.64560693, 40.05946214"; let self = this; self.vectorSource = new VectorSource(); // 图元数据源 self原创 2020-03-31 22:54:15 · 1388 阅读 · 0 评论 -
openlayers加载MapServer地图服务
引入proj4脚本文件<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>这里加载的坐标是EPSG:4527的Mapserver的地图服务代码如下<div id="viewDiv"></div><script>...原创 2020-01-12 09:31:40 · 2738 阅读 · 0 评论 -
openlayers鹰眼图实现
这个是Cesium三维地图结合openlayers二维地图的鹰眼图实现,代码有相关注释。// 创建鹰眼图this.map = new Map({ layers: [layers_arcgis], target: 'map2d', view: new View({ projection: 'EPSG:4326', center: [116....原创 2020-01-04 11:18:32 · 1661 阅读 · 1 评论 -
OpenLayer向postgresql数据库添加数据
使用openlayer 编辑点线面图元,通过geoserver服务向postgresql数据库添加图元数据(这里值贴操作中核心的代码,相关变量有说明,其他的根据实际情况添加相关代码)声明选择图元方法,声明相关的简易样式(该方法用于选中地图中的图元)// 交互图元选择器var selectInteraction = new ol.interaction.Select({ toleran...原创 2019-10-31 16:41:37 · 646 阅读 · 0 评论 -
WebGis鹰眼图
WebGis鹰眼图&全屏显示鹰眼图是GIS中一个基本的功能,鹰眼图,顾名思义,在鹰眼图上可以像从空中俯视一样查看地图框中所显示的地图在整个图中的位置。直接贴代码了,关于代码都有注解。引入相关css样式<style> html, body, #viewDiv { padding: 0; margin: 0; ...原创 2019-09-25 09:11:43 · 3537 阅读 · 1 评论