地图显示及操作入门学习

开发工具与关键技术：Visual Studio 2015/SuperMap iDesktop 9D

作者：#33

撰写时间：撰写时间：2020年05月18日

地图显示及操作入门学习

一、制作好地图并在iserver服务发布，

二、然后双击红色剪头文件启动iserver服务，需要关闭时再双击绿色箭头文件。

三、在Visual Studio 2015创建一个新的项目，复制SuperMap的脚本文件到项目中。

然后创建HTML页面，在<head>标签中添加SuperMap的脚本引入

<body>标签中承载地图控件的div如下：

<body onload="onPageLoad()"> ......

@*地图加载块*@

<divid="map"style="position:relative;border:0px;left:0px;right:0px;width:100%;height:100px;" > </div> </div>

...... </body>

写好以上代码后，一、创建map对象；二、向map中添加图层。

Map对象url地址：在服务管理列点击相应地图再点击地图列表下面的地图名称获取地址

地址url和地图中心点如下：

//一、创建map对象

var map,url ="http://localhost:8090/iserver/services/map-SZCHWork/rest/maps/SZBA",// 设置map访问的GIS服务地址

//加载地图方法

function onPageLoad(){

map =new SuperMap.Map("map", {

controls: [

new SuperMap.Control.LayerSwitcher(),//地图图层切换控件，可以查看图层信息和控制图层显示，默认位于地图右上角

new SuperMap.Control.ScaleLine(),//比例尺控件，显示地图的比例关系，默认位于地图左下角

new SuperMap.Control.PanZoomBar(),//平移缩放类。用于平移缩放地图，默认情况下垂直显示在地图左上角。

new SuperMap.Control.Navigation({ dragPanOptions: { enableKinetic:true } }),//地图浏览控件，监听鼠标点击、平移、滚轮等事件来实现对地图的浏览操作。

new SuperMap.Control.ZoomBox({out:true}),//该类实现在地图上绘制矩形区域，放缩地图的操作。

new SuperMap.Control.Attribution(),// new SuperMap.Vector (),//矢量元素覆盖物图层。可以以丰富的形式展示点、线、面等地理矢量图形 ], allOverlays:true });

//动态分块图层，用来对接SuperMap iServer 8C的分块动态REST图层服务。

layer =new SuperMap.Layer.TiledDynamicRESTLayer("行政图", url,{ transparent:true, cacheEnabled:true }, { maxResolution:"auto" });

layer.events.on({"layerInitialized": addLayer });

function addLayer() { //异步加载图层

// 向Map中添加图层 +Markers（医院）

map.addLayers([layer, markerhospital,vectorLayer]);

//显示地图范围，中心点和缩放级别

map.setCenter(new SuperMap.LonLat(113.88, 22.56), 6);

}

function ZoomIn() { map.zoomIn(); }//放大function ZoomOut() { map.zoomOut();}//缩小

</script>

最终地图显示：