0.1.13 • Published 2 years ago
shpcmap v0.1.13
SH地图组件
版本更新�? 0.1.13
安装
npm i shpcmap -s
main.js 导入
import shpcmap from 'shpcmap'
import ElementUI from 'element-ui';
import axios from 'axios'
import qs from 'qs';
import "ol/ol.css"
import 'element-ui/lib/theme-chalk/index.css';
import "../node_modules/shpcmap/src/static/css/commom.less"
Vue.use(ElementUI);
Vue.use(shpcmap);
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;
// http请求封装
Vue.prototype.$http = function (url, data = {}, method = 'post') {
var url1
return new Promise((resolve, reject) => {
if (url && url.indexOf('http:') != -1) {
url1 = url;
} else {
// url = this.$store.state.basePath + url
url1 = '/api/' + url
}
axios({
url: url1,
method: method,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
// 'Content-Type': 'application/json'
},
data: data
})
.then(res => {
//成功
resolve(res)
})
.catch(res => {
//失败
reject(res)
})
})
}
// POST传参序列�?
axios.interceptors.request.use((config) => {
if (config.method === 'post') {
config.data = qs.stringify(config.data);
}
return config;
}, (error) => {
return Promise.reject(error);
});
项目根目录创建文�? vue.config.js
配置�?
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://192.168.1.13:8081/shenghuimap/',
// 允许跨域
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
},
},
}
组件�?
<template>
<myMap searchBox toolBox mapSelect :isShowPlan='true' :position='[119.353643,26.083881]' :isZoom='10' roadColor='red' :roadWidth='8' :startPic='require("../..")' :searchPoint='require("././..")' drawColor="red" fillColor='red' :pointPic='require("../..")' initialUrl='..' :carStyle1="require(../.)" :carImg='require("../static/car/stop.png")'/>
</template>
Attributes
searchBox 是否显示 searchBox 组件 default false type Boolean
toolBox 是否显示 toolBox 组件 default false type Boolean
iconList 是否显示 iconList 组件 default false type Boolean
toggleCar 是否显示 toggleCar 组件 default false type Boolean
mapSelect 是否显示 toggleCar 组件 default false type Boolean
isShowPlan 是否显示路线详细规划 default true type Boolean
position 地图初始化中心点 default [119.353643,26.083881] type Array
isZoom 地图初始化缩放等�? default 8 type Number
roadColor 路线规划渲染的颜�? default 'green' type String
roadWidth 路线规划渲染的宽�? default 3 type Number
startPic 路线规划起点图标 default 默认样式
endPic 路线规划终点图标 default 默认样式
searchPoint 搜索地址图标 default 默认样式
drawColor 绘制几何图形边界颜色 default '#3f94f2' type String
fillColor 绘制几何图形填充颜色 default rgba(255,255,255,0.2) type String
pointPic 绘制点的图标 default 默认样式 type String
initialUrl 配置地图图源
default 'http://192.168.1.13:8081/shenghuimap/goldMap/getImage/V1/{z}/{x}/{y}.png'
carStyle1 配置可选择运行车辆图片 default 默认样式 type String
carStyle2 配置可选择运行车辆图片 default 默认样式 type String
stopCarStyle1 配置可选择静止车辆图片 default 默认样式 type String
stopCarStyle2 配置可选择静止车辆图片 default 默认样式 type String
carImg 配置初始运行车辆图片 default 默认样式 type String
carStopImg 配置初始静止车辆图片 default 默认样式 type String
carData 车辆数据 default 默认数据 type Array