SuperMap iClient for JavaScript初入

时间：2022-10-17 21:18:06

SuperMap iClient for JavaScript初入

介绍SuperMap for Js的简单使用.

推荐先看下这篇文档:SuperMap iClient for JavaScript 新手入门 , 个人感觉是要好于官方的新手入门文档的.

使用SuperMap js 的核心流程如下:

  1. 创建地图Map
  2. 创建Layer /控件
  3. 创建要素 / Marker /..
  4. 将 要素 / Marker /.. 添加入图层 Layer
  5. 将图层添加入 Map

1.SuperMap下载

链接:SuperMap

2.SuperMap简单地图加载

在仅使用Js 文件的情况下, 只需引入 SuperMap.Include.js 即可.

2.1 SuperMap云地图

    <script type="text/javascript">

        var map;

        var layer, vectors, markers, imgMarker;

        var vectorInfoWin, markerInfoWin;

        onload = function init() {

            //初始化地图对象。

			//创建map 对象, 并且必须指定map 所在的div;

            map = new SuperMap.Map("map");

            //通过向SuperMap云服务器发送请求得到SuperMap云服务发布的图层。

			//在Map中显示, 所有的元素都必须置于图层上, 必须创建图层;同时可以有多个图层;

            layer = new SuperMap.Layer.CloudLayer();

			//创建图层后必须将图层添加至对应的map中才可以显示出来;

            map.addLayer(layer);

            //设置中心点

			//经纬度并非常规经纬度, 不是很明白是哪种;

            map.setCenter(new SuperMap.LonLat(11339634.286396, 4588716.5813769), 4);

	</script>

	<body>

	    <div id="map"

			style="position: absolute; left: 0px;

			right: 0px; width: auto; height: 90%;">

		</div>

	</body>

通过这种方式就建立了一个最简单的云地图.

2.2 构建多种服务地图

构建多种服务地图仅需要将 layer = new SuperMap.Layer.CloudLayer(); 替换即可.

	<script type="text/javascript">

		//百度地图, 同样是沿用 CloudLayer() 的经纬度;

		//layer = new SuperMap.Layer.Baidu();

		//天地图, 经纬度好像还有区别, 不是很理解

		//layer = new SuperMap.Layer.Tianditu();

		//这一种方式也是我最后选取的方式, 使用常规经纬度即可

		//初始化地图，所有图层都被当做叠加图层来使用。

        map = new SuperMap.Map("map", { allOverlays: true });

        //全球矢量底图服务。

        layerBase = new SuperMap.Layer.WMTS({

            name: "vec",//WMTS服务名称。

            url: "http://t0.tianditu.com/vec_c/wmts",//WMTS图层的服务地址，必设属性。

            layer: "vec", //图层名称。

            style: "default", //发布的图层样式，默认为”default”。

            matrixSet: "c",	//发布的标识符矩阵集，必设属性。

            format: "tiles", //图像的MIME类型，默认为 “image/png”。

            requestEncoding: "KVP" //请求编码。可以是“REST”或者“KVP”，默认为”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中

        map.addLayers([layerBase, layerMarker]);

		//在这种模式下, 可以使用常规的经纬度;

        map.setCenter(new SuperMap.LonLat(108.9398165260,34.3412614674), 12);

	</script>

我使用的经纬度查询方式一般为: 在线地图经纬度查询

2.3 地图控件的添加

在介绍以下部分前, 给出几个链接 :

SuperMap 文档 OnLine 将这个文档与下载包内的官方API SuperMap iClient for JavaScript Help.chm 结合阅读理解更快.

SuperMap 基本概念介绍

SuperMap.Control 定义Control 地图控件.

默认添加的控件 :SuperMap.Control.Navigation 控件处理伴随鼠标事件（拖拽，双击、鼠标滚轮缩放）的地图浏览.

	<script type="text/javascript">

        var map;

        onload = function init() {

            //在创建 map 的时候直接添加, 一般只针对必要控件, 以及辅助型控件;

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

            	allOverlays: true,

            	controls:[

            		new SuperMap.Control.Navigation(),//鼠标处理事件

                    new SuperMap.Control.Zoom(),//缩放类控件

                    new SuperMap.Control.LayerSwitcher(), //图层选择控件类。 用于控制地图中的图层可见性。

                    new SuperMap.Control.MousePosition() //该控件显示鼠标移动时，所在点的地理坐标

            	]

            });

		    //另一种方式:

			//GEO定位控件

			geolocate = new SuperMap.Control.Geolocate({

		        bind: false,

		        geolocationOptions: {

		            enableHighAccuracy: false,

		            maximumAge: 0

		        },

		        eventListeners: {

		            "locationupdated": getGeolocationCompleted,

		            "locationfailed": getGeolocationFailed

		        }

		    });

		    //添加单个控件

		    map.addControl(geolocate);

			//添加多个控件

			//map.addControls([control1, control2],[null]);

			//map.addControls([control1, control2]);//通过options的第二个数组通过像素对象控制控件的位置 两个数组应该匹配,如果为 null, 则在默认位置;

			//对于一部分控件需要激活才能使用,

            geolocate.activate();

			//注销控件

			//geolocate.deactivate();

			function getGeolocationCompleted(event) {

            	console.log(event.position);

            }

            function getGeolocationFailed(event) {

            	console.log("123");

            }

			//第三种添加方式:

			//定义控件图层

			var vector = new SuperMap.Layer.Vector("vector layer");

			map.addLayer(vector);

			//定义容器

			var panel = new SuperMap.Control.Panel();

			//定义两个控件

			var modifyFeature = new SuperMap.Control.ModifyFeature(vector);

			var drawFeature = new SuperMap.Control.DrawFeature(vector, SuperMap.Handler.Polygon);

			//在容器中添加多个控件

			toolbar.addControls(modifyFeature, drawFeature);

			//将容器添加入map;

			map.addControl(toolbar);

	</script>

2.4 添加地图覆盖物

地图覆盖物一般是指叠加或覆盖到地图上的内容，如标注、矢量要素(如线、多边形、圆、椭圆等)、信息窗口等。

覆盖物会固定在地图的某个位置，跟随地图的平移或缩放而移动，但其本身不会缩放。

地图上最常见、最简单的覆盖物是Marker，也就是地图上的点标注。

点标注一般有默认的图标和样式，当然我们也可以根据需要自定义图标。除了Marker，信息框和矢量要素也是常用的覆盖物。

	<script type="text/javascript">

		//marker有专用的 marker 图层;

		var markerLayer = new SuperMap.Layer.Markers("markers");

		map.addLayer(markerLayer);

		//标记图层上添加标记 并设置相应的 属性种种;

		var size = new SuperMap.Size(21,25);

		var offset = new SuperMap.Pixel(-(size.w/2), -size.h);

		var icon = new SuperMap.Icon('../img/marker.png',size,offset);

		markers.addMarker(new SuperMap.Marker(new SuperMap.LonLat(0,0),icon));

		//添加矢量要素

		//创建矢量要素, 创建 Geometry对象

		var vectorLayer = new SuperMap.Layer.Vector("vectorLayer");

		//点对象

		var point= new SuperMap.Geometry.Point(0,0);

		var pointVector = new SuperMap.Feature.Vector(point);

		pointVector.style={

		    fillColor:"red",

		    strokeColor:"yellow",

		    pointRadius:6

		};

		//添加多个点

		//var multiPoint = new SuperMap.Geometry.MultiPoint([point1,point2]);

		//线对象

		var points2=[

		    new SuperMap.Geometry.Point(0,29.4),

		    new SuperMap.Geometry.Point(-50,39.4),

		    new SuperMap.Geometry.Point(-30,19.4),

		    new SuperMap.Geometry.Point(100,49.4)

		];

		//对待封闭图形, 需要创建 LinearRing 放入 构造器中;

		var line1 = new SuperMap.Geometry.LineString(points2);

		var lineVector = new SuperMap.Feature.Vector(line1);

		lineVector.style={

		    strokeColor:"#7B68EE",

		    strokeWidth:2

		} ;

		//六边形

		var points2=[

		    new SuperMap.Geometry.Point(-120,54.142),

		    new SuperMap.Geometry.Point(-110,40),

		    new SuperMap.Geometry.Point(-120,25.857),

		    new SuperMap.Geometry.Point(-140,25.857),

		    new SuperMap.Geometry.Point(-150,40),

		    new SuperMap.Geometry.Point(-140,54.142)

		],

        linearRings = new SuperMap.Geometry.LinearRing(points2),

        region = new SuperMap.Geometry.Polygon([linearRings]);

		var polygonVector = new SuperMap.Feature.Vector(region);

		// 矩形

		var x = -70;

		var y = -30;

		var w = 40;

		var h = 30;

		var rectangle = new SuperMap.Geometry.Rectangle(x, y, w, h);

		var rectangleVector = new SuperMap.Feature.Vector(rectangle);

	</script>

2.5 地图区域选择

    <script type="text/javascript">

		//创建时, 需要注意对象的创建次序, 否则容易出现层级覆盖的情况,导致无法添加

        var map, layerBase, layerMarker;

		function init() {

			var vectorLayer = new SuperMap.Layer.Vector("标绘图层");

			vectorLayer.events.on({"afterfeaturemodified": editFeatureCompleted});

			var snap01 = new SuperMap.Snap([vectorLayer], 10, 10, {

				actived: true

			});

			var drawPolygon = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Polygon);

			//如果不添加对应事件, 在激活控件的时候会报错;

			drawPolygon.events.on({

				"featureadded": drawCompleted

			});

			var modifyFeature = new SuperMap.Control.ModifyFeature(vectorLayer);

			modifyFeature.snap = snap01;

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

				allOverlays: true,

				controls: [

					new SuperMap.Control.Navigation(),

					new SuperMap.Control.Zoom(),

					new SuperMap.Control.LayerSwitcher(),

					new SuperMap.Control.MousePosition()

				]

			});

			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.addControl(drawPolygon);

			map.addControl(modifyFeature);

			map.addLayers([layerBase, layerMarker,vectorLayer]);

			drawPolygon.activate();

			modifyFeature.activate();

			map.setCenter(new SuperMap.LonLat(108.9398165260, 34.3412614674), 12);

			function drawCompleted(eventArgs) {

				//TODO

			}

			function editFeatureCompleted(event) {

				//TODO

			}

		}

    </script>

2.6 注意事项:

    图层之间的层级覆盖关系需要多注意, 效果显示不出来的原因可能是层级覆盖;所以最好打开 LayerSwitcher 控制器.

相关文章