SuperMap iClient for JavaScript getting started

Geographic Information System ( English :Geographic Information System, abbreviation :GIS) It's a comprehensive subject , Combine Geography with cartography , It has been widely used in different fields , Is for input 、 Storage 、 Inquire about 、 A computer system for analyzing and displaying geographic data . Please refer to Wikipedia .
although GIS This subject is very complicated , But from the development level , It is generally divided into bottom development and secondary development .GIS Components are growing rapidly , Encapsulate the underlying algorithm . Secondary developers only need to master the related components API function , Basically able to meet business needs .

common GIS Component platform :

  1. ArcGIS - Esri China -Esri China ,GIS,GIS platform , Geographic Information System
  2. SuperMap -  Chaotu Software Co., Ltd
  3. Sky map -  National Geographic information public service platform “ Sky map ”

The point today is to experience SuperMap Under the platform WEB Use of map development kit .

1. The development of preparation

SuperMap iClient 8C for JavaScript It's a set of JavaScript language-written GIS Client application development kit , Support multi-source data map , Support multiple terminals , Cross browser , Through this product, you can quickly realize the beauty on the browser 、 Smooth map presentation .

  • obtain Development kit .libs  The folder holds the library file of the product . The following figure shows the functions supported by the four sub libraries :

SuperMap.js  For the master library file , Support all functions .SuperMap.Includ.js  It's a reference file , It is used to uniformly refer to the above JS And others CSS Resource file .

2. Quick start

“ Layers ” It's a very important concept in map development . Believe to learn PhotoShop My friend is right “ Layers ” This concept is no stranger . The layer is like a piece of transparent glass , Draw a flower on a piece of glass , Draw a mat of grass on another piece of glass , Overlap two pieces of glass , From top to bottom , So as to form an image display effect .

The rich elements on the map are also made up of layers . Maps can add one or more layers , By marking or drawing on a layer , The combination shows the final effect that the user needs .

SuperMap iClient for JavaScript The supported layers are as follows :

  • TiledDynamicRestLayer: Dynamic block layer , For docking SuperMap iServer Block dynamics of REST Layer services .
  • CloudLayer: Cloud layer , Used to display SuperMap Layers published by cloud services .
  • SimpleCachedLayer: Cache layers , Used to display SuperMap iServer Cache layer for .
  • WMS: This layer is used to show OGC Map data of map service .
  • WMTS: It's used to display information based on OGC WMTS 1.0.0 Map data of standard map service .
  • Vector: Vector features render layers .
  • Markers: Label layers .
  • OpenLayers: Other third party layers provided .

2.1. structure SuperMap iServer Service map

SuperMap iServer It's based on cross platform GIS The cloud of the kernel GIS application server , The creation of this kind of map depends on its products iServer service , The local structures, SuperMap iServer Service before testing . The main content of this example is establish REST Dynamic block layer and Learn how to use map control .

Step1: Create a map display container .

<body onload="init()">
<!-- The map shows div-->
<div id="map" style="position: absolute; left: 0px; right: 0px; width: auto; height: 90%;">

Step2: Import resource file , Realize the function of creating map , load REST Dynamic block layer .

