基于Openlayers3的WebGIS系统开发1

已于 2024-02-17 14:18:54 修改
阅读量241 收藏
点赞数
文章标签： javascript css jquery html arcgis
于 2023-08-20 21:57:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64819732/article/details/132396340
版权

基于Openlayers3的WebGIS系统开发，实现如下功能。

  1. 放大、缩小、漫游、控件加载（鹰眼图、比例尺、缩放按钮）；
  2. 多图层加载、多图层切换显示，其中，要加载显示的图层包括但不限于谷歌地图、OSM地图、GeoJSON矢量数据等。
  3. 左右地图双窗口联动显示：开发功能按钮，控制右边地图窗口的显示与关闭。
  4. 图像绘制功能，要求实现点、线、面（矩形、多边形、圆形）等不同图形的绘制。
  5. 对于面要素图形的绘制，要求能够编写样式设置面板（开发功能按钮，控制该面板的显示与关闭），自定义地设置边框的颜色、宽度，以及填充颜色。

在html文件中写下如下代码：


<html>
	<head>
		<meta charset="UTF-8">
		<title>基于Openlayers3的WebGIS系统开发</title>
		<link rel="stylesheet" href="css/WEBGISDZY.css" />
		<link rel="stylesheet" href="css/ol.css" />
		<script src="js/ol/ol-debug.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		<script src="js/WEBGISDZY.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="banner">
     <p>基于Openlayers3的WebGIS系统开发</p></div>
		<div id="center">

			<div id='map'>
				
				<div id="layerControl" class="layerControl">
				<div class="title"><label>图层列表</label></div>
				<ul id="layerTree" class="layerTree"></ul>
			</div>
			
	<div id="drawchoose" class="drawchoose">
 	    <div>确定线宽:<input type="text" id="width"  ></div>
 	    <div>确定线颜色:<input type="text" id="color_line"  ></div>
 	    <div>确定填充颜色:<input type="text" id="color"  ></div>
 	    <div><button id="sure">确定</button></div>
   </div>
			
			
	<div id='btn'>
			<button onclick='drawPointEvent()' class='btn1'></button>
			<button onclick="drawLineEvent()" class='btn2'></button>
			<button onclick="drawRecEvent()" class='btn3'></button>
			<button onclick="drawPolygonEvent()" class='btn4'></button>
			<button onclick="drawCircleEvent()" class='btn5'></button>
			<button onclick="clearDrawEvent()" class='btn6'></button></div>
		<div id='btn7'>
		<button onclick="mapWin()">联动地图窗口</button></div>
		<div id='btn8'>
		<button onclick="LayerChoiceSwitch()">选择图层</button></div>
		<div><button id="btn9">图形样式设置</button></div>
			</div>
			
			<div id='map1'>
			
			</div>
		
		<script src="js/WEBGISDZY.js">
		</script>
		</div>	
<div id="bottom">
       <p>基于Openlayers3的WebGIS系统开发</p>
  </div>
	</body>
</html>

在css文件中写入代码，对页面进行设计装饰。

html,div,ul,li,iframe,p,
img {
	padding: 0;
	margin: 0;
	font-family: "微软雅黑";
	}			
body{
	font-family: "微软雅黑";
	background-image:white;
	background-size: cover;
	}
#banner{width:100%;
        height:6%;
        background:url(../img/banner.jpg);  
        top left repeat-x;
        }
#banner p{font-size: 30px;
          color: white;margin-left: 40%;
          margin-top: 15px;
          display: inline-block;
          letter-spacing: 2px;
          }

#center{   padding: 0;
            margin: 0;
            width: 100%;
            height: 91%;
}
#map{
	height:850px;
	width:50%;
	float:left;
	display: block;	
}
.layerControl {
				position: absolute;
				bottom: 5px;
				min-width: 200px;
				max-height: 200px;
				right: 50px;
				top: 180px;
				z-index: 2001;
				color: #ffffff;
				background-color: #4c4e5a;
				border-width: 10px;
				border-radius: 10px;
				border-color: #000 #000 #000 #000;
			}
.layerControl .title {
				font-weight: bold;
				font-size: 15px;
				margin: 10px;
			}
