自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(66)
  • 收藏
  • 关注

原创 Angular 笔记12(表单与用户输入——响应式表单、验证表单、动态表单构建)

响应式表单响应式表单概述响应式表单对表单状态的每一次变更都会返回一个新的状态,这样可以在变化时维护模型的整体性。响应式表单是围绕 Observable 流构建的,表单的输入和值都是通过这些输入值组成的流来提供的,它可以同步访问。此篇只记录需要注意的知识点,官方文档(中文版)更详细显示表单控件的值通过可观察对象 valueChanges,你可以在模板中使用 AsyncPipe 或在组件类中使用 subscribe() 方法来监听表单值的变化。使用 value 属性。它能让你获得当前值的一份快

2020-11-15 23:23:36 6

原创 Angular 笔记11(表单与用户输入——简介)

文章目录简介选择一种方法关键差异可伸缩性建立表单模型建立响应式表单建立模板驱动表单表单中的数据流响应式表单中的数据流模板驱动表单中的数据流 (没看懂)数据模型的可变性简介Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。 两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径。选择一种方法响应式表单提供对底层表单对象模型直接、显式的访问。更加健壮:它们的可扩展性、可复用性和可测试性都更高。模板驱动表单依赖模板中的指令

2020-11-15 12:12:57 10

原创 Angular 笔记10(组件与模板——动态组件)

