与“JS”相关的文章 - 𝓍𝑜𝓎𝑜𝓏𝑜.𝓃𝑒𝓉

JavaScript API GL v1.0 基于 WebGL 开发，对于用户的浏览器环境有兼容性要求。需要完整支持 WebGL 的现代浏览器来支持渲染。对于 WebGL 支持欠佳的浏览器会降级为 Canvas 绘制，若仍然存在兼容性问题，则会降级到瓦片图渲染。确保不同浏览器环境的用户都可以完成地图的基本渲染。

参考：http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/usage

xoyozo 4 年前

7,490

天地图如何添加/修改图片覆盖物

类参考：http://lbs.tianditu.gov.cn/api/js4.0/opensource/class/ImageOverlay.html

资源引用：http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.js

压缩文件：http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/ImageOverlay.min.js

示例：http://lbs.tianditu.gov.cn/api/js4.0/opensource/demo/ImageOverlay.html

添加图片覆盖物：

map = new T.Map('mapDiv');
map.centerAndZoom(new T.LngLat(116.390750, 39.916980), zoom);
var bd = new T.LngLatBounds(
    new T.LngLat(116.385360, 39.911380),
    new T.LngLat(116.395940, 39.921400));
img = new T.ImageOverlay("http://lbs.tianditu.gov.cn/images/openlibrary/gugong.jpg", bd, {
    opacity: 1,
    alt: "故宫博物院"
});
map.addOverLay(img);

修改图片地址：

img.setImageUrl(imgBase64);

xoyozo 4 年前

5,067

百度地图如何添加图片覆盖物

百度地图称之为地面叠加层（GroundOverlay）

类参考：https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html#a3b18

示例DEMO：http://lbsyun.baidu.com/jsdemo.htm#gImageGround

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18);
map.enableScrollWheelZoom(true);
map.setTilt(45);
map.setDisplayOptions({
    poiText: false,  // 隐藏poi标注
    poiIcon: false,  // 隐藏poi图标
    building: false  // 隐藏楼块
});


var pStart = new BMapGL.Point(117.19635, 36.24093);
var pEnd = new BMapGL.Point(117.20350, 36.24764);
var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
var imgOverlay = new BMapGL.GroundOverlay(bounds, {
    type: 'image',
    url: '/jsdemo/img/shouhuimap.png',
    opacity: 1
});
map.addOverlay(imgOverlay);

xoyozo 4 年前

6,039

Find 结果不能通过导航属性（外键）来获取关联表的内容？

先上代码：

var db = new db_picContext();
var u = db.DtUser.Find(338);
int a = u.DtProject.Count();
int b = db.DtProject.Count(c => c.UploadUserId == u.Id);
return Json(new { a, b });

运行结果：

{"a":0,"b":2}

是不是说明 Find 结果 u 并不能通过导航属性（外键）来获取关联表的内容？

引擎：Pomelo.EntityFrameworkCore.MySql

xoyozo 4 年前

2,450

Substring 简写，使用范围运算符

示例：

string s = "123456789";

return Json(new
{
    // 12
    a1 = s.Substring(0, 2),
    a2 = s[0..2],
    a3 = s[..2],

    // 234
    b1 = s.Substring(1, 3),
    b2 = s[1..4],

    // 23456789
    c1 = s.Substring(1),
    c2 = s.Substring(1, s.Length - 1),
    c3 = s[1..],
    c4 = s[1..9],

    // 123456
    d1 = s.Substring(0, s.Length - 3),
    d2 = s[0..^3],
    d3 = s[..^3],

    // 234567
    e1 = s.Substring(1, s.Length - 3),
    e2 = s[1..^2],
});

Substring(n, m) 取从索引第 n 个字符开始，连续 m 个长度的字符；

范围运算符 [n..m] 取从索引第 n 个字符至索引第 m 个字符前的字符串；

范围运算符 [n..^m] 取从索引第 n 个字符至索引倒数第 m 个字符前的字符串；（在原字符串前再拼接一个同样的字符串，往前数索引更容易理解）

在范围运算符中，当 n 为 0 时可以省略，当 m 为原字符串长度时可以省略。

xoyozo 4 年前

7,375

