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

// 引入 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: () => ({}),
},