新手入门必赢网址是多少
SuperMap iClient for JavaScript 新手入门
地理新闻连串(菲律宾语:Geographic Information
System,缩写:GIS)是一门综合性学科,结合地农学与地图学,已经广泛的采取在分化的天地,是用来输入、存储、查询、分析和出示地理数据的处理器种类。具体表达请参考维基百科。
固然如此GIS那门学科很复杂,不过从开发层次来划分,一般分为底层开发和二次开发。GIS组件发展高效,将底层算法进行了包装。二次开发人士只要通晓有关组件的API函数,基本能不负众望业务需要。
常见GIS组件平台:
- ArcGIS
– Esri中国-Esri中国,GIS,GIS平台,地理新闻系列 - SuperMap – 超图软件股份有限公司
- 天地图
– 国家地理新闻公共服务平台“天地图”
明日的要紧就是感受一把SuperMap平台下WEB地图开发套件的施用。
1. 开销准备
SuperMap iClient 8C for JavaScript 是一套由 JavaScript 语言编写的 GIS
客户端应用开发包, 协理多源数据地图,接济多终端,跨浏览器,
通过本产品可疾速完结浏览器上美丽、流畅的地形图展现。
- 获取开发包。
libs
文件夹存放产品的库文件。下图是多少个分库援助的效果:
SuperMap.js
为总库文件,帮忙所有功用。SuperMap.Includ.js
是引用文件,用来在里头统一引用上述JS和其他CSS资源文件。
- SuperMap iClient for JavaScript
类参考:点击访问
2. 飞跃入门
“图层” 在地形图开发中是一个很首要的定义。相信学过 PhotoShop 的情侣对
“图层”
那么些概念不生疏。图层就像是一块透明的玻璃,在一块玻璃上画一朵花,在另一块玻璃上画一席草,重叠两块玻璃,由上而下俯视,从而形成图像展现效果。
地图上显现拉长的要素也一样是由图层组成。地图可以添加一个要么四个图层,通过在图层上标记或绘制,组合展现用户所急需的最后效果。
SuperMap iClient for JavaScript 援救的图层如下:
- TiledDynamicRestLayer: 动态分块图层,用来对接 SuperMap iServer
的分块动态REST图层服务。 - CloudLayer:云图层,用来突显 SuperMap 云服务发布的图层。
- SimpleCachedLayer:缓存图层,用来浮现 SuperMap iServer 的缓存图层。
- WMS: 该图层用来突显OGC地图服务的地形图数据。
- WMTS: 用来突显基于OGC WMTS 1.0.0正经兑现的地形图服务的地形图数据。
- Vector: 矢量要素渲染图层。
- 马克ers:标签图层。
- OpenLayers:提供的其余第三方图层。
2.1. 创设 SuperMap iServer 服务地图
SuperMap iServer 是依照跨平台 GIS 内核的云 GIS
应用服务器,该类地图的创办要依赖其出品iServer服务,本地搭建 SuperMap
iServer
服务后方能测试。本例讲解首要内容是始建REST动态分块图层和学习地图控件使用。
Step1:成立地图突显容器。
<html>
<body onload="init()">
<!--地图显示的div-->
<div id="map" style="position: absolute; left: 0px; right: 0px; width: auto; height: 90%;">
</div>
</body>
</html>
Step2:引入资源文件,完结成立地图作用,加载REST动态分块图层。
<head>
<title>经纬度坐标系图层</title>
<!--引用需要的脚本 注意:SuperMap.Include.js内部已经动态引用相关JS,CSS文件-->
<script src="supermap/libs/SuperMap.Include.js"></script>
<script>
//声明全局变量 map、layer、url
var map, layer, url = "http://localhost:8090/iserver/services/map-shandong-zibo/rest/maps/zibo";
function init() {
//1.在指定DOM元素上初始化地图对象。
map = new SuperMap.Map("map");
//2.添加控件。
map.addControl(new SuperMap.Control.ScaleLine());
map.addControl(new SuperMap.Control.LayerSwitcher());
map.addControl(new SuperMap.Control.MousePosition());
//2.初始化图层。
//创建分块动态REST图层,该图层显示iserver 8C 服务发布的地图,
//其中"想要"为图层名称,url图层的服务地址,{transparent: true}设置到url的可选参数
layer = new SuperMap.Layer.TiledDynamicRESTLayer("zibo", url, null, { maxResolution: "auto" });
//监听图层信息加载完成事件,异步加载图层。
layer.events.on({ "layerInitialized": addLayer });
}
function addLayer() {
//将Layer图层加载到Map对象上。
map.addLayers([layer]);
//出图,设置中心点,指定放缩级别。
map.setCenter(new SuperMap.LonLat(118.11908, 36.68166), 3);
}
</script>
</head>
Step3:使用地图控件。
控件用来控制地图的来得和对相互操作的响应,在并未确定性指定的状态下,地图默许添加Navigation、PanZoomBar控件。常见控件如下:
必赢网址是多少,可知控件:
- PanZoomBar:地图平移缩放控件,提供对地图的移动和缩放的支配操作。
- ScaleLine: 比例尺控件,突显地图的比例关系。
- LayerSwitcher: 地图图层切换控件,可以查阅图层新闻和控制图层呈现。
- OverviewMap:地图鹰眼控件,协理查看地图更大范围的突显。
- MousePosition:该控件彰显鼠标移动时,所在点的地理坐标。
不可知控件:
- Navigation:地图浏览控件,监听鼠标点击、平移、滚轮等事件来落实对地图的浏览操作。
- SelectFeature:要素采用控件,监听鼠标悬停,点击事件来摘取vector图层上面的元素。
- DrawFeatue: 要素绘制控件,监听鼠标事件来兑现要素的绘图。
添加控件有三种艺术,一种是在创造Map对象的时候,设置controls
特性来添加控件。如下:
var map = new SuperMap.Map('map', {controls: [new SuperMap.Control.PanZoomBar()]});
另一种就是上述代码所选用的那么。在形成Map对象创制后,调用addControl()
或addControls()
来添加控件。如下:
var map = new SuperMap.Map('map');
map.addControl(new SuperMap.Control.ScaleLine(), new SuperMap.Pixel(800,400));
Step4:查看运行效果
2.2. 构建 SuperMap 云地图
本例讲解内容是,结合 SuperMap
云服务发表的图层CloudLayer的创办,并已毕对地图的放大、裁减,图层的隐形、移除等基本功成效的以身作则,以及形成矢量覆盖物和符号覆盖物的丰硕、事件注册等功能。
Step1:同样成立地图容器。但是是多添加多少个按钮。
<body onload="init()">
<div id="toolbar" style="padding: 10px">
地图基础操作:
<input type="button" class="btn" value="放大" onclick="mapEnlarge()" />
<input type="button" class="btn" value="缩小" onclick=" mapReduce()" />
<input type="button" class="btn" value="平移" onclick="mapPan()" />
图层基础操作:
<input type="button" class="btn" value="隐藏" onclick="layerShowOrHide()" id="isShow" />
<input type="button" class="btn" value="移除" onclick="layerRemove()" />
添加覆盖物:
<input type="button" class="btn" value="矢量元素覆盖物" onclick="addVector()" />
<input type="button" class="btn" value="标记覆盖物" onclick="addMarker()" />
</div>
<div id="map" style="position: absolute; left: 0px; right: 0px; width: auto; height: 90%;"></div>
</body>
Step2:创设地图对象,加载 SuperMap
云地图。并演示地图、图层的一些基础操作,以及覆盖物的增加、事件注册等功能。代码有点稍多,请细细品味。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CloudLayer</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="supermap/libs/SuperMap.Include.js"></script>
<script type="text/javascript">
var map;
var layer, vectors, markers, imgMarker;
var vectorInfoWin, markerInfoWin;
function init() {
//初始化地图对象。
map = new SuperMap.Map("map", {
controls: [
new SuperMap.Control.Navigation(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.LayerSwitcher(),
new SuperMap.Control.MousePosition()
],
//地图所有图层都被当做叠加图层来使用。
allOverlays: false
});
//通过向SuperMap云服务器发送请求得到SuperMap云服务发布的图层。
layer = new SuperMap.Layer.CloudLayer();
//构建 标记类覆盖物 图层。
markers = new SuperMap.Layer.Markers("Markers");
//构建 矢量类覆盖物 图层。
vectors = new SuperMap.Layer.Vector("Vectors");
//创建一个矢量选择要素的控件,在指定图层上单击鼠标选择矢量要素。
var selectFeature = new SuperMap.Control.SelectFeature(vectors,
{
onSelect: onFeatureSelected
});
map.addControl(selectFeature);
//激活控件。
selectFeature.activate();
//将 底图 和 两类覆盖物图层 添加到地图上。
map.addLayers([layer, vectors, markers]);
//设置中心点,指定放缩级别。
map.setCenter(new SuperMap.LonLat(11339634.286396, 4588716.5813769), 4);
}
//a.1. 按钮生成一个矢量要素覆盖物,并添加到矢量图层。
function addVector() {
//构建点几何对象类
var point = new SuperMap.Geometry.Point(13648644.286396, 5518190.5813769);
//构建矢量要素覆盖物
var pointVector = new SuperMap.Feature.Vector(point);
//修改点样式红色
pointVector.style = { fillColor: "red", strokeColor: "yellow", pointRadius: 6 };
//添加 矢量要素覆盖物 到 矢量图层
vectors.addFeatures(pointVector);
}
//a.2. 点击矢量要素覆盖物,触发调用此函数。
function onFeatureSelected(feature) {
closeVectorInfoWin();
//创建一个具有指向和边框的浮动弹窗
var popup = new SuperMap.Popup.FramedCloud(
"popwin",
new SuperMap.LonLat(13648644.286396, 5518190.5813769),
null,
"矢量要素覆盖物鼠标点击事件",
null,
true);
vectorInfoWin = popup;
//在地图中添加弹出窗口
map.addPopup(popup);
};
//a.3. 销毁 Popup.FramedCloud 弹窗。
function closeVectorInfoWin() {
if (vectorInfoWin) {
vectorInfoWin.hide();
vectorInfoWin.destroy();
}
}
//b.1. 按钮生成一个标记覆盖物,注册click事件,并添加到标记图层。
function addMarker() {
//SuperMap.Size 用来描绘一对高宽值的实例
var size = new SuperMap.Size(30, 30);
//依据size创建屏幕坐标
//SuperMap.Pixel 此类用x, y坐标描绘屏幕坐标
var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
//SuperMap.Icon 创建图标,在网页中表现为div标签中的image标签
var icon = new SuperMap.Icon('supermap/thememarker-gold.png', size, offset);
//依据位置和大小初始化标记覆盖物
imgMarker = new SuperMap.Marker(new SuperMap.LonLat(10454187.286396, 4740367.5813769), icon);
//添加 标记覆盖物 到 标记图层
markers.addMarker(imgMarker);
//注册 click 事件,触发 mouseClickHandler()方法
imgMarker.events.on({
"click": mouseClickHandler
});
}
//b.2. 点击标记覆盖物,触发click事件会调用此函数。
function mouseClickHandler(event) {
closeMarkerInfoWin();
//构建固定位置浮动弹窗,自适应显示
var popup = new SuperMap.Popup.Anchored(
"marker", //唯一标识
imgMarker.getLonLat(), //标记覆盖物的坐标
new SuperMap.Size(220, 140),
'标记覆盖物鼠标点击事件',
null,
true,
null);
popup.autoSize = true;
markerInfoWin = popup;
map.addPopup(popup);
}
//b.3. 销毁 Popup.Anchored 弹窗。
function closeMarkerInfoWin() {
if (markerInfoWin) {
markerInfoWin.hide();
markerInfoWin.destroy();
}
}
//c.1. 地图放大 ,在当前缩放级别的基础上放大一级。
function mapEnlarge() {
map.zoomIn();
}
//c.2. 地图缩小,在当前缩放级别的基础上缩小一级。
function mapReduce() {
map.zoomOut();
}
//c.3. 地图平移 ,根据指定的屏幕像素(-20,-8)值平移地图。
function mapPan() {
map.pan(-20, -8);
}
//d.1. 设置图层可见性。
function layerShowOrHide() {
var temp = document.getElementById("isShow").value;
if (temp == '隐藏') {
layer.setVisibility(false)
document.getElementById("isShow").value = '显示';
} else {
layer.setVisibility(true);
document.getElementById("isShow").value = '隐藏';
}
}
//d.2. 移除图层,不可恢复。
function layerRemove() {
map.removeLayer(layer);
}
</script>
</head>
Step3:效果演示
2.3. 塑造 天地图WMTS服务地图
什么是WMTS服务?
WMTS,切片地图Web服务(Web Map Tile
Service)当前版本是1.0.0。该服务符合 OGC(Open Geospatial
Consortium,开放地理音信联盟)制定的 WMTS 完毕正式。
WMTS 是 OGC
提议的缓存技术标准,即在服务器端缓存被切割成一定大小瓦片的地形图,对客户端只提供这个先行定义好的单个瓦片的劳动,将越多的数量处理操作如图层叠加等>
放在客户端,从而缓解 GIS 服务器端数据处理的压力,改正用户体验。
SuperMap iClient for JavaScript 援救访问第三方 WMTS
地图服务。本例针对天地图的 WMTS 服务开展调用演示。
领域图官网提供的劳动资源:http://www.tianditu.com/service/query.html
Step1:这次先贴出演示代码,再做分析。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>天地图WMTS服务图层</title>
<style type="text/css">
</style>
<script src="supermap/libs/SuperMap.Include.js"></script>
<script type="text/javascript">
var map, layerBase, layerMarker;
function init() {
//初始化地图,所有图层都被当做叠加图层来使用。
map = new SuperMap.Map("map", { allOverlays: true });
//全球矢量底图服务。
layerBase = new SuperMap.Layer.WMTS({
name: "vec",
url: "http://t0.tianditu.com/vec_c/wmts",
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
requestEncoding: "KVP"
});
//全球矢量中文注记服务。
layerMarker = new SuperMap.Layer.WMTS({
name: "cva",
url: "http://t0.tianditu.com/cva_c/wmts",
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
requestEncoding: "KVP"
});
//添加图层,设置中心点,指定放缩级别。
map.addLayers([layerBase, layerMarker]);
map.setCenter(new SuperMap.LonLat(0, 0), 3);
}
</script>
</head>
<body onload="init()">
<div id="map" style="left: 0px; right: 0px; width: auto; height: 90%;">
</body>
</html>
Step2:运行效果
Step3:上边是调用了世界图官网提供的多个WMTS服务图层叠加后的机能。成效完结重大是依靠 SuperMap.Layer.WMTS
类来成功。下边就介绍介绍它的局部基础属性:
layerMarker = new SuperMap.Layer.WMTS({
name: "cva", //WMTS服务名称。
url: "http://t0.tianditu.com/cva_c/wmts", //WMTS图层的服务地址,必设属性。
layer: "cva", //图层名称。
style: "default", //发布的图层样式,默认为”default”。
matrixSet: "c", //发布的标识符矩阵集,必设属性。
format: "tiles", //图像的MIME类型,默认为 “image/png”。
requestEncoding: "KVP" //请求编码。可以是“REST”或者“KVP”,默认为”KVP”。
});
再有一个难点,怎么着获得那个 WMTS 服务参数值?那即将回过头继续刺探 WMTS
服务。这一块不做详细表明,只说操作方法。
譬如说,获取天地图的海内外矢量底图服务音信,只要浏览器请求:
http://t0.tianditu.com/vec_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities
响应为一个XML文档,保存到当地。在XML文档中找寻Contents
节点,关于劳动图层的信息就在内部了。
呼吁参数 GetCapabilities 操作使得 WMTS
客户端从服务器获取服务元数据文档,详细请参考 WMTS
API。
3. 本篇小结
本篇总括了这几天自己对 SuperMap iClient for JavaScript
的认识进程。内容根本不外乎二种档次地图的创设,以及协作局地基础的地形图操作,在上述多少个小节开篇已用粗体标出,不再赘言。本篇已联合至 村办站点。