ASP.NET 5.0 / ASP.NET Core 部署百度编辑器（UEditor）之 UEditorNetCore

通过 nuget 安装 UEditorNetCore

从 UEditor 官网下载最新的包 ueditorx_x_x_x-utf8-net.zip

解压包，并复制到项目的 wwwroot/lib 目录下，删除 net 目录。

根据 UEditorNetCore 官方的使用说明进行操作

步骤中，控制器 UEditorController 接替原 controller.ashx 的功能，用于统一处理上传逻辑

原 config.json 复制到项目根目录，用于配置上传相关设置（若更改文件名和路径在 services.AddUEditorService() 中处理）。

个人喜欢将 xxxPathFormat 值改为：upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}，方便日后迁移附件后进行批量替换。

记得配置 catcherLocalDomain 项。

上传相关的身份验证和授权控制请在 UEditorController 中处理，如：

public void Do()
{
    if (用户未登录) { throw new System.Exception("请登录后再试"); }
    _ue.DoAction(HttpContext);
}

如果图片仅仅上传到网站目录下，那么这样配置就结束了，如果要上传到阿里云 OSS 等第三方图床，那么继续往下看。

因 UEditorNetCore 虽然实现了上传到 FTP 和 OSS 的功能，但未提供配置相关的账号信息的途径，所以只能（1）重写 action，或（2）下载 github 的源代码，将核心项目加入到您的项目中进行修改。

重写 action 不方便后期维护，这里记录修改源码的方式。

将源码改造为可配置账号的上传到 OSS 的功能，具体步骤如下：

将 Consts.cs 从项目中排除。
打开 Handlers/UploadHandler.cs，找到 UploadConfig 类，将
FtpUpload 改为 OssUpload，
FtpAccount 改为 OssAccessKeyId，
FtpPwd 改为 OssAccessKeySecret，
FtpIp 改为 OssAccessEndpoint，
再添加一个属性 OssBucketName。
打开 Handlers/UploadHandler.cs，找到 Process() 方法，
将 UploadConfig.FtpUpload 改为 UploadConfig.OssUpload，
将 Consts.AliyunOssServer.* 改为 UploadConfig.Oss*。
打开 Handlers/CrawlerHandler.cs，找到 Fetch() 方法，
将 Config.GetValue<bool>("catcherFtpUpload") 改为 Config.GetValue<bool>("OssUpload")，
将 Consts.AliyunOssServer.* 改为 Config.GetString("Oss*")。

打开 UEditorActionCollection.cs，找到 UploadImageAction，将

FtpUpload = Config.GetValue<bool>("imageFtpUpload"),
FtpAccount = Consts.ImgFtpServer.account,
FtpPwd = Consts.ImgFtpServer.pwd,
FtpIp = Consts.ImgFtpServer.ip,

替换为

OssUpload = Config.GetValue<bool>("OssUpload"),
OssAccessKeyId = Config.GetString("OssAccessKeyId"),
OssAccessKeySecret = Config.GetString("OssAccessKeySecret"),
OssAccessEndpoint = Config.GetString("OssAccessEndpoint"),
OssBucketName = Config.GetString("OssBucketName"),

其余 3 个 Action（UploadScrawlAction、UploadVideoAction、UploadFileAction）按同样的方式修改。

在所有创建 UploadHandler 对象时补充添加 SaveAbsolutePath 属性。

打开 config.json，添加相关配置项（注：配置文件中的 *FtpUpload 全部废弃，统一由 OssUpload 决定）
```
"OssUpload": true,
"OssAccessEndpoint": "",
"OssAccessKeyId": "",
"OssAccessKeySecret": "",
"OssBucketName": "",
```
将 xxxUrlPrefix 的值改为 OSS 对应的 CDN 网址（以 / 结尾，如：//cdn.xoyozo.net/）。

其它注意点：

若使用 UEditorNetCore github 提供的源代码类库代替 nuget，且使用本地存储，那么需要将 Handlers 目录中与定义 savePath 相关的代码（查找 var savePath）替换成被注释的行

xoyozo 4 年前

4,633

Metronic 中的 KTDatatable

核心文件路径：/theme/html/demo*/src/js/components/core.datatable.js