.layerTree li {
				list-style: none;
				margin: 5px 10px;
			}
#drawchoose{
	        position:absolute;
			right:50px;
			 top: 400px;
			 margin-top:2px;
			width: 200px;
			height: 170px;
			z-index:2003;  
			color:white;
			background-color:#4c4e5a;
			border-width: 10px; 
			border-radius: 10px; 
			border-color: #000 #000 #000 #000; 
			display:block;
		}	
#btn{
	right:30px;
	position: absolute;
	top:110px;
	z-index: 2002;
}			
.btn1::before{
  position: relative;
   top: 1px;
   bottom:1px;
   content: url(../img/DIAN.png);
}		
.btn2::before{
  position: relative;
   top: 1px;
   bottom:1px;
   content: url(../img/XIAN.png)
}		
.btn3::before{
  position: relative;
   top: 1px;
   bottom:1px;
   content: url(../img/JUXING.png) 
}	
.btn4::before{
  position: relative;
   top: 1px;
   bottom:1px;
   content: url(../img/DUOBIANX.png)
}
.btn5::before{
  position: relative;
   top: 1px;
   bottom:1px;
   content: url(../img/YUANXING.png)
}	
.btn6::before{
  position: relative;
   top: 1px;
   bottom:1px;
   content: url(../img/QINGCHU.png)
}
#btn7{
	right:30px;
	position: absolute;
	top:150px;
	z-index: 2002;
}
#btn8{
	right:128px;
	position: absolute;
	top:150px;
	z-index: 2002;
}	
#btn9{
	right:200px;
	position: absolute;
	top:150px;
	z-index: 2002;
}	
#sure{
	position: relative;
   top: 15px;
   left: 80px;
}	
#map1{
	height:850px;
	width:49%;
	float:right;
	display: block;
}

#bottom{background:blue;height:4%;width:100%;bottom: 0;
position: absolute;text-align: center;}
#bottom p{color: white;bottom: 5px;}

在js文件中写入代码，来控制界面的交互，代码如下：

var map;
//设置绘制样式
var source = new ol.source.Vector();
var Style=new ol.style.Style({
		fill:new ol.style.Fill({
			color:'rgba(255,255,255,0.6)'
		}),
		stroke: new ol.style.Stroke({ //边界样式
			color: 'rgba(139,0,139,1)',
    		width: 1.5
			}),
		image: new ol.style.Circle({
        radius: 10,
        fill: new ol.style.Fill({
        	color: '#8A2BE2'
            })
      })
	});
var vector = new ol.layer.Vector({
	source: source,
	style:Style,
	name:'绘制图层',
});


      //实现绘制功能
    var DrawPoint=new ol.interaction.Draw({
	source:source,
	type: 'Point',
    style: new ol.style.Style({
    	fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.3)'
        }),
        
        stroke: new ol.style.Stroke({
        color: 'yellow',
        width: 2
        }),
        
        
        image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
        	color: 'yellow'
            })
        })
        })
    });
    
    var DrawLine=new ol.interaction.Draw({
	source:source,
	type: 'LineString',
    style: new ol.style.Style({
    	fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.3)'
        }),
        
        stroke: new ol.style.Stroke({
        color: 'yellow',
        width: 2
        }),
        
        
        image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
        	color: 'yellow'
            })
        })
        })
    });
    var DrawPolygon=new ol.interaction.Draw({
	source:source,
	type: 'Polygon',
    style: new ol.style.Style({
    	fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.3)'
        }),
        
        stroke: new ol.style.Stroke({
        color: 'yellow',
        width: 2
        }),
        image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
        	color: 'yellow'
            })
        })
        })
    });
    
    
    
   var DrawCircle=new ol.interaction.Draw({
	source:source,
	type: 'Circle',
    style: new ol.style.Style({
    	fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.3)'
        }),stroke: new ol.style.Stroke({
        color: 'yellow',
        width: 2
        }),
        image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
        	color: 'yellow'
            })
        })
        })
    });
    
    var DrawRec=new ol.interaction.Draw({
            source:source,
            type: 'LineString',
            style: new ol.style.Style({
                fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.3)'
        }),stroke: new ol.style.Stroke({
        color: 'yellow',
        width: 2
        }),
        image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
        	color: 'yellow'
                    })
                })
            }),
            maxPoints: 2,
            geometryFunction: function (coordinates, geometry) {
                if (!geometry) {
                    geometry = new ol.geom.Polygon(null);
                }
                var start = coordinates[0];
                var end = coordinates[1];
                geometry.setCoordinates([
            [start, [start[0], end[1]], end, [end[0], start[1]], start]
        ]);
                return geometry;
            }
            });

