SuperMap iClient JavaScript10iクライアント開発の開始
1.ダウンロード
2.マップライブラリの選び方
-
MapboxGLの場合
-
リーフレット用（推奨）
デフォルトでは、EPSG：4326、EPSG：3857がサポートされており、平面には投影された座標系がないため、自分で定義する必要はありません。地面をマッピングするときに、マップパラメータで対応する座標系を設定するだけで済みます。デフォルトでサポートされていない座標系の場合、iClient forLeafletとiClientfor OpenLayersの両方で、最初にproj4を使用して座標系を定義してから、定義した座標をマップの座標系パラメーターに渡す必要があります。
-
OpenLayersの場合：
座標系の処理はリーフレットと同じです。
-
iClientクラシック：
認識可能なサービス座標系、追加の投影を設定する必要はありません
総括する：
-
オープンソースソフトウェア製品のコミュニティ活動は、製品の成熟度、活力、将来の見通し、およびR＆D-アプリケーション-サービスのエコロジカルチェーンを確立できるかどうかを決定します。
-
前の2つのマップライブラリと比較すると、MapboxGLは後でリリースされ、平均的なコミュニティアクティビティと貧弱なスケーラビリティを備えていますが、3D機能と優れた視覚化効果をサポートし、優れたパフォーマンスでMVTベクトルタイルをネイティブにサポートします。
-
Leafletマップライブラリコミュニティは、非常にアクティブで、軽量で、プラグインが豊富で、優れた安定性とスケーラビリティを備えています。
-
OpenLayers 3/4/5/6には平均的なコミュニティアクティビティがあり、マップライブラリは重量がありますが、パフォーマンスとスケーラビリティが向上し、HTML5機能をサポートします。
三、座標系
座標系に対応する定義情報を表示する
例としてCGCS2000_3_Degree_GK_CM_117E座標系を取り上げますが、その使用方法は？
Webサイトの座標系を介して、対応する座標系定義情報を照会します。
ウェブサイトのフルネームは「CGCS2000 / 3度ガウス・クリューガーCM 117E」、proj4の定義情報はproj4.defs（ "EPSG：4548"、 "+ proj = tmerc + lat_0 = 0 + lon_0 = 117 + k = 1 + x_0 = 500000 + y_0 = 0 + ellps = GRS80 + units = m + no_defs "）;
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
proj4.defs("EPSG:4548","+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
</script>
完全な例：
新しいtest.htmlを作成し、supermap_iclient_1010 \ examples \ leafletディレクトリに配置します（または、公式のオンラインサンプルで直接デバッグを実行します）。
<!--********************************************************************
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_tiledMapLayer4326"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
// 定义CGCS2000_3_Degree_GK_CM_117E坐标系
proj4.defs("EPSG:4548","+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
// 全幅范围 bounds: L.bounds(左下, 右上),地图的描述信息可以查询到。
var crs =L.Proj.CRS("EPSG:4548",{
bounds: L.bounds([521400.76 , 3502757.4], [540388.98 , 3526936.11]),
origin:[521400.76,3526936.11],
});
var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var map, url = host + "/iserver/services/map-co-governance/rest/maps/test";
// 中心点 center:[维度, 精度] ,地图的描述信息可以查询到，但需要转为4326经纬度坐标系。（如果地图是自己制作的，也可通过SuperMap iDesktop 选中地图查看中心点经纬度）
map = L.map('map', {
crs: crs,
// center: { lng: 117.34, lat: 31.76},
center:[31.76, 117.34],
maxZoom: 18,
zoom: 2,
zoomControl: false,
attributionControl: false
});
L.supermap.tiledMapLayer(url).addTo(map);
</script>
</body>
</html>
参照：