Maptec JS Draw

@maptec/maptec-js-draw 是基于 @maptec/maptec-js 的地图绘制与测量工具库。

安装

npm install @maptec/maptec-js @maptec/maptec-js-draw

npm 方式使用

import Maptec from '@maptec/maptec-js';
import '@maptec/maptec-js/maptec.css';

import {MaptecTool} from '@maptec/maptec-js-draw';
import '@maptec/maptec-js-draw/style.css';

const map = new Maptec.Map({
  container: 'map',
  style: 'YOUR_MAP_STYLE',
  center: [116.3974, 39.9093],
  zoom: 10
});

map.on('load', () => {
  const draw = new MaptecTool.Draw(map, {
    displayControls: true,
    controlsPosition: 'top-right',
    locale: 'zh-CN'
  });

  const measure = new MaptecTool.Measure(map, {
    displayControls: true,
    controlsPosition: 'top-left',
    locale: 'zh-CN'
  });
});

<div id="map" style="width: 100%; height: 100vh"></div>

CDN 方式使用

CDN 方式会暴露全局对象 Maptec 和 MaptecTool。Maptec 必须在 Maptec JS Draw 之前引入。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Maptec JS Draw</title>

    <link
      rel="stylesheet"
      href="https://unpkg.com/@maptec/maptec-js/maptec.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/@maptec/maptec-js-draw/style.css"
    />

    <style>
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://unpkg.com/@maptec/maptec-js"></script>
    <script src="https://unpkg.com/@maptec/maptec-js-draw"></script>

    <script>
      const map = new Maptec.Map({
        container: 'map',
        style: 'YOUR_MAP_STYLE',
        center: [116.3974, 39.9093],
        zoom: 10
      });

      map.on('load', () => {
        const draw = new MaptecTool.Draw(map, {
          displayControls: true,
          controlsPosition: 'top-right',
          locale: 'zh-CN'
        });

        const measure = new MaptecTool.Measure(map, {
          displayControls: true,
          controlsPosition: 'top-left',
          locale: 'zh-CN'
        });
      });
    </script>
  </body>
</html>

jsDelivr 对应地址：

https://cdn.jsdelivr.net/npm/@maptec/maptec-js
https://cdn.jsdelivr.net/npm/@maptec/maptec-js/maptec.css
https://cdn.jsdelivr.net/npm/@maptec/maptec-js-draw
https://cdn.jsdelivr.net/npm/@maptec/maptec-js-draw/style.css