function drawPointEvent(){
	map.removeInteraction(DrawLine);
	map.removeInteraction(DrawPolygon);
	map.removeInteraction(DrawCircle);
	map.removeInteraction(DrawRec);
    map.addInteraction(DrawPoint);
    
}
function drawLineEvent(){
	map.removeInteraction(DrawPoint);
	map.removeInteraction(DrawPolygon);
	map.removeInteraction(DrawCircle);
	map.removeInteraction(DrawRec);
    map.addInteraction(DrawLine);
    
}
function drawRecEvent(){
	map.removeInteraction(DrawPoint);
	map.removeInteraction(DrawLine);
	map.removeInteraction(DrawPolygon);
	map.removeInteraction(DrawCircle);
	map.addInteraction(DrawRec);
	
}
function drawPolygonEvent(){
	map.removeInteraction(DrawPoint);
	map.removeInteraction(DrawLine);
	map.removeInteraction(DrawCircle);
	map.removeInteraction(DrawRec);
    map.addInteraction(DrawPolygon);
  
}
function drawCircleEvent(){
	map.removeInteraction(DrawPoint);
	map.removeInteraction(DrawLine);
	map.removeInteraction(DrawPolygon);
	map.removeInteraction(DrawRec);
    map.addInteraction(DrawCircle);
    
}
//实现绘图样式修改功能
document.getElementById("sure").onclick = function(){
		var width = document.getElementById('width').value;
		var width_color = document.getElementById('color_line').value;
		 var fill_color  = document.getElementById('color').value;
		vector.getStyle().getStroke().setWidth(width);
		vector.getStyle().getStroke().setColor(width_color);
		 vector.getStyle().getFill().setColor(fill_color);
		
	}

//实现绘制图形清除
function clearDrawEvent(){
	source.clear();
}

//实现副图层的开关
function mapWin(){
	
	if(document.getElementById('map1').style.display=="none"){
		document.getElementById('map').style.width="50%";
		map.updateSize();
	document.getElementById('map1').style.display="block";
	}
	else{
		document.getElementById('map').style.width="100%";
		map.updateSize();
		document.getElementById('map1').style.display="none";
	}
}


//实现图层控制面板
    function LayerChoiceSwitch(){
	if (document.getElementById('layerTree').style.display=="none"){
		
		document.getElementById('layerTree').style.display="block";
	}
	else{
		document.getElementById('layerTree').style.display="none";
	}
}
 
var layer = new Array(); //map中的图层数组
    var layerName = new Array(); //图层名称数组
    var layerVisibility = new Array(); //图层可见属性数组

    function loadLayersControl(map, id) {
				var treeContent = document.getElementById(id); //图层目录容器

				var layers = map.getLayers(); //获取地图中所有图层
				for(var i = 0; i < layers.getLength(); i++) {
					//获取每个图层的名称、是否可见属性
					layer[i] = layers.item(i);
					layerName[i] = layer[i].get('name');
					layerVisibility[i] = layer[i].getVisible();

					//新增li元素，用来承载图层项
					var elementLi = document.createElement('li');
					treeContent.appendChild(elementLi); // 添加子节点
					//创建复选框元素
					var elementInput = document.createElement('input');
					elementInput.type = "checkbox";
					elementInput.name = "layers";
					elementLi.appendChild(elementInput);
					//创建label元素
					var elementLable = document.createElement('label');
					elementLable.className = "layer";
					//设置图层名称
					setInnerText(elementLable, layerName[i]);
					elementLi.appendChild(elementLable);

					//设置图层默认显示状态
					if(layerVisibility[i]) {
						elementInput.checked = true;
					}
					addChangeEvent(elementInput, layer[i]); //为checkbox添加变更事件                                         
				}
				
			}
			/**
			 * 为checkbox元素绑定变更事件
			 * @param {input} element checkbox元素
			 * @param {ol.layer.Layer} layer 图层对象
			 */
			function addChangeEvent(element, layer) {
				element.onclick = function() {
					//alert(0);
					if(element.checked) {
						layer.setVisible(true); //显示图层
					} else {
						layer.setVisible(false); //不显示图层
					}
				};
			}
			/**
			 * 动态设置元素文本内容（兼容）
			 */
			function setInnerText(element, text) {
				if(typeof element.textContent == "string") {
					element.textContent = text;
				} else {
					element.innerText = text;
				}
			}
			
	//实现图层控制面板的隐藏显示		
