写在前面的话(背景交代)
最近参加esri比赛,但是又想趁机接触前端最新的一些框架和技术,所以,毅然决然的踏上了这个天坑之路。我现在只是成功的把地图渲染出来了,所以,我也不知道会不会有天坑二的出现。
gituhb项目地址
最新更新的大bug关于ie
esriloader使用h5新属性dataset所以并不兼容ie低版本,我这里是ie10及其以下都不兼容,所以如果要兼容ie果然只能用cdn在index页面直接引入了。
新建vue-cli工程
如何用vue-cli + webpack构建一个工程,网上一大堆的代码,我就不赘述了。比如这个就是很好地入门文章,先要做的还是要把vue-cli和webpack的模块划分好,框架搭建好,然后才是我要说的,地图部分。
如何在vue-cli,webpack中使用arcgis API
参考文章(1),这个要翻个墙
参考文章(2),这个也要翻个墙
参考文章(3),主要参考esri官网,他告诉我是可以实现的,在无数次我都想要放弃了,但是想到官网都给了例子了,这么大的公司不能是逗我玩吧,还是坚持下来了。
只要了解webpack的人,都知道我们用css需要安装css-loader,使用scss需要安装sass-loader,es6需要安装babel-loader,几乎用什么就要装什么,所以对于arcgisAPI来说,也是需要一个loader的,我万分庆幸的是,虽然像我这样搞的文章少,但是esri确实给我们提供了一个叫做esri-loader的东西。并且,如果你不想用webpack,还有直接在vue中使用的例子vue的用例很贴心吧
所以,接下来我们就需要去到我们的项目目录,安装esri-loader,用管理员权限打开命令行
E:\esri\LorryAdmin>npm install esri-laoder --save-dev
,安装好了以后,我就说说我遇到的第一个坑:光是安装esri-loader