# hmap-gis

> ## Project setup ``` npm install hmap-gis

Latest version **1.0.5** (published 2023-04-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install hmap-gis
pnpm add hmap-gis
yarn add hmap-gis
bun add hmap-gis
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-04-12 |
| First published | 2023-04-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wh-code |

## Links

- npm: https://www.npmjs.com/package/hmap-gis
- npm.io page: https://npm.io/package/hmap-gis

## Recent versions

- 1.0.5 (latest) — 2023-04-12
- 1.0.4 — 2023-04-12
- 1.0.3 — 2023-04-12
- 1.0.2 — 2023-04-12
- 1.0.1 — 2023-04-12
- 1.0.0 — 2023-04-10

## README

# vue2-smap-template

## Project setup
```
npm install hmap-gis

vue.js 

Vue.use(hmap-gis)
```

## 组件说明


### hMap 基础图层

```
<h-map :map-options="mapOptions" />

mapOptions: {
   center: [31.8351708944954, 120.32895],
   maxZoom: 18,
   zoom: 12

},
```

### hTileLayer 底图瓦片图层

```
<h-map :map-options="mapOptions" class="page">
    <h-tile-layer :url="url" />
</h-map>


mapOptions: {
   center: [31.8351708944954, 120.32895],
   maxZoom: 18,
   zoom: 12

},
url: "http://10.19.64.127:8090/iserver/services/map-zxytiles-/rest/maps/Tiles",

props

//http://123.57.48.153:8081/Tiles/{z}/{x}/{y}.png
url: {
    type: String,
},
//http://supermap/Tiles
superMapTileUrl: {
    type: String,
}
```

### hPolygonLayer 围栏图层

```
<h-map :map-options="mapOptions" class="page">
      <h-polygon-layer :polygons="polygons" />
</h-map>

url: 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',
mapOptions: {
    preferCanvas: true,
    crs: L.CRS.EPSG4326,
    center: [-10, 40],
    maxZoom: 18,
    zoom: 3
},
polygons: [[0, 20], [-30, 20], [-10, 50], [0, 20]]

props
//图层数据
polygons: {
    type: Array,
    default: () => [0, 0],
},
//图层样式
options: {
    type: Object,
    default: () => { },
},
//geoJson数据
geoJson: {
    type: Object,
    default: () => { },
},
//每个feature的回调
onEachFeature: {
    type: Function,
    default: () => { },
},

```

### hMarkerClusterGroupLayer 点聚合  依赖于 [leaflet.markercluster]('https://github.com/Leaflet/Leaflet.markercluster#usage')
```
// 引入 leaflet
import "leaflet/dist/leaflet.css";
import $L from "leaflet";

// 引入 leaflet.markercluster
import "leaflet.markercluster/dist/MarkerCluster.css"
import "leaflet.markercluster/dist/MarkerCluster.Default.css"
import "leaflet.markercluster";

// 解决默认 maker 无法显示的问题
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
let DefaultIcon = $L.icon({
  iconUrl: icon,
  shadowUrl: iconShadow
});
$L.Marker.prototype.options.icon = DefaultIcon;

<h-map :map-options="mapOptions" class="page">
    <h-marker-cluster-group-layer :marker="marker" :options="markerOptions" v-if="true"/>
</h-map>


url: 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China',
mapOptions: {
    preferCanvas: true,
    center: [32, 104],
    maxZoom: 18,
    zoom: 4
},
markerOptions: { 
    spiderfyOnMaxZoom: false,
    showCoverageOnHover: false,
    zoomToBoundsOnClick: false
},
marker:[30.74642645314707,111.315370047549]

props: {
    layerName: {
        type: String,
        default: 'MarkerClusterGroupLayer',
    },
    options: {
        type: Object,
        default: () => ({}),
    },
    markers: {
        type: Array,
        default: () => [0, 0],
    },
    markerOption: {
        type: Object,
        default: () => ({}),
    },
    bindPopup:{
        type: String,
        default:'this is bind Popup',
    }
},

```

### hGraphicLayer 高效率大数据打点

```
 <h-graphic-layer :markers="markers" :colors="['#ff0000']" :radius="1" :graphic-layer="GraphicLayerContent"></h-graphic-layer>

layerName: {
    type: String,
    default: 'GraphicLayer',
},
//markers:点坐标
markers: {
    type: Array,
    default: () => [0, 0],
},
//开始图标
icon: {
    type: Boolean,
    default: false,
},
//colors:点颜色
CircleStyle: {
    type: Object,
    default: () => ({
        color: '#ff0000',
        //不透明度
        opacity: 1,
        //半径
        radius: 1,
        //是否填充
        fill: true,
        //填充色
        fillColor: '#ff0000',
        //填充不透明度
        fillOpacity: 1
    }),
},
//icon:点图标样式
ImageStyle: {
    type: Object,
    default: () => ({
        img: new Image(),
        size: [22, 22],
        anchor: [11, 11]
    }),
},
//attributes:点信息
attributes: {
    type: Object,
    default: () => {},
},
//GraphicLayer:图层属性
GraphicLayer: {
    type: Object,
    default: () => ({}),
},
```

---
_Source: https://npm.io/package/hmap-gis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._