$("#btn8").click(function() {
				if ($(".layerControl").css("display") == "block") {
					$(".layerControl").css("display", "none");
				} else {
					$(".layerControl").css("display", "block");
				}
				
			});			
	
	
	//实现样式设置面板的隐藏显示
$("#btn9").click(function() {
				if ($(".drawchoose").css("display") == "block") {
					$(".drawchoose").css("display", "none");
				} else {
					$(".drawchoose").css("display", "block");
				}
				
			});



//设置地图，添加控件，实现两个地图窗口联动显示，添加地图控件
	var layer1=new ol.layer.Tile({ source: new ol.source.OSM({
							url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
						}) ,name:'OSM地图'});
	var layer2= new ol.layer.Vector({source:new ol.source.Vector({url:'data/countries.geojson',
	        format:new ol.format.GeoJSON()}),
			name:'GeoJSON矢量图'
			})
	var layer3=new ol.layer.Tile({
								source: new ol.source.Stamen({
									layer: 'watercolor'
								}),
								name: 'Stamen地图'
							});
							
	var layer4 = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
            }),
            name:'谷歌地图'
        });						
		
		var View=new ol.View({
            center: [0, 0],
            zoom: 3
      });
      
	map = new ol.Map({
		target:'map',
        controls:ol.control.defaults().extend([
          new ol.control.OverviewMap({
           layers: [new ol.layer.Tile({ source: new ol.source.OSM({
							url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
						}) })],
            collapsable:false
          }),
           new ol.control.ScaleLine({
            units: "metric"
            
        }),
          new ol.control.MousePosition(),
          new ol.control.FullScreen(),
          new ol.control.ZoomSlider(),
        			
        ]),      
        layers: [
        layer1,layer4,layer3,layer2,vector],
        view: View
       
    });
    
    map1 = new ol.Map({
		target:'map1',
	    controls:ol.control.defaults().extend([
	      new ol.control.OverviewMap({
	       layers: [new ol.layer.Tile({ source: new ol.source.OSM({
							url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
						}) })],
	        collapsable:false
	      }),
	      new ol.control.ScaleLine({
            units: "metric"
            
        }),
	      new ol.control.MousePosition(),
	      new ol.control.FullScreen(),
	      new ol.control.ZoomSlider(),
	    ]),
	    
	    layers: [layer1,layer4,layer3,layer2,vector],
		view: View
		
	});
	loadLayersControl(map, "layerTree");

界面设计如下，两个地图窗口，实现地图的放大、缩小、漫游功能，有鹰眼图、比例尺、缩放按钮等控件。还有工具条，图层控制面板，样式设置面板。

使用图标显示按钮内容形成图标。

通过图层控制面板可以选择图层的显示。

左右地图联动显示，通过“联动地图窗口”按钮来控制右边地图的显示与关闭。

实现点、线、面（矩形、多边形、圆形）等不同图形的绘制。

在样式设置面板自定义地设置边框的颜色、宽度，以及填充颜色。

图层列表面板和样式设置面板都可以通过工具条，设置其显示与隐藏。