<title> Longitude and latitude coordinate system layer </title>
<!-- Reference the required script Be careful :SuperMap.Include.js Internal references have been dynamically related to JS,CSS file -->
<script src="supermap/libs/SuperMap.Include.js"></script>
// Declare global variables map、layer、url
var map, layer, url = "http://localhost:8090/iserver/services/map-shandong-zibo/rest/maps/zibo";
function init() {
//1. In the specified DOM Initialize map object on element .
map = new SuperMap.Map("map");
//2. add controls .
map.addControl(new SuperMap.Control.ScaleLine());
map.addControl(new SuperMap.Control.LayerSwitcher());
map.addControl(new SuperMap.Control.MousePosition());
//2. Initialize layers .
// Create block dynamic REST Layers , This layer shows iserver 8C Maps published by the service ,
// among " to want to " Name the layer ,url The service address of the layer ,{transparent: true} Set to url Is an optional parameter
layer = new SuperMap.Layer.TiledDynamicRESTLayer("zibo", url, null, { maxResolution: "auto" });
// Listen to the layer information loading completion event , Loading layers asynchronously .{ "layerInitialized": addLayer });
function addLayer() {
// take Layer The layers are loaded into Map On the object .
// Draw a picture , Set the center point , Specify the zoom level .
map.setCenter(new SuperMap.LonLat(118.11908, 36.68166), 3);

Step3: Use the map control .

Control is used to control the display of the map and the response to interactive operations , In the absence of an explicit designation , The map is added by default Navigation、PanZoomBar Control . Common controls are as follows :

Visible controls :

  • PanZoomBar: Map pan zoom control , Provides control operations for the pan and zoom of the map .
  • ScaleLine: Scale control , Show the scale of the map .
  • LayerSwitcher: Map layer switch control , You can view layer information and control layer display .
  • OverviewMap: Map Hawkeye control , Assist to view the map and display it in a wider range .
  • MousePosition: This control shows when the mouse moves , The geographic coordinates of the point .

Invisible controls :

  • Navigation: Map browsing control , Monitor mouse clicks 、 translation 、 Scroll wheel and other events to browse the map .
  • SelectFeature: Feature selection control , Monitor mouse over , Click on the event to select vector The elements above the layer .
  • DrawFeatue: Feature drawing controls , Monitor mouse events to achieve the drawing of elements .

There are two ways to add controls , One is to create Map When the object , Set up controls Property to add a control . as follows :

var map = new SuperMap.Map('map', {controls: [new SuperMap.Control.PanZoomBar()]});

The other is what the above code uses . At the completion of Map After object creation , call addControl() or addControls() To add controls . as follows :

var map = new SuperMap.Map('map');
map.addControl(new SuperMap.Control.ScaleLine(), new SuperMap.Pixel(800,400));

Step4: See how it works

2.2. structure SuperMap Cloud map

The explanation of this example is , combination  SuperMap Layers published by cloud services CloudLayer The creation of , And finish to Zoom in on the map 、 narrow , Hiding layers 、 Remove, etc Demonstration of basic functions , And finish The addition of vector cover and marker cover 、 Event registration And so on .

Step1: Also create a map container . Just add a few more buttons .

<body onload="init()">
<div id="toolbar" style="padding: 10px">
Map basic operation :
<input type="button" class="btn" value=" Zoom in " onclick="mapEnlarge()" />
<input type="button" class="btn" value=" narrow " onclick=" mapReduce()" />
<input type="button" class="btn" value=" translation " onclick="mapPan()" />&nbsp;
Layer basic operations :
<input type="button" class="btn" value=" hide " onclick="layerShowOrHide()" id="isShow" />
<input type="button" class="btn" value=" remove " onclick="layerRemove()" />&nbsp;
Add cover :
<input type="button" class="btn" value=" Vector element covers " onclick="addVector()" />
<input type="button" class="btn" value=" Mark the cover " onclick="addMarker()" />
<div id="map" style="position: absolute; left: 0px; right: 0px; width: auto; height: 90%;"></div>

Step2: Building map objects , load SuperMap Cloud map . And demonstrate the map 、 Some basic operations of layers , And the addition of mulch 、 Event registration and other functions . A little bit more code , Please taste it carefully .

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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() {
// Initialize map objects .
map = new SuperMap.Map("map", {
controls: [
new SuperMap.Control.Navigation(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.LayerSwitcher(),
new SuperMap.Control.MousePosition()
// All map layers are used as overlay layers .
allOverlays: false
// Through to the SuperMap The cloud server sends the request to get SuperMap Layers published by cloud services .
layer = new SuperMap.Layer.CloudLayer();
// structure Marker cover Layers .
markers = new SuperMap.Layer.Markers("Markers");
// structure Vector cover Layers .
vectors = new SuperMap.Layer.Vector("Vectors");
// Create a vector control to select features , Click on the specified layer to select the vector feature .
var selectFeature = new SuperMap.Control.SelectFeature(vectors,
onSelect: onFeatureSelected
// Activate control .
// take Base map and Two types of overlay layers Add to map .
map.addLayers([layer, vectors, markers]);
// Set the center point , Specify the zoom level .
map.setCenter(new SuperMap.LonLat(11339634.286396, 4588716.5813769), 4);
} //a.1. Button to generate a vector feature overlay , And add it to the vector layer .
function addVector() {
// Building point geometry object classes
var point = new SuperMap.Geometry.Point(13648644.286396, 5518190.5813769);
// Build vector feature cover
var pointVector = new SuperMap.Feature.Vector(point);
// Modify the point style red = { fillColor: "red", strokeColor: "yellow", pointRadius: 6 };
// add to Vector elements cover To The vector layer
//a.2. Click on the vector feature cover , Trigger to call this function .
function onFeatureSelected(feature) {
// Create a floating pop-up with a pointing and border
var popup = new SuperMap.Popup.FramedCloud(
new SuperMap.LonLat(13648644.286396, 5518190.5813769),
" Vector feature overlay mouse click event ",
vectorInfoWin = popup;
// Add pop ups to the map
//a.3. The destruction Popup.FramedCloud Popup .
function closeVectorInfoWin() {
if (vectorInfoWin) {
} //b.1. The button generates a marker overlay , register click event , And add it to the marker layer .
function addMarker() {
//SuperMap.Size An example of a pair of height width values
var size = new SuperMap.Size(30, 30);
// basis size Create screen coordinates
//SuperMap.Pixel This kind of use x, y Coordinates depict screen coordinates
var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
//SuperMap.Icon Create icons , In the web page, it is shown as div In the tag image label
var icon = new SuperMap.Icon('supermap/theme/images/marker-gold.png', size, offset);
// Initialize the tag cover based on location and size
imgMarker = new SuperMap.Marker(new SuperMap.LonLat(10454187.286396, 4740367.5813769), icon);
// add to Mark the cover To Mark layers
// register click event , Trigger mouseClickHandler() Method{
"click": mouseClickHandler
//b.2. Click mark cover , Trigger click Event will call this function .
function mouseClickHandler(event) {
// Build fixed position floating pop ups , Adaptive display
var popup = new SuperMap.Popup.Anchored(
"marker", // Unique identification
imgMarker.getLonLat(), // Mark the coordinates of the covering
new SuperMap.Size(220, 140),
' Mark cover mouse click events ',
popup.autoSize = true;
markerInfoWin = popup;
//b.3. The destruction Popup.Anchored Popup .
function closeMarkerInfoWin() {
if (markerInfoWin) {
} //c.1. Zoom in on the map , Zoom in one level on top of the current zoom level .
function mapEnlarge() {
//c.2. The map zooms out , Zoom out one level from the current zoom level .
function mapReduce() {
//c.3. Map translation , According to the specified screen pixels (-20,-8) Value translation map .
function mapPan() {
map.pan(-20, -8);
} //d.1. Set layer visibility .
function layerShowOrHide() {
var temp = document.getElementById("isShow").value;
if (temp == ' hide ') {
document.getElementById("isShow").value = ' Show ';
} else {
document.getElementById("isShow").value = ' hide ';
//d.2. remove layer , Irrecoverable .
function layerRemove() {

Step3: Effect demonstration

2.3. structure Sky map WMTS Service map

What is? WMTS service ?
WMTS, Slice map Web service (Web Map Tile Service) The current version is 1.0.0. The service is in line with OGC(Open Geospatial Consortium, Open Geographic Information Alliance ) To formulate the WMTS Implement specifications .
WMTS yes OGC The proposed cache technology standard , That is to say, the map that is cut into tiles of a certain size is cached on the server side , Only these pre-defined single tile services are provided to clients , More data processing operations, such as layer overlay, etc > On the client side , So as to alleviate GIS The pressure of server-side data processing , Improve user experience .

SuperMap iClient for JavaScript Support access to third parties WMTS Map service . This example is for The map of heaven WMTS Service call demonstration .

Service resources provided by Tiantu official website :

Step1: This time, post the demo code first , Analysis again .

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Sky map WMTS Service layer </title>
<style type="text/css">
<script src="supermap/libs/SuperMap.Include.js"></script>
<script type="text/javascript">
var map, layerBase, layerMarker;
function init() {
// Initialize map , All layers are used as overlay layers .
map = new SuperMap.Map("map", { allOverlays: true });
// Global vector base map service .
layerBase = new SuperMap.Layer.WMTS({
name: "vec",
url: "",
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
requestEncoding: "KVP"
// Global vector Chinese annotation service .
layerMarker = new SuperMap.Layer.WMTS({
name: "cva",
url: "",
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
requestEncoding: "KVP"
// Add layers , Set the center point , Specify the zoom level .
map.addLayers([layerBase, layerMarker]);
map.setCenter(new SuperMap.LonLat(0, 0), 3);
<body onload="init()">
<div id="map" style="left: 0px; right: 0px; width: auto; height: 90%;">

Step2: Running effect

Step3: The above are the two WMTS The effect of overlay of service layers . Function realization mainly depends on  SuperMap.Layer.WMTS Class to complete . Here are some of its basic properties :

layerMarker = new SuperMap.Layer.WMTS({
name: "cva", //WMTS The service name .
url: "", //WMTS The service address of the layer , Required properties .
layer: "cva", // Layer Name .
style: "default", // Published layer styles , The default is ”default”.
matrixSet: "c", // Published identifier matrix set , Required properties .
format: "tiles", // Graphic MIME type , The default is “image/png”.
requestEncoding: "KVP" // Request encoding . It can be “REST” perhaps “KVP”, The default is ”KVP”.

There's another problem , How to get these WMTS Service parameter values ? This is going to go back and continue to understand WMTS service . I don't want to explain this in detail , Just the operation method .
such as , Get the global vector base map service information of Tiantu , As long as the browser requests :
The response is a XML file , Save to local . stay XML Search in documents Contents node , The information about the service layer is inside .

Request parameters GetCapabilities Operation makes WMTS The client obtains the service metadata document from the server , Please refer to  WMTS API.

3. Summary of this article

This article summarizes my understanding of SuperMap iClient for JavaScript The process of understanding . The content mainly includes the construction of several types of maps , And with some basic map operations , The first three sections are marked in bold , I won't repeat . This article has been synchronized to   Personal site .

SuperMap More articles about

  1. SuperMap iClient for JavaScript getting started

    Geographic Information System ( English :Geographic Information System, abbreviation :GIS) It's a comprehensive subject , Combine Geography with cartography , It has been widely used in different fields , Is for input . Storage . Inquire about . Analyze and display geographic numbers ...

  2. Supermap iCloudManager - Load balancing

    Supermap icm Load balancing understanding : Application scenarios : Map out Child node 1 And child nodes 2 Keep the services in line , In general, anonymous users are set through nginx Access service information , So there's no need to log in . 1. adopt nginx Distribute the requests ,( round ...

  3. supermap Layout settings map grid and layout grid

    Map grid settings LayoutElements elements = m_mapLayoutControl.MapLayout.Elements; // structure GeoMap GeoMap geoMap = n ...

  4. ( nineteen )WebGIS in I The principle and design of query ( contain AGS、GeoServer、Supermap)

    The copyright of the article is jointly owned by Li Xiaohui and blog park , If reprint, please indicate the source clearly : 1. background We are using arcmap when , It's often used and is called I Query tools . Specifically ...

  5. SuperMap iServer Extended services and extended service provider paradigm

    One . Extended service instance 1. take iserver-extend1 Under the become involved jar package 2. Copied to the D:\SuperMap-iServer\webapps\iserver\WEB-INF\lib ...

  6. supermap iclient for js Tag thematic map ( Server side )

    <!DOCTYPE><html> <head> <meta http-equiv="Content-Type" content=" ...

  7. SuperMap iClient 7C—— Network client GIS Development platform New product features

    SuperMap iClient 7C It is a visual interactive development platform for spatial information and services , yes SuperMap Unified client of server series products . The product is based on a unified architecture , oriented Web There are many types of SDK Development kit , help ...

  8. flex Get it in code supermap Of token

    Recently, we need to use code to get supermap After service startup security access restriction token value , After some trial and error , Finally, we succeeded in obtaining , In the record , For reading //get token public function getTo ...

  9. ArcGIS And SuperMap Comparison of the use of (1)

    It took more than 6 Year's hypergraph product , So I am familiar with many properties of hypergraph , Last year, I began to contact ARCGIS, And used it to develop some new products , So for two GIS There's something about the platform , Record the following : Compare versions :ARCGIS10.1 And SuperMap ...

Random recommendation

  1. html5 The extra words are hidden and displayed automatically ...

  2. hdwiki Learning notes 01

    One .href =“” How to write the parameters in <!--{if $hotname[url]}-->{$hotname[url]} <!--{else}-->index.php?doc-inn ...

  3. ( turn )java performance tuning

    In this paper, from : One . Skills of using classes and objects 1. Use less as far as possible new Generate new objects use new When creating an instance of a class , Structural rain ...

  4. 7 Chapter 7 connection and APPLY Operator ( Reprint )

    7 Chapter 7 connection and APPLY Operator Link to the original text This article is published by Dou John blog backup experts with one click

  5. ExecutorService Of submit(Runnable x) and execute(Runnable x) The essential difference between the two methods

    Runnable Task has no return value , and Callable The task has a return value . also Callable Of call() Method can only pass through ExecutorService Of submit(Callable <T> tas ...

  6. BlockingQueue Blocking queues ( Solve the problem of data security in multithreading Can be used to grab tickets , seckill )

    Case study : In a thread class private static BlockingQueue<Map<String, String>> dataQueue = new LinkedBlocki ...

  7. Galera Cluster mysql+keepalived Cluster deployment

    1. uninstall mysql Find the installed mysqlrpm -qa | grep -i mysql --nodeps --force rpm -ev MySQL-server-5.6.15-1.el6.x86 ...

  8. The notebook (ThinkPad) How to turn off the touchpad

    With the popularity of laptops , People are more and more used to going out and using notebooks , The convenience and efficiency of notebook also greatly improve people's work efficiency . But if you use a laptop at home , There are also inconveniences . Like typing on the keyboard , It's easy to spray on the touchpad , So that the cursor ...

  9. Algorithm notes _233: Second order cube rotation (Java)

    Catalog 1 Problem description 2 Solution   1 Problem description The Rubik's cube can do something about it 6 Two surfaces rotate freely . Let's operate a 2 Magic cube ( Pictured 1 Shown ): For the sake of description , We built a coordinate system for it . The initial state of each face is as follows :x Positive axis : green x Axis ...

  10. 【Android】1.2 establish Android Simulator

    classification :C#.Android.VS2015:  Date of creation :2016-01-20 Debugging mobile applications is usually implemented by emulator first , It's just that it's too much trouble to debug every time it's released to the mobile phone . When the application is debugged on the simulator , And then to the phone ...