本篇文章给大家谈谈web前端gis地图应用，以及GIS地图制作对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
目录一览：
- 1、电子地图系统WEBGIS 关键技术
- 2、公司打算开发一套webgis，需要在web上显示地图，那种方案比较好？
- 3、胡中南：Web端GIS技术新进展 | (PPT+速记)
- 4、webgis中为什么加入两个地图功能后出错
- 5、怎么用ArcGIS制作Web地图
- 6、WebGIS在现实生活中的应用有哪些？
电子地图系统WEBGIS 关键技术
随着Internet技术的不断发展和人们对地理信息系统(GIS)需求的日益增长，利用Internet在Web上发布空间数据，为用户提供空间数据浏览、查询和分析的功能，已成为地理信息系统(GIS)发展的必然趋势。于是，基于Internet技术的地理信息系统———WEBGIS就应运而生。
WEBGIS是一个将地理信息处理和地理信息分布于Web计算平台进行的 *** 化GIS系统，它是面向对象软件构件技术、信息互操作技术、 *** 技术发展的产物。系统采用ARCGISServer作为WEBGIS支撑平台实现基础地理空间数据和地质空间数据的 *** 发布。
1.栅格WEBGIS技术
“栅格WEBGIS”(Grid WEBGIS)这一概念和产品是对传统Web地图服务方式的一种革命。启用这个名称，可谓是一语双关:就是提供地理底图的方式来讲，再也不是传统的方式———服务器端将矢量地图临时生成栅格图发给客户端，而是事先生成好栅格图，用户请求时不必做任何处理就可以即时发给客户端;就客户端的显示方式来讲，摒弃了传统的一张地图的显示方式，客户端采用多幅小图拼接的方式显示，总体看起来像是小图片填充一个大的栅格的效果。
添加微信好友, 获取更多信息
复制微信号
预先制作好所要发布的地理底图、遥感影像不同缩放比例下的静态图像存放于服务器端，待实际发布时根据缩放比例在不同级别图像之间进行切换。这种技术大大提高了地图的Web浏览速度。
2.Web服务器端技术
Web服务器端主要由两部分组成，即IIS(Internet Information Server)和WEBGIS服务器(包括ArcIMS组件、InternetGIS站点设计向导程序Wizard及面向城市地质Web应用的扩展组件)。
其中，IIS主要负责接收普通的用户请求，当其需要空间数据时则向WEBGIS服务器发出请求，WEBGIS服务器接收到浏览器端的请求后，利用ArcIMS组件和城市地质Web应用扩展组件的功能，进行处理、分析、计算等;如果需要数据服务器的数据，则由WEBGIS服务器向数据服务器发出请求。
3.Web客户端相关技术
包括IITML、客户端脚本语言、VML(矢量可标记语言)、XML、DOM(文档对象模型)、CSS(层叠样式表)及Ajax(Asynchronous JavaScript and XML的缩写)，这些技术的综合运用大大扩展了系统功能，大幅提高了系统响应速度。
公司打算开发一套webgis，需要在web上显示地图，那种方案比较好？
如何说单做webmap，arcgis server 是更好的， 可以做地图服务，可以标注不同的点，但是画区域、折线，几何图形等不支持。你也可以看看多比控件，（好像是这么写的），他有通过javascipt方式来调用处理，类似google map api，mapbar api等ky。。。
胡中南：Web端GIS技术新进展 | (PPT+速记)
在GTC 2020『GIS基础软件新技术论坛』上，超图研究院副院长胡中南作《云原生GIS及Web端技术新进展》报告，他首先系统讲解了云原生GIS技术的三大新进展：微服务更微、可扩展，容器化部署更全、更易用，自动化编排适配更多平台等，介绍了这些技术如何支撑云南地质大数据等系统实现高可用、高并发、高弹性“三高”价值；也系统阐述了Web端GIS技术从基础库、组件库、模板库到WebApps的多层次结构及相关新进展，让GIS前端应用开发定制更快速便捷。
本文将分为云原生GIS（点击左侧蓝色文字可直接查看）与Web端GIS两大部分，现分享Web端GIS技术部分资料如下：
演讲PPT
上半部分主要讲云原生GIS技术如何助力GIS系统快速部署与运维。
接下来我为大家介绍Web端GIS技术。
以前大家可能认为SuperMap的Web端就是一个SuperMap iClient JavaScript，仅仅是将Leaflet等开源技术做一些封装集成、改进，和SuperMap服务器产品的REST API做了对接，其实这只是我们Web端技术栈的组成之一，也即图上所示的基础的iClient Libraries类库（L1）。
我们在上面还提供了iClient Components，就是所谓的WebGIS组件库（L2），适配了Vue框架和React框架。在这之上我们面向行业应用共性，基于组件库进一步封装，提供了Web模板库iClient Templates（L3），只需将数据、LOGO和图片等进行简单修改，就可以快速上线。我们还提供了可构建、可定制、可扩展的Web Apps，如MapDashboard和WebSite UI（L4），以及更偏向使用的一些Web Apps，用做制图、分析等（L5）。
由此可见，SuperMap GIS的Web端包括这五个层次的内容,已经不仅仅是SuperMap iClient JavaScript单个产品。
在SuperMap iClient JavaScript层面，我们也有新的增强与改进。
SuperMap iClient JavaScript 2020模块图。Web Libraries和 Web Components都有一些增强，新增加了Web Templates。
在此，我重点介绍一下组件和模板的新特性和新技术：组件技术就是把Libararies类库做进一步的封装，更少的代码做更快的开发，比如可以一行代码加一个Web Map组件，里面填一个服务地址和地图资源ID，就可以出一个地图了。欢迎大家在超图软件官网查看范例。
这是2019年我们提供的技术。今年我们新增了多款Vue组件，包括时间轴、卷帘地图等。地图、图表等都有新的增强和改进。
今年我们新增了多款Vue组件，包括时间轴、卷帘地图等。地图、图表等组件都有新的增强和改进。
这是我们做的全球新冠疫情图范例。使用组件技术做了封装，用户不用一行一行写代码，操作更方便、开发更快捷。
新的Web模板技术，可以让应用开发更便捷。直接提供多种行业应用模板，用户只需修改LOGO、配色，或删除不用的地方即可。
再上面就是大屏，可快速开发建站。
No Code无代码开发，可以快速建站，包括SuperMap iPortal门户首页、地图大屏App等，都可以进行拖拉式操作，不需要写代码就可以完成可视化定制。门户首页可以拖出来，Web应用可以用大屏拖出来。
地图大屏也做了一些增强。
以前做了大屏只能看，不能互动，不能点，点了以后也不能操作。现在能看、能点、能互动。有了交互更好用。
包括，我们对布局也做了优化，移动端可以自己修改布局。
包括超宽屏终端都可以适配，这是一个项目的照片。
另外一个定制就是SuperMap iPortal站点定制和扩展增强。
从首页到登录页、管理页甚至各个Web Apps都支持定制和扩展。
从而实现No Code的可视化定制，同时做了一些新的组件和能力增强。
可以用这个特性快速搭建一个新的首页，从上面的菜单、左上角的LOGO，包括Banner、横幅各种内容都支持修改、增加和删除。甚至用户不懂开发都可以直接进行操作。此外，该布局是自适应的，在手机上同样可以观看。
这是2019年已有功能，今年我们做了新的增强。另外就是全代码定制。
你可以基于自己的技术直接写一个首页。不管是我们提供的组件，还是你自己写的组件，或是第三方组件都可以拿来使用。
包括我们的登录页和资源管理页都可以进行修改和定制。
此外，大屏本身也是可以扩展的。
包括数据上图。
数据洞察，都是可以修改和定制的。
可以加自己的图表、UI。
前面所提到的是定制开发，再上层就是直接使用的WebApp。
如果大家感兴趣，可以去我们官网：，或GTC网站：来观看新特性。
数据上图，制图能力更丰富。
可以在线打印Web地图。
简单回顾一下，我们讲到的两大部分技术：一个是云原生GIS技术，让GIS后台服务管理运维更高效，另一个是Web端GIS技术，让GIS前端应用开发定制更快速。一个是高效，一个是快速。
总的报告可以用两个图连起来，之一就是K8s部署结构图，通过它可以把云原生GIS技术一览无余，包括SuperMap iServer、SuperMap iPortal、SuperMap iManager之间的关系、用了什么技术等都可以看到。
第二张图如上所示，我们在Web端的整体技术层次都可以看到，从SuperMap iClient Libraries类库，到组件、模板，到大屏、Site UI定制、扩展，以及WebApps等等。
以上就是我的报告，谢谢大家。
webgis中为什么加入两个地图功能后出错
一开始看到OpenLayers，就有一个问题。就是它作为WebGIS的前端，通俗地说，是“显示”地图的。那么，它显示的地图是什么，是怎么显示的，又是怎么实现的？——暂且把这个问题叫做地图表现。我觉得最关键的就是Map类，把这个类分析清楚了，问题就解决了一大半了。
前面之一回里说过怎么实例化一个地图，怎么向地图里加图层加控件。其实，地图是这样的，它就像一个容器，可以盛东西。要分析它光理解这些还不够，我们要知道这个容器是怎么做出来的，及具体都有什么功能。
Map类有两个常量：Z_INDEX_BASE和EVENT_TYPES，不说了，可顾名而思其意。再看它定义的一些属性：div（The element that contains the map）、baseLayer（The currently selected base layer）、events（An events object that handles all events on the map）。是这样，web页的div通过以id或name的形式获得map对象，然后layers和control在加载到map上，表现为地图。顺便说一句，控件control和事件event是相关联的，这以后会说。
OpenLayers.Map类提供了两种实例化方式，举例来看：
[代码]js代码：
// create a map with default options in an element with the id "map1"
var map = new OpenLayers.Map("map1");
// create a map with non-default options in an element with id "map2"
//Optional object with properties to tag onto the map.
var options = {
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'meters',
projection: "EPSG:41001"
};
var map = new OpenLayers.Map("map2", options);
OpenLayers.Map类实现的函数APIMethod是分组的，比如Layer Functions、Control Functions、Popup Functions、Container Div Functions、Zoom, Center, Pan Functions、Layer Options、Baselayer Functions、Zooming Functions、Translation Functions。其中，最关键的是Layer Functions和Control Functions，因为就是Layer对象和Control对象构成了map的主体。下面从每组函数中挑选出一两个来，看看具体实现过程。
Layer Functions：
就看addLayer函数吧，下面的addLayers就是调用的它，代码如下：
[代码]js代码：
addLayer: function (layer) {
for(var i=0; i this.layers.length; i++) {
if (this.layers[i] == layer) {
var msg = "You tried to add the layer: " + layer.name +
" to the map, but it has already been added";
OpenLayers.Console.warn(msg);
return false;
}
}
layer.div.style.overflow = "";
this.setLayerZIndex(layer, this.layers.length);
if (layer.isFixed) {
this.viewPortDiv.appendChild(layer.div);
} else {
this.layerContainerDiv.appendChild(layer.div);
}
this.layers.push(layer);
layer.setMap(this);
if (layer.isBaseLayer) {
if (this.baseLayer == null) {
// set the first baselaye we add as the baselayer
this.setBaseLayer(layer);
} else {
layer.setVisibility(false);
}
} else {
layer.redraw();
}
this.events.triggerEvent("addlayer");
}
可以看到其中涉及到layer的一些 *** ，下一回具体介绍OpenLayers. Layer类。
[代码]js代码：
Control Functions：
addControl: function (control, px) {
this.controls.push(control);
this.addControlToMap(control, px);
}
可以看出，添加控件的过程是由controls.Push()和addControlToMap()两个函数共同完成的。
[代码]js代码：
addControlToMap: function (control, px) {
// If a control doesn't have a div at this point, it belongs in the
// viewport.
control.outsideViewport = (control.div != null);
control.setMap(this);
var div = control.draw(px);
if (div) {
if(!control.outsideViewport) {
div.style.zIndex = this.Z_INDEX_BASE['Control'] +
this.controls.length;
this.viewPortDiv.appendChild( div );
}
}
}
Popup Functions：这组函数和上两组函数相似，是在地图上添加或删除Popup 对象。
Zoom, Center, Pan Functions：
[代码]js代码：
//Allows user to pan by a value of screen pixels
pan: function(dx, dy) {
// getCenter
var centerPx = this.getViewPortPxFromLonLat(this.getCenter());
// adjust
var newCenterPx = centerPx.add(dx, dy);
// only call setCenter if there has been a change
if (!newCenterPx.equals(centerPx)) {
var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
this.setCenter(newCenterLonLat);
}
}
Zooming Functions:
这里就看看放大缩小函数吧。
zoomIn: function() {
this.zoomTo(this.getZoom() + 1);
}
zoomOut: function() {
this.zoomTo(this.getZoom() - 1);
}
显然，zoomIn和zoomOut都使用了getZoom *** ，放大就是让zoom加1，缩小减1。
怎么用ArcGIS制作Web地图
ArcGIS
Web地图由底图和一组相关图层构成，用户可与之交互以执行某一有意义的任务。这些地图可供广大用户使用，并且包括多比例底图、针对特定受众的业务图层以及可帮助用户深入了解感兴趣要素的信息弹出窗口。这些地图还支持可视化、编辑、分析和时间功能。它们是
Web 地图应用程序的基础，并且可以通过包括移动设备、桌面应用程序和 Web 浏览器在内的多种客户端进行查看。
如何创作 Web地图
可通过以下三个基本步骤来创建 Web
地图：选择区域，确定要显示的内容，然后保存并共享您的工作。可以从新地图开始创建，或使用现有地图创建。打开现有地图时，可更改范围、定位地点、查看图例、查看有关要素的信息等。不管采用何种 *** ，都可以从底图库选择底图、添加数据图层、配置弹出窗口、包含特定位置的书签、包含地图的描述，然后将其另存为自己的项目，并通过链接或者将其嵌入网站或应用程序中与他人共享。要创建引人注目的
Web 地图，请考虑以下提示。
创建可用、易用且可操作的地图
高质量的地图可帮助您在 Web 上生动形象地展示地理信息。
作为地图创作者，您的角色实质上就是开放这些信息的访问权，并通过可用、易用且可操作的方式将您的地图呈现出来，无论这些地图是通过浏览器、移动设备还是桌面应用程序来显示。
使用有意义的底图和图层
地图应具有一定的意义，如讲述一段故事、传达一种思想或展示一个情景。为达到这个目的，您的底图和图层应具有以下特点：具有高质量的制图效果的底图和图层、提供多种比例、可快速绘制、包含丰富准确的信息、针对特定群体;如果地图的符号系统不够直观，还需要包含可查看的图例。
您可能还会考虑包含专用于编辑时间、影像和要素的图层。此外，通过添加一些不属于现有图层的要素，还可以帮助您的用户深入了解您的地图。例如，您可能需要在最近的火线中添加一些照片和文字说明。可以通过添加地图注释图层或从文件导入要素来添加要素。
显示重要信息
通常，提供详细信息的更佳方式是在用户与地图交互时将其显示出来，例如，通过在用户发出相关请求时显示弹出窗口和图例。由于图层可能包含大量要素数据，因此应仔细考虑要在弹出窗口中显示哪些属性以及这些信息的显示方式。您不希望您的用户被一些不相关或非必要的信息干扰;而是希望仅显示与特定地图相关的重要信息，并考虑在弹出窗口中包括格式化的文本、图像、图表等。您还可以考虑添加可编辑要素，以便用户可以添加和移除要素及相关信息。
提供充足信息量的项目详细信息
这些用于描述您的地图的信息应该清楚明确。请花一些时间来提供信息性标题、摘要、描述和标签，以便其他人可以了解地图显示的内容。最后，请确保对他人在地图项目详细信息页面添加的任何评论做出响应。您甚至可以主动添加评论，以推广地图中的特定要素;例如，可以鼓励用户查看您刚刚添加的新的航空影像。
与您所在组织的所有人共享
Web 地图可通过 Web
浏览器、移动设备和桌面客户端进行访问，从而使其成为用于与广大用户进行共享的强大工具。要获得更大数量人群的关注，请确保将地图共享给所有人，并确认需要查看您地图的所有人都能够访问所有图层。
WebGIS在现实生活中的应用有哪些？
地图浏览（地图、路况）
poi位置查询
路径查询（公交线路、换乘，自驾车路线）
关于web前端gis地图应用和GIS地图制作的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
