@map-library/supermap NPM

��# SuperMap �M�hV

SuperMap �M�hV/f�W�N Leaflet �T SuperMap iClient �v0W�V�~�N��[:N�~N0W�V�^�c�O�N|Q�[ SuperMap �v�R��[�s0��M�hV\ň�N YBg�v�^B\�c�S��c�O�{USf(u�v API�/ech��{t0�VB\�c6R�T�pZ�TI{ؚ�~�R��0

�R��yr'`

�W�N Leaflet �T SuperMap iClient _�S
/ecY�VB\�{t
/ec�ph��0�~0b�I{0W�VCQ }
/ec�pZ�T�R��
/ech��d>e�R��
/ec�~6R�QUO�Vb_�R��
�c�O�~N�v�N�NYt:g6R
Ɩb Leaflet.markercluster �[�sؚHeZ�T
/ec�~�V�]wQ��S�ǏM�n�_�/T(u

�[ň

npm install @map-library/supermap @map-library/core

�W,g(u�l

R�YS0W�V

import { MapFactory } from '@map-library/core';
import '@map-library/supermap'; // �_{�>f_�[eQ�N��S�l�Q
import '@map-library/supermap/style'; // cknx�[eQCSS_

// R�^0W�V�[�O
const map = MapFactory.createMap('supermap',{
  container: 'map-container', // 0W�V�[hVIDbDOMCQ }
  config: {
    serviceUrl: 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World', // SuperMap
g�R0W@W
    longitude: 108, // R�Y-N�_�p�~�^
    latitude: 34,   // R�Y-N�_�p�~�^
    zoom: 5,        // R�Y)>e�~+R
    maxZoom: 18     // g'Y)>e�~+R
  }
});

// R�YS0W�V
await map.initialize();

�m�Rh��

// �m�RWb_h��
const circleMarker = map.addMarker({
  position: [116.4, 39.9], // [lng, lat]<h_
  type: 'circle',
  style: {
    color: 'red',
    radius: 8,
    fillColor: 'red',
    fillOpacity: 0.6
  },
  title: 'S�N',
  popupContent: '<div>S�N^</div>'
});

// �m�R�Vhh��
const iconMarker = map.addMarker({
  position: [121.4, 31.2],
  type: 'icon',
  style: {
    iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41]
  },
  title: '
Nwm',
  popupContent: '<div>
Nwm^</div>'
});

// �m�R؞��h��
const defaultMarker = map.addMarker({
  position: [114.3, 30.6],
  type: 'default',
  title: 'fkIl',
  popupContent: '<div>fkIl^</div>'
});

R�^�Vh

// R�^nf��Vh
const customIcon = map.createIcon({
  iconUrl: 'path/to/icon.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32]
});

// R�^HTML�Vh(DIV�Vh)
const htmlIcon = map.createHtmlIcon({
  html: '<div class="my-custom-pin">=���</div>',
  className: 'custom-icon',
  iconSize: [30, 30],
  iconAnchor: [15, 30]
});

// O(uR�^�v�Vh
map.addMarker({
  position: [116.4, 39.9],
  type: 'icon',
  title: 'ꁚ[IN�Vhh��',
  style: {
    icon: customIcon
  }
});

�VB\�{t

// R�^�e�VB\
const customLayer = map.createLayer('customLayer');

// �m�Rh��0Rc�[�VB\
map.addMarker({
  position: [113.3, 23.1],
  type: 'default',
  title: '^�]',
  layerId: 'customLayer' // c�[�VB\
});

// >f:y/��υ�VB\
map.hideLayer('customLayer');
map.showLayer('customLayer');

// nzz�VB\
map.clearLayer('customLayer');

// �yd��VB\
map.removeLayer('customLayer');

0W�V�c6R

// ��n0W�V-N�_�p
map.setCenter([108, 34]);

// ��n)>e�~+R
map.setZoom(6);

// �m�R)>e�c�N
map.addControl({
  type: 'zoom',
  position: 'topright'
});

// ��k0W�V
map.destroy();

�pZ�T�R��

SuperMap �M�hV�c�O:_'Y�v�pZ�T�R��S�N gHeYt'Yϑh��vU\:y�0

R�^�pZ�T

// R�YS�pZ�T
const markerCluster = map.initMarkerCluster({
  id: 'cities',                 // Z�TID��S	�
  distance: 80,                 // Z�Tݍ�y�؞��80�P }
  maxZoom: 16,                  // g'YZ�T)>e�~+R
  spiderfyOnMaxZoom: true,      // (Wg'Y)>e�~+R�eU\_
  showCoverageOnHover: true,    // �`\P�e>f:yZ�T��V
  zoomToBoundsOnClick: true,    // �p�QZ�T�e)>e0R��Lu
  animate: true,                // _/TZ�T�R;uHe�g
  // �S	��R�Ypenc
  data: [
    {
      position: [116.4, 39.9],
      title: 'S�N',
      popupContent: '<div>S�N^</div>'
    },
    {
      position: [121.4, 31.2],
      title: '
Nwm',
      popupContent: '<div>
Nwm^</div>'
    }
  ],
  // �S	��ꁚ[IN؞���Vh
  defaultIcon: {
    iconUrl: 'path/to/custom-icon.png',
    iconSize: [32, 32],
    iconAnchor: [16, 32]
  }
});

�m�RZ�T�ppenc

// �m�RUS*N�p
markerCluster.addMarker({
  position: [120.2, 30.3],
  title: 'mg�]',
  popupContent: '<div>mg�]^</div>',
  // ꁚ[IN�Vh
  type: 'icon',
  icon: {
    iconUrl: 'path/to/hangzhou-icon.png',
    iconSize: [24, 24]
  },
  // �p�Q�N�NYt
  onClick: (e, pointData) => {
    console.log('�p�Q�Nmg�]', pointData);
  }
});

// ybϑ�m�R�p
markerCluster.addData([
  {
    position: [113.3, 23.1],
    title: '^�]',
    popupContent: '<div>^�]^</div>'
  },
  {
    position: [114.1, 22.5],
    title: '�m3W',
    popupContent: '<div>�m3W^</div>'
  }
]);

// �fbc@b	g�ppenc
markerCluster.setData(newCitiesData);

Z�T�VB\�{t

// ���S�pZ�T�[�O
const cluster = map.getMarkerCluster('cities');

// ���Syr�[ag�N�v�p
const southernCities = cluster.getMarkers(point => {
  return point.position[1] < 30; // ���S@b	g�~�^\�N30�v�W^
});

// nzzZ�T�VB\
cluster.clear();

// �c6RZ�T�VB\�S��'`
cluster.setVisible(false);
cluster.setVisible(true);

// ��kZ�T�VB\
cluster.destroy();

h��d>e�R��

SuperMap�M�hV�c�Oh��d>e�R��/ech��R;u0�c6R�d>e��^0�f\P/�~�~�d>eI{�d\O0

R�YSh��d>e

// �QYh���penc - <h_:N�~�~�^pe�~ [[lng1, lat1], [lng2, lat2], ...]
const trackData = [
  [116.391, 39.916], // S�N
  [117.200, 39.084], // )Y%m
  [118.146, 39.628], // Uq\
  [119.586, 39.942], // �y�v�\
  [121.471, 31.233]  // 
Nwm
];

// R�YSh����d>ehV
const track = map.initTrack({
  data: trackData,             // h����pMOpenc��_kX
  interval: 2,                 // $N�p���R;u�e�������؞��1�y
  multiple: 1,                 // �d>e��^
Ppe�؞��1
P
  // �S	�: ꁚ[INh����ph��	�y�
  markerOptions: {
    title: 'h����p',
    // O(u�M�hV�c�O�vcreateIcon�e�lR�^�Vh
    icon: map.createIcon({
      iconUrl: 'path/to/vehicle-icon.png',
      iconSize: [32, 32],
      iconAnchor: [16, 16]
    })
  },
  // �S	�: ꁚ[INh����~7h_
  pathOptions: {
    color: '#FF5722',
    weight: 5,
    opacity: 0.7,
    dashArray: '10, 10',       // Z��~7h_
    lineCap: 'round'
  }
});

h��d>e�c6R

// _�Y�d>eh���
track.play({
  startIndex: 0,   // �Nc�["}_Y_�Y�d>e��S	�
  autoFocus: true  // /f&TꁨRZ�&q0Rh����p�؞��true
});

// �f\P�d>e
track.pause();

// �~�~�d>e
track.resume();

// \Pbk�d>e
track.stop({
  resetPosition: true  // /f&T͑n0Rw��p�؞��true
});

// �l�0Rc�[MOn
track.moveTo(2, {      // �l�0R,{3*N�p
  autoFocus: true      // /f&TꁨRZ�&q�؞��true
});

// �te�d>e��^
track.setSpeed(2);     // 2
P��d>e

h��N�N�v,T

// �v,Th����y�R�N�N
track.onMove(event => {
  console.log('S_MRMOn"}_:', event.index);
  console.log('S_MRPWh:', event.position);
  console.log('�d>eۏ�^(0-1):', event.progress);
  console.log('/f&T�]�[b:', event.isCompleted);
  
  // �f�eUIۏ�^ag:y�O
  document.getElementById('progress-bar').style.width = `${event.progress * 100}%`;
  
  // �f�eS_MRMOn�Oo`
  document.getElementById('position-info').textContent = 
    `�~�^: ${event.position[0].toFixed(4)}, �~�^: ${event.position[1].toFixed(4)}`;
});

// �yd�yr�[�v,ThV
track.offMove(specificCallback);

// �yd�@b	g�y�R�v,ThV
track.offMove();

��Sh��r`N��k

// ���SS_MR�r`
const state = track.getState();
console.log('S_MR"}_:', state.index);
console.log('/f&T�d>e-N:', state.playing);
console.log('/f&T�f\P:', state.paused);
console.log('/f&T�]�[b:', state.completed);
console.log('�d>eۏ�^:', state.progress);

// ��kh����[�O
track.destroy();

�~6R�Vb_�R��

SuperMap�M�hV�c�O�N0N�[�v�~6R�R��/ec�p0�~0Y��b0�wb�TWbI{�QUO�Vb�v�~6R�T��0

�~6R�QUO�Vb_

O(u MouseTool�e�l�S�N�o;m�~6R!j_�v^(W�~6R�[bT��S�~6R�v�Vb_penc0

// �~6R�p
map.MouseTool({
  type: 'point', // �~6R{|�W: point
  callback: (e) => {
    console.log('�~6R�p�[b', e.coordinates); // ���Q: [�~�^, �~�^]
    console.log('�Vb_�[a�:', e.feature);      // Leaflet Layer�[a�
  }
});

// �~6R�~
map.MouseTool({
  type: 'polyline', // �~6R{|�W: polyline
  callback: (e) => {
    console.log('�~6R�~�[b', e.coordinates); // ���Q: [[�~�^1, �~�^1], [�~�^2, �~�^2], ...]
    console.log('�Vb_�[a�:', e.feature);      // Leaflet Layer�[a�
  }
});

// �~6RY��b_
map.MouseTool({
  type: 'polygon', // �~6R{|�W: polygon
  callback: (e) => {
    console.log('�~6RY��b_�[b', e.coordinates); // ���Q: [[�~�^1, �~�^1], [�~�^2, �~�^2], ...]
    console.log('�Vb_�[a�:', e.feature);          // Leaflet Layer�[a�
  }
});

// �~6R�wb_
map.MouseTool({
  type: 'rectangle', // �~6R{|�W: rectangle
  callback: (e) => {
    console.log('�~6R�wb_�[b', e.coordinates); // ���Q�wb_�v�V*N҉PWh
    console.log('�Vb_�[a�:', e.feature);        // Leaflet Layer�[a�
  }
});

// �~6RWb_
map.MouseTool({
  type: 'circle', // �~6R{|�W: circle
  callback: (e) => {
    console.log('�~6RWb_�[b');
    console.log('W�_PWh:', e.center);     // ���Q: [�~�^, �~�^]
    console.log('JS�_(s|):', e.radius);     // Wb_JS�_�USMOs|
    console.log('�Vb_�[a�:', e.feature);    // Leaflet Layer�[a�
  }
});

ꁚ[IN�~6R7h_

�S�N�Ǐoptions�Speꁚ[IN�~6RǏz-N�T�~6R�[bT�v7h_�

map.MouseTool({
  type: 'polygon',
  options: {
    shapeOptions: {
      color: '#3388ff',       // ��Fh��r�
      weight: 3,              // ��Fh�[�^
      opacity: 0.8,           // ��Fh�f�^
      fillColor: '#3388ff',   // kXEQ��r�
      fillOpacity: 0.2,       // kXEQ�f�^
      dashArray: '5, 5'       // Z��~7h_
    }
  },
  callback: (e) => {
    console.log('�~6R�[b', e.coordinates);
  }
});

�Vb_��R��

O(u MouseToolEditor�e�l�S�N��]�~6R�v�QUO�Vb_�

// ��US*N�Vb_
map.MouseToolEditor({
  feature: drawnPolygon, // �����v�Vb_�[a�(Leaflet Layer)
  callback: (e) => {
    console.log('���[b');
    console.log('��T�vPWh:', e.coordinates);
    console.log('��T�v�Vb_�[a�:', e.feature);
  }
});

// ��Y*N�Vb_
map.MouseToolEditor({
  features: [drawnPoint, drawnLine, drawnPolygon], // �����v�Vb_�[a�pe�~
  callback: (e) => {
    console.log('���[b');
    console.log('��T�v�Vb_:', e.features); // ԏ�V��T�v@b	g�Vb_
  
    // ���S�k*N�Vb_�v��TPWh
    e.features.forEach(feature => {
      console.log(feature.type, feature.coordinates);
    });
  }
});

\Pbk�~6Rb��

�S�N��e\PbkS_MR�o;m�v�~6Rb��d\O�

// \Pbk�~6R
map.deactivateMouseTool();

// \Pbk��
map.deactivateMouseToolEditor();

�[E��^(u:y�O

Nb�/fN*N�~T�~6R�T��R��v�[te:y�O�

// �[IN�~6R�[b�v�V�
const drawCallback = (e) => {
  console.log('�~6R�[b:', e);
  
  // X[�P�~6R�v�Vb_�N�OT�~��
  const drawnFeature = e.feature;
  
  // /T�R��!j_
  document.getElementById('edit-btn').onclick = () => {
    map.MouseToolEditor({
      feature: drawnFeature,
      callback: (editEvent) => {
        console.log('���[b:', editEvent);
      }
    });
  };
};

// R�^�~6R�]wQh
const createDrawingControls = () => {
  const controls = document.createElement('div');
  controls.className = 'drawing-controls';
  
  ['point', 'polyline', 'polygon', 'rectangle', 'circle'].forEach(type => {
    const btn = document.createElement('button');
    btn.textContent = type.charAt(0).toUpperCase() + type.slice(1);
    btn.onclick = () => {
      map.deactivateMouseTool(); // HQ\PbkS_MR�~6R
      map.MouseTool({
        type: type,
        callback: drawCallback
      });
    };
    controls.appendChild(btn);
  });
  
  const editBtn = document.createElement('button');
  editBtn.textContent = 'Edit';
  editBtn.id = 'edit-btn';
  editBtn.disabled = true;
  controls.appendChild(editBtn);
  
  const stopBtn = document.createElement('button');
  stopBtn.textContent = 'Stop';
  stopBtn.onclick = () => {
    map.deactivateMouseTool();
    map.deactivateMouseToolEditor();
  };
  controls.appendChild(stopBtn);
  
  document.body.appendChild(controls);
};

// R�YS0W�VTR�^�c�N
map.initialize().then(() => {
  createDrawingControls();
});

ؚ�~(u�l

ꁚ[IN�pZ�T�Vh

const customCluster = map.initMarkerCluster({
  id: 'custom-cluster',
  // ꁚ[INZ�T�VhR�^�Qpe
  iconCreateFunction: (cluster) => {
    const count = cluster.getChildCount();
    let size, className;
  
    if (count < 10) {
      size = 30;
      className = 'cluster-small';
    } else if (count < 100) {
      size = 40;
      className = 'cluster-medium';
    } else {
      size = 50;
      className = 'cluster-large';
    }
  
    return map.createHtmlIcon({
      html: `<div><span>${count}</span></div>`,
      className: `custom-cluster ${className}`,
      iconSize: [size, size]
    });
  }
});

O(uꁚ[INh��

// �m�Rꁚ[INh��
map.addMarker({
  position: [110, 38],
  type: 'custom',
  customCreator: (position, style) => {
    // R�^ꁚ[INh��
    return L.marker(position, {
      icon: map.createHtmlIcon({
        html: '<div class="pulse-marker"></div>',
        className: 'custom-div-icon',
        iconSize: [30, 30]
      })
    });
  },
  title: 'ꁚ[INh��'
});

�N�NYt

// �m�R&^�N�N�vh��
const eventMarker = map.addMarker({
  position: [118, 36],
  type: 'default',
  title: '�N�Nh��',
  onClick: (e) => {
    console.log('h�����p�Q', e);
  }
});

// (WZ�T�p
N�m�R�N�N
markerCluster.addMarker({
  position: [119, 32],
  title: 'WS�N',
  onClick: (e, data) => {
    console.log('�p�Q�NZ�T�p', data);
  }
});

�la�Ny�

nx�O(WO(u�NUO�e�lMR�(u initialize()�e�lR�YS0W�V
�Vh_؞��O(uCDN0W@W��ꁚ[IN�Vh��c�O�[teURL
Z�T�R��cknx_eQ leaflet.markercluster�vsQD��n
h��d>eO(u requestAnimationFrame�[�s�nx�O(W�s�NOmȉhV-NO(u
R�^�Vh�eO(u�M�hV�c�O�v createIconb createHtmlIcon�e�l��MQ�v�cO(uLeaflet API
��k0W�V�eO(u destroy()�e�lʑ>eD��n
�pZ�T�Th��d>e�[�O(W N��e�^�(uvQ destroy()�e�lntD��n
O(u�~6R�R��cknx_eQ leaflet-draw�vsQD��n

OmȉhV|Q�['`

SuperMap�M�hV|Q�[@b g/ec�s�NJavaScript�vOmȉhV�S�b�

Chrome 60+
Firefox 60+
Safari 12+
Edge 16+
IE 11 (��polyfill)

��S��

MIT

�~�V�]wQ�R��

SuperMap �M�hVƖb�N Leaflet.draw �^�/ecT�y�QUO�Vb�v�~6R�T��R��0�S�N�Ǐ$N�y�eO(u�

�e_N�R�YS�eM�n

(WR�^0W�V��O�e�Ǐ drawing M�ny�/T(u�~�V�wQ�

// R�^0W�V�[�Ov^M�n�~�V�]wQ
const map = new SuperMapAdapter({
  container: 'map-container',
  config: {
    serviceUrl: 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',
    longitude: 108,
    latitude: 34,
    zoom: 5
  },
  drawing: {
    enabled: true,           // /f&T/T(u�~�V�]wQ
    position: 'topleft',     // �c�NMOn
    draw: {
      // M�n�~6R�]wQ���:N false �S�y(u�g{|�]wQ
      polyline: true,        // �~
      polygon: true,         // Y��b_
      rectangle: true,       // �wb_
      circle: true,          // W
      marker: true           // h���p
    },
    edit: {
      remove: true           // AQ�� Rd�
    },
    // �~6R�[b�v�V�
    onCreate: (e) => {
      console.log('�~6R�[b', e.layer);
    },
    // ���[b�v�V�
    onEdit: (e) => {
      console.log('���[b', e.layers);
    },
    //  Rd��[b�v�V�
    onDelete: (e) => {
      console.log(' Rd��[b', e.layers);
    }
  }
});

// R�YS0W�V
await map.initialize();

�e_�N��R`/T(u�~�V�]wQ

_N�S�N(W0W�VR�YST��Ǐ setDrawingTools �e�l�R`/T(u�~�V�]wQ�

// R�^0W�V�[�O
const map = new SuperMapAdapter({
  container: 'map-container',
  config: {
    serviceUrl: 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',
    longitude: 108,
    latitude: 34,
    zoom: 5
  }
});

// R�YS0W�V
await map.initialize();

// �R`/T(u�~�V�]wQ
map.setDrawingTools({
  enabled: true,
  position: 'topleft',
  draw: {
    polyline: true,
    polygon: true,
    rectangle: true,
    circle: true,
    marker: true
  },
  edit: {
    remove: true
  },
  onCreate: (e) => {
    console.log('�~6R�[b', e.layer);
  }
});

��S�T�{t�~6R�v�Vb_

// ���S@b	g�~6R�v�Vb_
const features = map.getDrawnItems();
console.log('S_MR�~6R�v�Vb_:', features);

// nzz@b	g�~6R�v�Vb_
map.clearDrawnItems();

// �y(u�~�V�]wQ
map.setDrawingTools({
  enabled: false
});

�~�V�]wQؚ�~M�n

// R�^0W�V�[�Ov^M�n�~�V�]wQ�vؚ�~	�y�
const map = new SuperMapAdapter({
  container: 'map-container',
  config: {
    serviceUrl: 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',
    longitude: 108,
    latitude: 34,
    zoom: 5
  },
  drawing: {
    enabled: true,
    position: 'topleft',
    draw: {
      // ꁚ[IN�~ag7h_
      polyline: {
        shapeOptions: {
          color: '#f357a1',
          weight: 3
        }
      },
      // ꁚ[INY��b_7h_
      polygon: {
        allowIntersection: false, // �ybk�v�N
        drawError: {
          color: '#e1e100', // ���e�v��r�
          message: 'Y��b_
N���v�N!'
        },
        shapeOptions: {
          color: '#bada55'
        }
      },
      // ꁚ[INWb_7h_
      circle: {
        shapeOptions: {
          color: '#662d91'
        }
      },
      // ꁚ[IN�wb_7h_
      rectangle: {
        shapeOptions: {
          color: '#fca45d'
        }
      },
      // �y(uh��
      marker: false
    },
    edit: {
      remove: true
    }
  }
});

// R�YS0W�V
await map.initialize();

O(u��Y�vSuperMap!jWW

,g�M�hV؞��S\ň�NSuperMap iClient�v�R8^(u�R��0�Y�g���O(u�M�hV*g�v�c�c�O�vSuperMap iClient�R���S�N cgq�NN�e_�d\O�

�v�cO(uSuperMap iClient�Su!jWW

S_��[ň�N@map-library/supermapT�@supermapgis/iclient-leafletS�]\O:N�OV��ꁨR�[ň0�Vdk���S�N�v�c(W�Nx-N�[eQv^O(uSuperMap iClient�v�NUO!jWW��e�(W�`�vpackage.json-N��Y�m�R�OV��

// 1. ��HQ�[eQ�M�hV
import { MapFactory } from '@map-library/core';
import '@map-library/supermap';
import '@map-library/supermap/style';

// 2. �v�c�[eQ����vSuperMap iClient!jWW
import { 
  HeatMapLayer, 
  QueryByBoundsService,
  RankSymbolThemeLayer,
  GeoFeatureThemeLayer
} from '@supermapgis/iclient-leaflet';

// 3. (W�`�v�~�N-NO(uُ�N!jWW
export default {
  async mounted() {
    // R�^0W�V�[�O
    const map = MapFactory.createMap('supermap', {
      container: 'map-container',
      config: {
        serviceUrl: 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',
        latitude: 34,
        longitude: 108,
        zoom: 5
      }
    });
    
    await map.initialize();
    
    // ���S�S�Y�vLeaflet0W�V�[�O
    const leafletMap = map.getMap(); // GP��	gN*NgetMap�e�leg���SLeaflet�[�O
    
    // O(uSuperMap!jWW
    const heatLayer = new HeatMapLayer("heatmap", {
      map: leafletMap,
      radius: 25,
      gradient: {0.4: 'blue', 0.65: 'yellow', 0.85: 'orange', 1.0: 'red'}
    });
    
    // �m�Rpenc0R�p�R�VB\
    heatLayer.addPoints([
      {lng: 108, lat: 34, count: 100},
      {lng: 109, lat: 35, count: 50},
      // �fYpenc�p...
    ]);
    
    // R�^�g�
g�R
    const queryService = new QueryByBoundsService("https://iserver.supermap.io/iserver/services/data-world/rest/data");
    // ...O(u�g�
g�R
  }
}

�~TO(u�M�hV�T�Su!jWW

�`�S�NT�eO(u,g�M�hV�c�O�v\ň�R��TSuperMap iClient�v�Su�R��

import { MapFactory } from '@map-library/core';
import '@map-library/supermap';
import { GraphThemeLayer } from '@supermapgis/iclient-leaflet';

export default {
  async mounted() {
    const map = MapFactory.createMap('supermap', {
      // �M�hVM�n...
    });
    
    await map.initialize();
    
    // O(u�M�hV�c�O�v�R��
    const marker = map.addMarker({
      position: [116.4, 39.9],
      type: 'icon',
      title: 'S�N'
    });
    
    // O(u�M�hVR�^�VB\
    const customLayer = map.createLayer('customLayer');
    
    // ���S�^B\Leaflet�[�O
    const leafletMap = map.getMap(); // GP��	gdk�e�l
    
    // O(uSuperMap�Su�R��
    const themeLayer = new GraphThemeLayer("GraphThemeLayer", {
      map: leafletMap,
      // M�n...
    });
    
    // �m�R0R0W�V
    themeLayer.addTo(leafletMap);
  }
}

�la�Ny�

Hr,g|Q�['`�,g�M�hVO(u�v/f@supermapgis/iclient-leaflet v11.2.xHr,g0�Y�g���O(uyr�[Hr,g��S�N(W��vpackage.json-Nfnxc�[Hr,g�S0
�N�NYt�S_T�eO(u�M�hV�T�Su!jWW�e��la�N�NYt:g6R�S�� g@b NT0�M�hV�c�O�N�~N�v�N�NAPI��Su!jWWO(uLeaflet�N�N�|�~0
�QX[�{t�(W�~�N��k�e��nx�OT�e�(u�M�hV�vdestroy�e�l�TKb�Rnt�Ǐ�SuAPIR�^�v�VB\�T g�R��N2�bk�QX[�lo0
CSS7h_��M�hV�]�~�[eQ�N�W,g7h�FO�g�Nؚ�~�~�N�S��Y�vCSS0��S�SuperMap iClient�[�e�echnx��/f&T��[eQ��Y7h0
�QQ�s�X��Y�g(W�QQ�s�XO(u��nx�O@b g�OV�S�S�b@supermapgis/iclient-leaflet ��]cknx�[ň(W�`�v�QQ�s�X-N0

��S�fY.^�R

�fYsQ�NSuperMap iClient�vO(u�e�l��S�SuperMap�[�e�ech�

leaflet leaflet-draw @map-library/core leaflet.markercluster @supermapgis/iclient-leaflet

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

�R��yr'`

�[ň

�W,g(u�l

R�YS0W�V

�m�Rh��

R�^�Vh

�VB\�{t

0W�V�c6R

�pZ�T�R��

R�^�pZ�T

�m�RZ�T�ppenc

Z�T�VB\�{t

h����d>e�R��

R�YSh����d>e

h����d>e�c6R

h����N�N�v,T

���Sh����r`N��k

�~6R�Vb_�R��

�~6R�QUO�Vb_

ꁚ[IN�~6R7h_

�Vb_���R��

\Pbk�~6Rb��

�[E��^(u:y�O

ؚ�~(u�l

ꁚ[IN�pZ�T�Vh

O(uꁚ[INh��

�N�NYt

�la�Ny�

OmȉhV|Q�['`

���S��

�~�V�]wQ�R��

�e_N�R�YS�eM�n

�e_�N��R`/T(u�~�V�]wQ

���S�T�{t�~6R�v�Vb_

�~�V�]wQؚ�~M�n

O(u��Y�vSuperMap!jWW

�v�cO(uSuperMap iClient�Su!jWW

�~TO(u�M�hV�T�Su!jWW

�la�Ny�

���S�fY.^�R

R�YS0W�V

�m�Rh��

R�^�Vh

�VB\�{t

�pZ�T�R��

R�^�pZ�T

�m�RZ�T�ppenc

Z�T�VB\�{t

h��d>e�R��

R�YSh��d>e

h��d>e�c6R

h��N�N�v,T

��Sh��r`N��k

ꁚ[IN�~6R7h_

�Vb_��R��

\Pbk�~6Rb��

ꁚ[IN�pZ�T�Vh

O(uꁚ[INh��

�N�NYt

�la�Ny�

��S��

�e_N�R�YS�eM�n

�e_�N��R`/T(u�~�V�]wQ

��S�T�{t�~6R�v�Vb_

�~�V�]wQؚ�~M�n

O(u��Y�vSuperMap!jWW

�v�cO(uSuperMap iClient�Su!jWW

�~TO(u�M�hV�T�Su!jWW

�la�Ny�

��S�fY.^�R