1. 2.在组件中: import "@supermap/iclient-classic/libs/SuperMap-8.1.1-16520"; import { MapVLayer } from "@supermap/iclient-classic"; 3.index.html <script src="http://iclient.supermap.io/libs/iclient8c/libs/SuperMap.Include.js"&

先把代码贴出来,注释以后有时间再写(需要留意一下这里图标的引入方式,函数内相同路径无法找到图片) import sk from "../../assets/img/home/sk-active.png"; import hd from "../../assets/img/home/river-active.png"; // 雨量站 状态:颜色标识 点 switch (status) { case 0: status = '#a8eba8' break; case 1

在最近开发中,遇到了vue框架配合openlayers做gis功能的一个模块.过程中要求引用第三方的单独js文件.嗯,解决如下: 把整体js文件用函数abc()封装起来,在需要用到的模块用var obj= require('路径')引用,然后使用obj.abc()即可

NodeJS 环境安装包下载:https://nodejs.org/zh-cn/download/ 安装vue-cli3.0.1: https://cli.vuejs.org/guide/installation.html Vue + Openlayers学习:https://www.jianshu.com/p/fd399ad4b7d8(文后有源码链接) OpenLayers开源代码:https://github.com/openlayers/openlayers 安装环境 下载Openlaye

openlayer初步加载地图 vue项目搭好后,直接用node js安装ol, 安装好后可以看看安装的版本:我用的是5..2的版本 然后看官网相对应版本的文档,都是英文文档; 官方文档:    http://openlayers.org/en/latest/apidoc/ 然后引入所需要的js;      先加载出地图:   效果图: 使用离线地图时,重点注意的是:坐标系的问题,在写代码的时候坐标必须要和下载的离线地图的坐标系要保持一致:如果不一致,中心坐标会和地图偏移很远 我用的是EPSG:

安装 安装openlayers安装指定包安装openlayersVUE中的地图import ol from "openlayers";import "openlayers/dist/ol.css"; cnpm install openlayers --save 安装jquery cnpm install jquery --saveimport $ from 'jquery' 安装 bootstrapnpm install bootstrap --save-dev /

1.安装ol库 使用cnpm i ol -s命令安装 2.建一个olMap.vue文件夹 <template> <div class='olMap'> <h2>{{this.name}}</h2> <div class='map' ref='rootmap'></div> </div> </template> <script> import 'ol/ol.css' import { Map, Vie

环境vue3.0项目 最初是以npm i ol -s方式安装的ol,import方式导入引用,但是实际使用的时候一直报ol is not defined,最后选择在HTML以script标签引入ol,如下 <link rel="stylesheet" href="<%= BASE_URL %>./css/gr-ol.css" type="text/css"> <script src="<%= BASE

由于项目需要,需要是使用openlayers框架,于是开始安利一波openlayers,可以点击 https://openlayers.org/   进入他的官网下载相关资源和案例 学习的过程总是慢慢来的,先就不在vue react等一下js框架下使用了,直接上html,哈哈 首先去他官网里,https://openlayers.org/en/latest/doc/quickstart.html  进入快速开始界面,就是所谓的hello world 然后开始敲代码,在本地新建一个index.ht

http://weilin.me/ol3-primer/ch03/03-01.html#http://weilin.me/ol3-primer/ //地址http://openlayers.org/ //OpenLayers官网 vue安装自定义坐标系npm install proj4 import * as proj4 from "proj4"; or// import proj4 from "proj4"; 报"xp"错误就是对象用的不对 w

需求场景: 在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥.基于此出发点,考虑能否自动读取文件夹下的文件进行路由注册. 借鉴思路: 参考vue的功能基础组件的自动化全局注册,看到一个require.context方法,可以读取某个文件夹下的文件信息.因此考虑,使用这个方法,获取views文件夹下的.vue页面,文件夹名称作为路由名称 require.context的使用介绍: 一个webpa

OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的.功能丰富的JavaScript类库,可以满足几乎所有的地图开发需求. 有如下特点: 支持任何XYZ瓦片资源,同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务 支持矢量切片,包括pbf.GeoJSON.TopoJSON格式 支持矢量图层,能渲染GeoJSON.TopoJSON.KML.GML和其他格式的矢量数据 支持OGC制定的WMS.W

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量

十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件.比如index.scss转换成index.css 安装成功后,package.json文件变化如下: 接着,安装extract-text-webpack-plugin,让webpack可以输出css格式的文件 npm install --save-

六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.exports = { // 配置入口 entry: { }, // 编译后的文件路径 output: { path: '', // 文件路径 filename: '' // 文件名称 }, module: { // 编译规则 loaders: [] }, // 辅助的插件 plugins:[] }

一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install -g webpack 如果公司网络是设置代理的,要设置下代理地址 npm config set proxy http://***/ 三.建立项目文件夹 我在本机的E盘上,建了一个名称为demo的文件夹 四.初始化package.json 1.cmd控制台进入E盘下的demo文件夹 2.输入 npm

原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码.它会根据 lang 属性自动用适当的加载器去处理. CSS 例如,我们编译用 SASS 编译 <style> 标签: npm install sass-loader node-sass --save-dev <

原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块. vue-loader 提供了一些非常酷炫的特性: ES2015默认可用: 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade. 把 <style> 和 &

应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步的事务. 异步逻辑应该封装在action 中. 只要你遵循这些规则,怎么构建你的项目的结构就取决于你了.如果你的 store 文件非常大,仅仅拆分成 action.mutation 和 getter 多个文件即可. 对于稍微复杂点的应用,我们可能都需要用到模块.下面是一个简单的项目架构: ├── i

引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会更偏爱Vue,对于某些问题用Vue来解决会更好,如果没有这点信念,我们也就不会整天为此忙活了.但是,我们想尽可能地公平和准确地来讲述.其他的框架也有显著的优点,比如 Rect 的生态系统,或者 Knockout 对浏览器支持到 IE6 .我们把这些也都会全列出来. 我们希望得到你们的帮助,来使文档保

引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了. 若想了解它是如何工作的,就要先认清这几个概念: 1.更新DOM是非常昂贵的操作 当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如: document.getElementById('myId').ap