Mapmost Vue

A customizable mapmost component for Vue 2.x applications.

Installation

.npmrc 文件配置

registry = "https://registry.npmjs.com/"
@mapmost:registry = "https://npm.mapmost.com/"

npm install mapmost-vue --save

Usage

Global Registration

import Vue from 'vue'
import MapmostVue from 'mapmost-vue'
import 'mapmost-vue/lib/mapmost-vue.css';
Vue.use(MapmostVue)

Local Registration

import { MmViewer, MmLayer, } from 'mapmost-vue'

export default {
  components: {
      MmViewer,
      MmLayer
  }
}

In Template

<MmViewer 
    style-config="https://www.mapmost.com/cdn/styles/sample_data.json" 
    user-id="" 
    center="[120.0, 30.0]" 
    @leftClick="leftClick"
    @dblclick="dblclick"
    @contextmenu="rightClick"
    @moveend="moveend"
    @ready="ready"
>
  ### 更多事件操作，在ready 事件中获取，接受map参数；reay(map){....}
  ### 底图 样式 
  <MmBaseStyle url="https://www.mapmost.com/cdn/styles/sample_data.json"></MmBaseStyle>  
  ### 三维图层
    <MmLayer>
      <MmBatchModel></MmBatchModel>
      <MmCircle :position="[120.0, 30.0]"></MmCircle>
      <MmPyramid></MmPyramid>
      <MmFlowLine></MmFlowLine>
      <MmViewShed></MmViewShed>
      <MmPoints></MmPoints>
      <MmMarkers></MmMarkers>
      <MmModel></MmModel>
      <MmPolygon></MmPolygon>
      <MmLines></MmLines>
      <Mm3dTileSet></Mm3dTileSet>
    </MmLayer>
  
  ### 栅格影像图层
  <ArcgisCompactTile></ArcgisCompactTile>
  <ArcgisLooseTile></ArcgisLooseTile>
  <CustomTile></CustomTile>
  
    ### 二维图层
    <VlIcon></VlIcon>
    <VlLine></VlLine>
    <VlPolygon></VlPolygon>
    <VlPopup></VlPopup>
    <VlMarker></VlMarker>
</MmViewer>

###二维(点线面)图层支持以下事件

### 使用示例 icon-images 结合medox pics 使用，传入文件名
<VlIcon
    :list="list"
    :features="features"
    :icon-size="0.18"
    :text-size="16"
    text-color="#000"
    :icon-images="[item.imageName]"
    :icon-name="item.imageName"
    :text-offset="[0, 0.2]"
    @mouseclick=""
    @contextmenu=""
    @dblclick=""
    @mouseenter=""
    @mouseleave=""
    @mousemove=""
    @mouseover=""
></VlIcon>
### list 示例数据 支持features;
props: {
type: Object,
default: () => ({
text: 'text',
location: 'location',
iconName: 'iconName'
}),
},
### location 支持geometry 支持配置其他字段，如position，需要通过:props={locaition: 'position'} 指定
[
    {
        [location]: [120.71624090321666, 31.314878668239686],
        imageName: 'icon-image-1',
        text: ...
    }
]

### 支持geometry
<VlPopup
    use-geom
    :geom="item.geom"
    :options="{
          className: 'custom-popup z9999 function-points',
          anchor: 'bottom-left',
        }"
    :eleHtml="getHtml(item)"
></VlPopup>

### 支持list和features
<VlLine
    :list="lineList"
    :features="lineFeatures"
    :props="{ lineColor: 'routeColor', lineWidth: 'routeWidth' }"
/>
### this.lineList = [
{
name: '111',
routeColor: 'rgba(207, 204, 164, 0.6)',
routeWidth: 2,
coordinate: [
[120.71655541036887, 31.30770108544118, 0],
[120.73308162390975, 31.29313331480553, 0],
[120.76341454749843, 31.312616082679057, 0],
[120.73852063089902, 31.323338822778922, 0],
[120.71655541036887, 31.30770108544118, 0],
]
},
{
name: '2222',
fillColor: 'rgba(255, 187, 240, 0.5)',
coordinate: [
[120.7260736725986, 31.331290733035175, 0],
[120.70630497412293, 31.309399022571682, 0],
[120.74898025972249, 31.294742136285052, 0],
[120.77450175405153, 31.326108665511214, 0],
[120.7260736725986, 31.331290733035175, 0],
]
}
];

### 支持list和features
<VlPolygon :list="polygonDemoData" :features=""></VlPolygon>
###this.polygonDemoData = [
{
name: '111',
fillColor: 'rgba(207, 204, 164, 0.6)',
coordinate: [
[120.71655541036887, 31.30770108544118, 0],
[120.73308162390975, 31.29313331480553, 0],
[120.76341454749843, 31.312616082679057, 0],
[120.73852063089902, 31.323338822778922, 0],
[120.71655541036887, 31.30770108544118, 0],
]
},
{
name: '2222',
fillColor: 'rgba(255, 187, 240, 0.5)',
coordinate: [
[120.7260736725986, 31.331290733035175, 0],
[120.70630497412293, 31.309399022571682, 0],
[120.74898025972249, 31.294742136285052, 0],
[120.77450175405153, 31.326108665511214, 0],
[120.7260736725986, 31.331290733035175, 0],
]
}
];


<VlMarker
    v-for="item in headLastCarData"
    :key="'marker'+item.ID"
    :position="item.location"
    :draggable="false"
    :rotation="item.rotate"
    rotation-alignment="map"
    :ele-html="getCarDom(item)"
></VlMarker>

<MmFlowLine :options="{width: 10, speed: 0.4, image: require('/img/path1_base.png')}" :positions="[[120.71624090321666, 31.314878668239686], [120.71828649865898, 31.315091010863085, 50.0]]"></MmFlowLine>

<MmModel :models="[{type: 'glb', url: '/model/person.glb'}]" :transform-controls="showFirstEndCar" :control-mode="'scale'" :center="[120.72004638396913, 31.301444828982213]"></MmModel>

<MmMarkers  :list="markerDemoData"></MmMarkers>
### // 添加markerDemoData样例数据
this.markerDemoData = [
{
name: 'marker1',
position: [120.74603465203592, 31.30605899929158, 100.0],
element: this.createMarkerDom('marker1'),
},
{
name: 'marker2',
position: [120.71828649865898, 31.315091010863085],
element: this.createMarkerDom('marker2'),
},
];

### 自定义影像图层 
###天地图 mapType:2, url：{img_c, img_w, vec_c, vec_w} webkey: 天地图key
### qgisXYZ 切片 mapType: 11, url: xxx/tile/{z}/{x}/{y}.png
<CustomTile :url="" :map-type="" :web-key="" :proj=""></CustomTile>

<Mm3dTileSet :url="'/xxx/tileset.json?offsetH=-1'"></Mm3dTileSet>

Props

Events