Hmap-utils NPM

更新说明

dist -- umd 模式打包
lib -- commonjs 模式打包
es -- esm 模式打包

使用说明

html

只能使用 umd 模式

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="/dist/hope-map-utils.umd.js"></script>
  </head>
  <style>
    #map {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 400px;
      overflow: hidden;
    }
  </style>
  <body id="map">
    <div></div>
  </body>
  <script>
    HopeMapUtils.createMap({
      type: 'ol',
      el: 'map',
      projType: '2437',
      extent: [481064.43489999976, 3492206.4393000007, 528184.0180000002, 3521781.3522999994],
      center: [481064.43489999976, 3492206.4393000007],
    })
      .then(hopeMap => {
        return hopeMap.getMapLayer();
      })
      .then(mapLayer => {
        mapLayer.appendLayer('tiled', {
          url: 'http://xxxx/MapServer',
          params: {
            id: 'layerId',
          },
        });
      });
  </script>
</html>

vue 2.x

<template>
  <div id="map">abc</div>
</template>

<style scoped>
#map {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
</style>

<script>
import { createMap } from '@hmap/utils';

export default {
  mounted() {
    setTimeout(async () => {
      const hopeMap = await createMap({
        type: 'ol',
        el: 'map',
        projType: '2437',
        extent: [481064.43489999976, 3492206.4393000007, 528184.0180000002, 3521781.3522999994],
        center: [481064.43489999976, 3492206.4393000007],
      });
      const mapLayer = await hopeMap.getMapLayer();
      mapLayer.appendLayer('tiled', {
        url: 'http://xxxx/MapServer',
        params: {
          id: 'layerId',
        },
      });
    }, 20);
  },
};
</script>

react 16.8+

import React, { useEffect } from 'react';
import { createMap } from '@hmap/utils';

export default function MapComponent() {
  useEffect(() => {
    async function initMap() {
      const hopeMap = await createMap({
        type: 'ol',
        el: 'map',
        projType: 2437,
        extent: [481064.43489999976, 3492206.4393000007, 528184.0180000002, 3521781.3522999994],
        center: [481064.43489999976, 3492206.4393000007],
      });
      const mapLayer = await hopeMap.getMapLayer();
      mapLayer.appendLayer(
        'tiled',
        {
          url: 'http://xxxx/MapServer',
          params: {
            id: 'layerId',
          },
        },
        1,
        () => {
          console.log('图层加载完成');
        },
      );
    }

    initMap();
  }, []);

  return (
    <div
      style={{
        width: '100%',
        height: '400px',
        overflow: 'hidden',
      }}
      id="map"
    ></div>
  );
}

@babel/runtime @types/arcgis-js-api @types/node @types/ol @types/proj4 @types/qs arcgis classnames draggable esri-loader ol proj4 qs

1.0.0

4 years ago