动态组件创建锚点:在添加组件之前,先要定义一个锚点来告诉 Angular 要把组件插入到什么地方。使用一个自定义辅助指令来在模板中标记出有效的插入点。import { Directive, ViewContainerRef } from '@angular/core';@Directive({ selector: '[ad-host]',})export class AdDirective { constructor(public viewContainerRef: ViewCont

2020-11-14 20:54:07 16

原创 Angular 笔记9(组件与模板——组件样式)

组件样式使用组件样式@Component({ selector: 'app-root', template: ` <h1>Tour of Heroes</h1> <app-hero-main [hero]="hero"></app-hero-main> `, styles: ['h1 { font-weight: normal; }']})export class HeroAppComponent {/* . . .

2020-11-14 18:28:58 8

原创 Angular 笔记9(组件与模板——组件交互)

文章目录组件交互通过输入型绑定把数据从父组件传到子组件通过 setter 截听输入属性值的变化通过ngOnChanges()来截听输入属性值的变化父组件监听子组件的事件父组件与子组件通过本地变量互动父组件调用@ViewChild()(重要)组件交互通过输入型绑定把数据从父组件传到子组件父组件:import { Component } from '@angular/core';import { HEROES } from './hero';@Component({ selector: 'ap

2020-11-14 11:05:10 150

原创 Angular 笔记8(组件与模板——生命周期)

文章目录生命周期钩子响应生命周期事件生命周期的顺序生命周期钩子响应生命周期事件生命周期的顺序ngOnChanges():当 Angular 设置或重新设置数据绑定的输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象。(与Vue中的watch和computed类似)ngOnInit():在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用,只调用一次。ngDoCheck():检测,

2020-11-13 20:30:13 12

原创 Angular 笔记7(组件与模板——管道)

文章目录组件与模板管道组件与模板管道

2020-11-12 14:46:39 29

原创 Angular 笔记6(组件与模板3)

组件与模板用户输入绑定用户输入事件@Component({ selector: 'app-click-me', template: ` <button (click)="onClickMe()">Click me!</button> {{clickMessage}}`})export class ClickMeComponent { clickMessage = ''; onClickMe() { this.clickMessage

2020-11-11 22:41:33 21

原创 Mapbox 笔记4(数据)

数据使用 Tilequery API 创建一个健康食物查询器要点添加地理编码器通过地理编码器查找周边符合条件的点数据渲染查询后的数据点使用 Mapbox GL JS 制作一张热力图要点

2020-11-10 20:07:34 106

原创 Mapbox 笔记2(Web应用——构建商店定位器)

文章目录Web应用使用 Mapbox GL JS 构建商店定位器实现思路第一种 加载内置标签初始化地图加载商店geojson数据创建商店列表添加事件监听(商店列表点击事件和地图点击事件)添加交互(flyToStore方法和createPopUp方法)第二种 加载自定义标签添加商店geojson数据创建商店列表(略)添加自定义Marker添加事件监听(商店列表点击事件和Marker点击事件)Web应用使用 Mapbox GL JS 构建商店定位器实现思路初始化地图加载商店geojson数据创建商

2020-11-08 18:42:22 106

原创 Angular 笔记5(组件与模板2)

文章目录组件与模板模板语法模板引用变量( #var )输入和输出属性如何使用 @Input()(`相当于Vue中的props`)如何使用 @Output()(`相当于Vue中的this.$emit()`)@Input() 和 @Output() 在一起@Input() 和 @Output() 声明为输入和输出指定别名模板表达式中的运算符管道运算符( | )安全导航运算符( ? )和空属性路径非空断言运算符(!)组件与模板模板语法模板引用变量( #var )模板引用变量通常是对模板中 DOM 元素的引

2020-11-08 12:35:58 8

原创 Angular 笔记4(组件与模板1)

文章目录组件与模板显示数据使用插值显示组件属性选择模板来源*ngFor 指令*ngIf 指令为数据创建一个类模板语法插值与模板表达式插值表达式组件与模板显示数据使用插值显示组件属性选择模板来源使用 @Component 装饰器的 template 属性来定义内联模板。内联模板对于小型示例或测试很有用。@Component({ selector: 'app-root', template: ` <h1>{{title}}</h1> <h2>

2020-11-08 09:58:04 15

原创 Angular 笔记2(Angular 范例应用)

文章目录快速上手范例应用组件交互路由注册路由使用路由信息数据服务概念创建服务启用HttpClient在 AppModule 中为应用启用 HttpClient在服务中使用 HttpClient表单部署本地构建发布快速上手范例应用组件交互创建子组件右键单击 app 文件夹,使用 Angular Generator 生成一个名为 product-alerts 的新组件。父传子子传父路由注册路由使用路由信息数据服务概念服务是 Angular

2020-11-04 09:53:59 199

原创 Angular 笔记3(英雄指南)

文章目录快速上手教程:英雄指南管道双向绑定CSS类绑定Observable(RxJS)路由添加 AppRoutingModule添加路由出口 RouterOutlet添加路由链接 (routerLink)路由类型获取带参数的路由回退服务端请求数据启用HTTP服务HttpClient返回数据错误处理HTTP修改数据HTTP添加数据HTTP删除数据http Options优化搜索操作异步管道快速上手教程:英雄指南管道双向绑定[(ngModel)] 是 Angular 的双向数据绑定语法。使用双向绑

2020-11-04 09:51:42 8

原创 Angular 笔记1(Angular基本概念)

文章目录快速上手搭建环境Angular的基本概念模块组件服务与依赖注入模块简介@NgModule 元数据Angular 自带的库组件简介组件的元数据模板语法数据绑定管道指令结构型指令属性型指令服务与依赖注入简介服务范例依赖注入提供服务快速上手搭建环境安装 Angular CLInpm install -g @angular/cli创建工作空间和初始应用ng new my-app运行应用ng serve --open–open(或者只用 -o 缩写)选项会自动打开你的浏览器

2020-11-04 09:50:24 7

原创 Mapbox 笔记1(Mapbox 是如何工作的)

文章目录初步了解MapboxMapbox 是如何工作的Access TokenToken的使用范围URL 限制创建和管理 access token创建新数据geojson数据格式创建数据集数据集转换为 tileset初步了解MapboxMapbox 是如何工作的Access Token需要获取 access token(访问令牌)以使用 Mapbox 的各种工具、API、SDK。Token的使用范围每个 access token 都可以限制Mapbox API的使用范围。在选择 token 范围

2020-11-01 12:20:21 58

原创 MPX + Vant Weapp 在微信小程序中实现Picker选择器

目录功能概述实现步骤在MPX项目中引入Vant WeappPopup与Picker组件结合实现Picker选择器代码效果实现单页面中的多个Picker选择器代码Picker选择器的多级联动代码效果功能概述使用MPX框架开发微信小程序时,无法使用原生的Picker选择器,经试验,可以采用Vant Weapp的UI实现。实现步骤在MPX项目中引入Vant Weapp通过 npm 安装npm i @vant/weapp -S在mpx文件中引用picker组件和popup组件(picker和po

2020-09-11 21:56:40 155

原创 Vue + Element UI 实现上传图片转base64及base64图片预览

目录功能概述实现步骤使用el-upload组件实现上传功能通过getFile方法获取文件信息定义getBase64方法将图片转为base64格式预览和删除编辑数据时,实现图片预览效果截图参考链接功能概述前端后台管理系统新增数据时,需要在上传图片后,将图片转成base64格式的字符串,最后将字符串传到后台数据库。在编辑数据或者查看详情时,需要预览图片。实现步骤使用el-upload组件实现上传功能通过getFile方法获取文件信息定义getBase64方法将图片转为base64格式预览和

2020-08-28 11:20:03 259

原创 Mapbox学习笔记(1)——style

目录改变一个地图的样式改变一个地图的样式地图样式:map的style属性mapbox://styles/mapbox/streets-v10mapbox://styles/mapbox/outdoors-v10mapbox://styles/mapbox/light-v9mapbox://styles/mapbox/dark-v9mapbox://styles/mapbox/satellite-v9mapbox://styles/mapbox/satellite-streets-v10m

2020-05-27 22:30:38 247

原创 vue-element-admin学习笔记——带你用vue撸后台 系列一(基础篇)

文章目录目录结构api 和 views封装 axiosaxios 基本案例axios.create 示例axios 请求拦截器axios 响应拦截器request 库源码分析router-view参考链接目录结构api 和 views建议根据业务模块来划分 views,并且 将views 和 api 两个模块一一对应,从而方便维护。如下图:封装 axiosaxios 基本案例cons...

2020-02-18 18:32:00 619

原创 Openlayers6 Examples学习笔记(14)

文章目录山体阴影调整Shared Views(视图同步)Tile Load Events(瓦片加载事件)Vector Labels(矢量标注)WMS Capabilities Parsing(WMS功能解析)Vector Tile Info(矢量瓦片属性信息获取)Zoom Sliders(缩放滑块)山体阴影调整案例链接Shared Views(视图同步)案例链接Tile Load Ev...

2020-01-14 21:02:29 243

原创 Openlayers6 Examples学习笔记(13)

文章目录Lazy Source(按需加载数据源)Advanced Mapbox Vector Tiles(高级Mapbox矢量瓦片)Mapbox Vector Tiles(Mapbox矢量瓦片)Timezones in KML(KML时区)Measure(测量)OSM Vector Tiles(OSM矢量瓦片)Lazy Source(按需加载数据源)案例链接Advanced Mapbox ...

2020-01-14 20:38:07 228

原创 Openlayers6 Examples学习笔记(12)

文章目录案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接案例链接

2020-01-13 22:15:28 129

原创 Openlayers6 Examples学习笔记(11)

文章目录XYZ(加载XYZ图层)Vector Label Decluttering(矢量标注冲突优化)重点Constrained Zoom(限制图层缩放)XYZ EsriFreehand Drawing(手绘模式)XYZ Retina Tiles(XYZ视网膜瓦片)WKT(加载WKT数据)Box Selection(框选)Custom Controls(自定义控件)Custom Tooltips(...

2020-01-13 21:40:16 177

原创 Openlayers6 Examples学习笔记(10)

文章目录WFS - GetFeature(获取要素,查询过滤)WMS GetLegendGraphic(获取图例)WMS 512x256 TilesSingle Image WMSWMTS(加载WMTS图层)WMS Time(时间动态更新数据)重点Tiled WMS Wrapping(WMS瓦片包裹)WMS without Projection(加载未知投影WMS数据)WMTS Tile Tran...

2020-01-13 20:52:57 159

原创 Openlayers6 Examples学习笔记(9)

TopoJSON(加载TopoJSON数据)案例链接

2020-01-13 19:59:42 156

原创 Openlayers6 Examples学习笔记(8)

文章目录Select Features(选中要素)Scale Line(比例尺控件)Select Features by Hover(鼠标悬浮高亮选中要素)Static Image(加载静态图片)Snap Interaction(捕捉交互集成)Stamen Tiles(Stamen瓦片地图)Synthetic Lines(合成线)Street Labels(路线标注-沿路径轨迹)Teleporti...

2020-01-11 21:50:48 109

原创 Openlayers6 Examples学习笔记(7)

文章目录View Min-Zoom(自适应最小缩放层级)Modify Features(修改矢量要素交互)Moveend Event(地图移动结束事件)Mouse Position(鼠标位置控件)Navigation Controls(缩放至固定范围控件)Overview Map Control(鹰眼地图控件)Magnify(地图放大镜)Preload Tiles(预加载地图)自定义多边形样式Ra...

2020-01-11 18:14:34 164

原创 Openlayers6 Examples学习笔记(6)

文章目录Interaction Options(互动选项)Limited Layer Extent(限制图层范围)Layer Spy(地图探查)Layer Swipe(卷帘地图)Layer Zoom Limits(图层缩放限制)Localized OpenStreetMap(本地化的OSM)Layer Z-Index(图层的Z-Index)LineString Arrows(绘制带有箭头的线)Ma...

2020-01-11 17:23:12 433

原创 Openlayers6 Examples学习笔记(5)

文章目录View Animation(视图动画)GPX DataMap Graticule(地图网格)Earthquakes Heatmap(地震震级热力图)Hit ToleranceIcon Colors(自定义图片颜色)Vector Layer Hit Detection(矢量图层高亮)Icon Symbolizer(图标符号)Vector Image Layer(图层高亮)GeoJSON(加...

2020-01-11 16:50:14 287

原创 Openlayers6 Examples学习笔记(4)

文章目录turf.jsturf.jsfetch请求在线数据显示turf.js与OpenLayers 集成的示例。turf.js函数along用于在街道上每200米显示一个标记。本示例使用的lineDistance函数在高版本turf中已经不再使用,此处,直接通过script标签引入,若npm安装,需要注意版本号。import 'ol/ol.css';import Map from...

2020-01-11 11:26:06 469

原创 Openlayers6 Examples学习笔记(3)

文章目录EPSG:4326Geographic Editing(地理要素编辑)EPSG:4326创建单位为度的比例尺将视图的坐标系统设置为EPSG:4326(默认是EPSG:3857——Web 墨卡托投影)import ‘ol/ol.css’;import Map from ‘ol/Map’;import View from ‘ol/View’;import {defaults a...

2020-01-08 00:10:29 268

原创 Openlayers6 Examples学习笔记(2)

Tiled ArcGIS MapServer笔记:加载ArcGIS Server发布的瓦片服务import 'ol/ol.css';import Map from 'ol/Map';import View from 'ol/View';import TileLayer from 'ol/layer/Tile';import {OSM, TileArcGISRest} from 'ol...

2020-01-07 13:32:54 234

原创 Openlayers6 Examples学习笔记(1)

Bing Maps笔记:通过Map实例的layers属性,一次性加载多个图层,默认设为visible为false通过TileLayer实例的setVisible()方法来动态控制某个图层的显示TileLayer实例的preload属性表示预加载,默认值为0代码:import 'ol/ol.css';import Map from 'ol/Map';import View fro...

2020-01-06 23:44:55 1299

原创 高德地图 数据可视化JS API示例学习笔记(2)——图标点 IconLayer

天气预报图形标记 - 天气预报。通过设置 source 来指定图片的链接地址或者 base64URL 字符串。// 天气图标 var pngs = ['baoyu', 'qing', 'daxue', 'duoyun', 'wu', 'wumai', 'yun']; var map = new AMap.Map('container', { showIndoo...

2020-01-01 17:48:31 219

原创 高德地图 数据可视化JS API示例学习笔记(1)——基本功能

可视化图层创建使用 RoundPointLayer 点图层,绘制圆形点标记。<script src="//a.amap.com/Loca/static/mock/districts.js"></script> <script> var map = new AMap.Map('container', { mapS...

2020-01-01 17:26:32 665

原创 高德地图 Web JS API UI组件示例学习笔记(10)——标注列表

完整示例使用MarkerList实现标注列表的完整示例。美食数据的json右侧POI列表<!-- poi列表 --><div id="panel" class="scrollbar1"> <ul id="myList"> </ul></div>按钮列表设置自定义属性data-path、data-eval、d...

2020-01-01 16:41:45 106

原创 高德地图 Web JS API UI组件示例学习笔记(9)——行政区划聚合(二)

排除部分区划使用DistrictCluster排除部分区划。在创建DistrictCluster实例时,通过excludedAdcodes属性,排除掉部分区划。function initPage(DistrictCluster, $) { var distCluster = new DistrictCluster({ map: map, //所属的地图实例 ...

2020-01-01 11:27:07 72

原创 高德地图 Web JS API UI组件示例学习笔记(8)——行政区划聚合(一)

区划聚合使用DistrictCluster实现按照行政区划聚合大量点信息的展示。function initPage(DistrictCluster, $) { var distCluster = new DistrictCluster({ map: map, //所属的地图实例 zIndex: 11, getPosition: fun...

2020-01-01 10:42:47 169

原创 高德地图 Web JS API UI组件示例学习笔记(7)——拖拽选址

拖拽选址使用PositionPicker组件实现拖拽地图或者拖拽Marker选址。AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) { var map = new AMap.Map('container', { zoom: 16, // 关闭鼠标滚轮缩放地图 ...

2019-12-29 22:57:53 78

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除