SHCHZH0110
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第一章：Vue3.0+Openlayers+Cesium创建二三维联动项目
liyajun54的博客
03-30 6145
大家好！从今天开始，我将分享我在GIS开发的过程中如何利用Openlayers和Cesium来创建一个二三维联动的项目，在后面的文章中我会讲解整个项目的搭建过程及每一个功能模块的实现方法，其中包括了很多我在入行几年做的各种特色功能实现方法，我也希望跟大家一起探讨学习，共同进步。
webgis开发示例 for OpenLayers3
11-12
基于openlayers3的webgis客户开发demo,功能丰富，可直接二次开发。定位、聚点图、热点图、个性图、路径动画、动画点、图形绘制、军标绘制、影像过滤、区域分割、地形渲染、最近点分析、弹出框、图表
【OpenLayers】WebGIS的二次开发（2）——功能展示
HenryAnChen的博客
04-08 1128
在左上角的搜索框中可以通过选择查询武汉市的风景名胜、学校、肯德基以及广州市的万达影城，也可以在左侧输入需要搜索的内容来进行搜索，点击搜索按钮后会在地图中利用红色圆圈标注搜索的地点，同时页面显示的也是搜索数据的最小外接矩形。如果选中下方的“北京市标注”，在地图上任意位置点击，地图会移动到北京，显示预先设置好的Popup标注，显示北京的简介和图片，点击有下划线的文字可以通过链接跳转到“北京市”的百度百科，点击右上角的“ד可以关闭这个标注。统计图的数据同样也是在编写程序时已经添加的江苏省的历年GDP数据。
基于OpenLayers的Web GIS系统开发
qq_34158448的博客
11-22 2283
       最近经过一段时间的学习，准备通过把自己所学的知识综合起来开发一个基于OpenLayers的Web GIS系统。 一、服务器搭建         这里以Windows 10为例，亲测可用。本系统使用Tomcat作为Web应用服务器，该服务器是一个免费开放源代码的轻量级服务器，具有技术先进、性能稳定和免费使用的巨大优势。由于其产生的背景，首先需要在电脑上配置Java环境变量。 1、...
