vue2 图层配图插件

安装

npm install

某些组件有使用到的外部依赖,也需要安装

"axios": "^0.21.1",
"element-ui": "^2.15.5",
"vue": "^2.6.10", // 项目已有则不用安装
"vuex": "^3.1.3", // 项目已有则不用安装
"sortablejs": "^1.15.2", // 拖拽库

//使用到 scss 安装适合本项目版本
sass 
sass-loader

引入地图 js

项目的 index.html 引入地图 js,插件有使用到地图

<script type="text/javascript" src="/vy/static/api/vy.ac.min.js"></script>

引用

main.js

import LayerPlugin from 'vyuan-ac-layer-illustration-plugin'
Vue.use(LayerPlugin, {
	appId: '项目ID',
	token: '用户token',
})

组件调用以参数说明

参数

| 字段 | 类型 | 说明 | | --------- | ------ | ---------------------------- | | layerItem | object | 图层管理列表单个图层数据对象 |

<LayerIllustration :layerItem="layerItem"></LayerIllustration>

import { LayerIllustration } from 'test-vyuan-ac-layer-illustration-plugin'
export default {
	components: { LayerIllustration },
	data() {
		return {
			layerItem: {
				id: 1357,
				dataType: 4,
				name: '学校',
				groupId: 7,
				groupName: '金牛图层',
				secretId: '3bddc2a9-f11f-4abc-a608-dc0c8264e822',
				legeng: null,
				layerParam:
					'{"name":"middleshool","id":"2","url":"/vy/omREST/System/TENANTBASE/spatial/V1.0/SpatialService/PostGISSpatialService/CIM/CDJINNIUCIMPG/public/chengdu_jinniu_school_poi/GeoJSON","renderType":13,"api":"AC_INFO_POPUP","acStyle":{"zoom":{"minZoom":0,"maxZoom":24},"iconUrl":{"url":"/vy/cim/asset/modelbase/icon/icon_style1/school.png","type":1,"field":null,"urlEnums":{}},"billboard":true,"color":{"opacity":1,"state":false,"type":1,"color":"rgb(0,53,177)","field":null,"colorArray":["rgb(54,98,206)","rgb(156,185,244)","rgb(37,59,103)","rgb(204,88,73)","rgb(34,30,30)","rgb(76,159,236)"],"antitone":false,"colorArray2":[],"autoHighlight":true,"highlightColor":"rgba(0, 0, 128, 128)","colorEnum":{}},"size":{"sizeUnits":"pixels","type":1,"field":null,"size":10,"sizeScale":2,"sizeMinPixels":1,"sizeMaxPixels":100,"scale3d":1},"anchorHeight":{"type":1,"height":13,"field":null},"anchorWidth":{"type":1,"width":0,"field":null},"angle":{"type":1,"angle":45,"field":null,"angleScale":2},"text":{"type":1,"content":null,"field":null,"fontSize":16,"fontColor":"rgba(255,255,255,255)","backgroundColor":"rgba(0,0,0,255)","textBorderColor":"rgba(0,0,0,255)","range":100000},"distance3d":{"type":1,"minDistanceField":null,"maxDistanceField":null,"minDistance":0,"maxDistance":1000000},"renderTooltip":{"fields":["name"]}}}',
				remark: '中学',
				workSpaceId: null,
				dataojo_id: null,
			},
		}
	},
}