所有参数的默认值见该文件 3369 行起。

data：

属性	功能	值
type	数据源类型	local / remote
source	数据源	链接或对象（见下方）
pageSize	每页项数	默认 10
saveState	刷新、重新打开、返回时仍保持状态	默认 true
serverPaging	是否在服务端实现分页	默认 false
serverFiltering	是否在服务端实现筛选	默认 false
serverSorting	是否在服务端实现排序	默认 false
autoColumns	为远程数据源启用自动列功能	默认 false
attr

data.source：

属性	功能	值
url	数据源地址
params	请求参数	`query: { }`
headers	自定义请求的头	`{ 'x-my-custom-header': 'some value', 'x-test-header': 'the value' }`
map	数据地图，作用是对返回的数据进行整理和定位	`function (raw) { console.log(raw) // sample data mapping var dataSet = raw; if (typeof raw.data !== 'undefined') { dataSet = raw.data; } return dataSet; }`

layout：

属性	功能	值
theme	主题	默认 default
class	包裹的 CSS 样式
scroll	在需要时显示横向或纵向滚动条	默认 false
height	表格高度	默认 null
minHeight	表格最小高度	默认 null
footer	是否显示表格底部	默认 false
header	是否显示表头	默认 true
customScrollbar	自定义的滚动条	默认 true
spinner	Loading 样式	`{ overlayColor: '#000000', opacity: 0, type: 'loader', state: 'primary', message: true, }`
icons	表格中的 icon	`{ sort: { asc: 'flaticon2-arrow-up', desc: 'flaticon2-arrow-down' }, pagination: { next: 'flaticon2-next', prev: 'flaticon2-back', first: 'flaticon2-fast-back', last: 'flaticon2-fast-next', more: 'flaticon-more-1', }, rowDetail: { expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right' }, }`
sortable	是否支持按列排序	默认 true
resizable	是否支持鼠标拖动改变列宽	默认 false
filterable	在列中过滤	默认 false
pagination	显示分页信息	默认 true
editable	行内编辑	默认 false
columns	列	见本文下方
search	搜索	`{ // 按回车键确认 onEnter: false, // 文本内容 input: null, // 搜索延时 delay: 400, // 键名 key: null }`

layout.columns：

属性	功能	解释
field	字段名	对应 JSON 的属性名，点击表头时作为排序字段名
title	表头名	显示在表格头部
sortable	默认排序方式	可选：'asc' / 'desc'
width	单元格最小宽度	值与 CSS 值一致，填数字时默认单位 px
type	数据类型	'number' / 'date' 等，与本地排序有关
format	数据格式化	例格式化日期：'YYYY-MM-DD'
selector	是否显示选择框	布尔值或对象，如：{ class: '' }
textAlign	文字对齐方式	'center'
overflow	内容超过单元格宽度时是否显示	'visible'：永远显示
autoHide	自适应显示/隐藏	布尔值
template	用于显示内容的 HTML 模板	function(row) { return row.Id; }
sortCallback	排序回调	自定义排序方式，参 local-sort.js

其它：

属性功能解释

translate

翻译

参 core.datatable.js 3512 行，简体中文示例：

translate: {
    records: {
        processing: '加载中...',
        noRecords: '没有找到相关内容',
    },
    toolbar: {
        pagination: {
            items: {
                default: {
                    first: '首页',
                    prev: '前一页',
                    next: '后一页',
                    last: '末页',
                    more: '更多',
                    input: '请输入跳转页码',
                    select: '设置每页显示项数',
                },
                info: '当前第 {{start}} - {{end}} 项 共 {{total}} 项',
            },
        },
    },
},

extensions

暂时没有找到对字符串内容进行自动 HTML 编码的属性，这可能带来 XSS 攻击风险，在 remote 方式中必须在服务端预先 HtmlEncode。即使在 layout.columns.template 中进行处理也是无济于事，恶意代码会在 ajax 加载完成后立即执行。

方法和事件：待完善。

更多信息请查询官方文档：https://keenthemes.com/keen/?page=docs&section=html-components-datatable

xoyozo 4 年前

4,723

大家在看

最新发布

查询 / 检测

编程

前端

行业

本站 API

博客 (115)

大家在看

最新发布