在Vue项目中使用openlayers开发GIS项目
huangzhixin1996的博客
06-25 1447
说起点位不得不提到feature对象,feature可以理解成是我们自定义在地图上添加的元素,所以要把点位信息赋予给feature,然后再把feature添加到地图上。地图的初始化完成后，它只是一个具备了地图API的容器，在页面上的显示依然是一片空白，这个时候我们就需要为它添加图层，展示我们所需要的地图，这里以天地图图层作为例子。地图上添加了各种各样的元素之后,我们还想要能够地图根据我们的反馈,给我们展示对应的信息,此时需要添加可以跟地图交互的代码。
SpringBoot+Vue+OpenLayers6完成前后端分离的WebGIS项目（整体介绍）
MagicMHD的博客
03-18 3484
在前面的博客中，我们学习了SpringBoot、学习了Vue、也学习了OpenLayers，并且也都基于它们做了实战的小项目，现在我们要把这些目前市面上非常流行的技术融合在一起开发一个WebGIS项目。我会从零开始逐步编码逐步讲解，从基础知识学起到最后完成一个实战项目！跟大家一起从头开始利用SpringBoot做后台框架，Vue做前端框架，OpenLayers做GIS框架来开发一个完整的WebGI...
基于OpenLayer完成GIS一张图的开发
m0_56933148的博客
10-05 1516
GIS一张图的开发学习
webgis-openlayers景点管理系统.zip
06-05
基于openlayers的webgis开发，采用datagrid展现数据库中POI点信息，实现了点的增删改功能。以高德地图为底图，使用到了openlayers marker、popup等功能。另外添加了路线搜索，使用高德地图api，用openlayers进行渲染...
基于openlayer开发webgis.docx
04-29
基于OpenLayers开发WebGIS OpenLayers是一款功能强大且广泛使用的开源WebGIS组件库，用于构建交互式的地图应用程序。本文档旨在为基础开发者提供一个基于OpenLayers的地图开发指南，涵盖快速搭建、单标记和行政区...
基于JavaScript的WebGIS前端开发及优化
最新发布
04-15
论文在对HTML5、Openlayers、RequireJS和Backbone技术进行分析的基础 上，结合各自的优点，使用Openlayers构建了基于JavaScript的轻量级、开放式 WebGIS系统模型，阐述了其设计思想，初步完成了系统实现。...
OpenLayers实战案例教程
08-02
NULL 博文链接：https://375537364.iteye.com/blog/1962284
web漂亮的界面参考资料
04-11
一些漂亮的web前端以及后端素材，开发当中可以参考等等等等等等等等等等等等等等等等等等
基于openlayers的局域网地图开发第8课基本图形绘制源码
12-22
文件中不包含地图文件，如需要地图文件可下载第7课源码或自行下载地图文件，并将其命名为simpleMap并将其放入项目根目录），课程基于openlayers开发局域网地图，可以实现地图显示、地点标注、绘制图形、添加图片与...
WebGIS 信息系统-主界面基本模块功能设计
leva的博客
06-28 1571
在应用中为了提高系统的安全性，避免用户通过输入地址访问JSP 页面资源，在开发时将JSP 页面放入WEB-INF 文件夹中，这样用户就只能通过Action 访问指定的JSP 页面。主界面展示基本地图，并且可以通过选项菜单切换不同类型的地图，三个二级界面分别实现地点搜索功能、路径查询功能以及导航功能。导航功能界面基于路径抽屉展示的结果，可分段展示不同的路径片段，同时可以开启语音提示功能。(2 ）搜素栏： 根据输入的地址，可实现名称的查找、地图的自动定位功能，也可根据输入的坐标实现地图的自动定位功能。
前端切图仔如何玩转webgis开发酷炫界面实战项目经验指南
qq_15041931的博客
07-02 5042
WebGIS（网络地理信息系统）是指工作在Web网上的GIS,是传统的GIS在网络上的延伸和发展，具有传统GIS的特点，可以实现空间数据的检索、查询、制图输出、编辑等GIS基本功能，同时也是 Internet 上地理信息发布、共享和交流协作的基础。
OpenLayers学习：使用HTML网页实现地图显示功能（以加载天地图为例）步骤介绍，以及相关知识点补充介绍
weixin_73005544的博客
09-24 4764
OpenLayers学习：使用HTML网页实现地图显示功能（以加载天地图为例）步骤介绍，以及相关知识点补充介绍
webgis主界面及查询功能实现
Kaybee - 练级之路
03-24 6099
3月24日利用前几天爬到的数据，初步完成了主界面以及基本的查询功能，先上个成果图 记录： 1.多表查询，模型类的扩展，如果要返回复杂的结果集，可以继承属性较多的模型类，或者新建一个类，包含了需要的属性特征，其实说起来比较像数据库里面的视图，如果用视图的话应该会比较好，但我又希望数据库的结构能够尽量的简洁。 2.自己感觉现在浏览器的负荷在数据量比较大的时候可能性能有点差，加载的东西有点多。 3.
WebGIS入门教程（非常详细）从零基础入门到精通，看完这一篇就够了
Python_0011的博客
09-04 9178
于是，WebGIS应用需求剧增，基于B/S架构的GIS系统越来越多地开始提供服务，并且随着RIA技术、Ajax技术等的涌现和成熟，WebGIS能够以更好的视觉效果与交互效果展现，越来越受到广大用户的关注。网络与GIS的融合成为GIS应用的催化剂，标志着GIS迎来一个新的时代，GIS真正走向大众化，其应用全面融入人们的工作与生活，并彰显出了巨大的活力。若设计简单的大众应用WebGIS，可以不使用服务器端开源GIS平台，直接访问第三方提供的数据服务、数据接口，或者存储在关系数据库中的POI数据等。
html5 webgis开发,WebGIS开发-openlayers5入门(1)
weixin_31041421的博客
06-07 642
前言：初学GIS开发是痛苦的，复杂的API加上复杂的样式算法和交互功能，总让人感觉到无从下手。从事GIS开发有一段时间，整理了一些基础，和自己所理解流程，希望能够帮助到需要的人。准备工作：我们采用Vue端进行开发，省去基本Vue搭建部分，直接在文件中入手初始化地图 初始化mapOpenLayers采用面向对象方式开发，对于前端来说比较容易上手。下面着手初始化数据：import { Map, Vie...
深入探索OpenLayers：WebGIS客户端开发利器
"OpenLayers学习心得" OpenLayers是一款强大的JavaScript库，主要用于构建WebGIS应用程序。由MetaCarta公司创建，该库遵循BSD License，确保了开源和自由...对于WebGIS开发人员来说，OpenLayers是一个必不可少的技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值