leaflet加载ArcGis服务

1.写在前面

在前端中leaflet天地图使用还是比较多的,可以使用不同坐标系,加载不同的服务数据

2.记录项目使用

使用leaflet加载arcGIS的底图服务,需要先引入 esri-leaflet

1
yarn add esri-leaflet

还在用npm?? cnpm??

1
import * as esri from 'esri-leaflet/dist/esri-leaflet.js';

没啥可说的,next

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
init() {
var lMap = L.map("CloudChart", {
center: [29.59, 105.29],
zoom: 10,
layers: [],
maxZoom: 15,
minZoom:3,
zoomControl: true
});
L.control.zoom({
zoomInTitle: "放大",
zoomOutTitle: "缩小"
}).addTo(lMap);
var dynamicLayer = esri.dynamicMapLayer({
url: arcgisBackgroundService.url,
opacity: 0.8,
f:'json'
});
lMap.addLayer(dynamicLayer);
}

初始化函数及基本的配置

3.总结

esri-leaflet是一个专门为leaflet地图加载arcGIS服务的插件,里面封装了很多种图层,详细可以使用console.log()或查看npm包的源码,使用上比较简单,也只有几行代码就实现了服务的加载。
天地图的特色就是代码量少,很少,非常少,快,很快,非常快

附上esri的官方地址吧。
Esri Leaflet

element输入框校验规则

输入框校验规则几乎是所有项目中都会用到的东西
那些年,我们趟过了很多坑
遇到一个项目要求是字段和内容及输入校验规则都是从后端请求的(即动态表单)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import * as elValudate from '@/assets/js/elValidate' // 引入自定义校验方法

data(){
// 行内自定义校验
var validatePass = (rule, value, callback) => {
if (value === '' || value == undefined || value == 0) {
callback(new Error('请点击选择评分'));
}
callback();
};
return {
againForm:{},
againRules:{
againText:[
{ required: true, message: '请输入备注', trigger: 'blur' },
],
value:[
// { required: true, message: '请点击进行评分', trigger: 'blur' },
{validator:validatePass,trigger: 'change'},
],
phone:[
{validator:elValudate.elValidatePhone,trigger: 'blur'},
]
}
}
},
mounted(){
this.clearValidate('againForm') // 清除整个表单的校验
this.clearValidate('againValue') // 清除againValue的校验
},
methods : {
clearValidate(formName) {
this.$refs[formName].clearValidate();
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
rules.js
//
export function elValidatePhone(rule, value, callback) {
if (value == '') {
return callback(new Error('手机号码不能为空'))
} else {
let re = /^1[23456789]\d{9}$/;
if (!re.test(value)) {
return callback(new Error('手机号码输入格式有误'))
}
return callback();
}
}