博客 (13)

https://3gimg.qq.com/lightmap/v1/wxmarker/index.html?marker=coord:30.036977,121.154534;title:余姚市政府;addr:宁波市余姚市北兰江路1号

xoyozo 3 年前
2,653

天地图https://map.tianditu.gov.cn/

开放平台:http://lbs.tianditu.gov.cn/

控制台:https://console.tianditu.gov.cn/

版本 类参考 代码示例
JavaScript API 4.0 类参考 代码示例
JavaScript API 4.0 开源库 资源引用、类参考及示例

若不显示地图,请添加域名白名单。

坐标系:CGCS 2000(国家大地坐标系)


高德地图https://www.amap.com/

开放平台:https://lbs.amap.com/

控制台:https://console.amap.com/

版本 参考手册 示例中心
JS API v2 参考手册 示例中心
JS API v1 参考手册 示例中心

更多:坐标获取

坐标系:GCJ-02(火星坐标、国测局坐标系)


百度地图https://map.baidu.com/

开放平台:http://lbsyun.baidu.com/

控制台:http://lbsyun.baidu.com/apiconsole/center

版本 类参考 示例DEMO
JavaScript API GL 类参考 示例DEMO
JavaScript API v3.0 类参考 示例DEMO

更多:拾取坐标系统

坐标系:BD-09(百度坐标)


腾讯地图https://map.qq.com/

PC端于2022年11月11日停止服务

开放平台(腾讯位置服务):https://lbs.qq.com/

控制台:https://lbs.qq.com/dev/console

版本 参考手册 示例
JavaScript API GL 参考手册 示例

坐标系:GCJ-02(火星坐标、国测局坐标系)


附:常见地图经纬度坐标系及转换

xoyozo 3 年前
4,618

JavaScript API GL v1.0 是基于 WebGL 全新开发的地图 API 接口。为了方便开发者迁移升级,大部份接口向下兼容。目前 GL v1.0 版本接口包含了 3D 地图的渲染、基本控件、覆盖物。在后面的版本中,将对原 v2.0、v3.0 中的核心功能进行补全。

JavaScript API GL 版本对手机性能要求较高,不建议在移动端调用。若涉及移动端 JS 服务调用,请使用 JavaScript API v3.0 版本。

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

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

xoyozo 3 年前
6,101

类参考: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 3 年前
3,666

百度地图称之为地面叠加层(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 3 年前
4,168

核心文件路径:/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 3 年前
4,080
// 控制组件
map.addControl(new T.Control.MapType());
// 切换到“地图”视图
map.setMapType(TMAP_NORMAL_MAP);
// 切换到“卫星”视图
map.setMapType(TMAP_SATELLITE_MAP);
// 切换到“卫星混合”视图
map.setMapType(TMAP_HYBRID_MAP);


xoyozo 4 年前
6,040

百度地图天地图
初始化地图var map = new BMap.Map("allmap");var map = new T.Map("allmap");
将覆盖物添加到地图addOverlay(overlay: Overlay)addOverLay(overlay:OverLay)
从 Map 的 click 事件中获取坐标点

map.addEventListener("click", function (e) {

    Point = e.point;

}

map.addEventListener("click", function (e) {

    LngLat = e.lnglat;

}

坐标点new BMap.Point(lng: Number, lat: Number)new T.LngLat(lng: Numbe, lat: Number)
像素点new BMap.Pixel(x: Number, y: Number)new T.Point(x: Number, y: Number)
文本标注
new BMap.Label(content: String, {
    offset: Size,
    position: Point
})
new T.Label({
    text: string, 
    position: LngLat, 
    offset: Point
})
设置文本标注样式
setStyle(styles: Object)每个样式使用单独的 set 方法实现
图像标注
new BMap.Marker(Point, {
    offset: Size,
    icon: Icon,
    enableMassClear: Boolean,
    enableDragging: Boolean,
    enableClicking: Boolean,
    raiseOnDrag: Boolean,
    draggingCursor: String,
    rotation: Number,
    shadow: Icon,
    title: String
})
new T.Marker(LngLat, {
    icon: Icon,
    draggable: boolean,
    title: string,
    zIndexOffset: number,
    opacity: number
})
为图像标注添加文本标注Marker.setLabel(label: Label)

无。

可借用 title(鼠标掠过显示)属性来实现,并通过 Marker.options.title 来获取值

从图像标注获取坐标点Point = Marker.getPosition();
LngLat = Marker.getLngLat();
绘制折线
new BMap.Polyline(points: Array<Point>, {
    strokeColor: String,
    strokeWeight: Number,
    strokeOpacity: Number,
    strokeStyle: String,
    enableMassClear: Boolean,
    enableEditing: Boolean,
    enableClicking: Boolean,
    icons: Array<IconSequence>
})
new T.Polyline(points:Array<LngLat>, {
    color: string,
    weight: number,
    opacity: number,
    lineStyle: string
})
绘制多边形
new BMap.Polygon(points: Array<Point>, {
    strokeColor: String,
    fillColor: String,
    strokeWeight: Number,
    strokeOpacity: Number,
    fillOpacity: Number,
    strokeStyle: String,
    enableMassClear: Boolean,
    enableEditing: Boolean,
    enableClicking: Boolean
})
new T.Polygon(points:Array<LngLat>,{
    color: string,
    weight: number,
    opacity: number,
    fillColor: String,
    fillOpacity: number,
    lineStyle: string
})
设置多边形的点数组Polygon.setPath(points: Array<Point>)Polyline.setLngLats(lnglats: Array<LngLat>)
设置地图视野Map.setViewport(view: Array<Point> | Viewport, viewportOptions: ViewportOptions)Map.setViewport(view: Array<LngLat>)
xoyozo 5 年前
4,743

例:http://api.map.baidu.com/marker?location=纬度,经度&title=标题&content=介绍&output=html

可用于静态图超链接。

xoyozo 6 年前
3,517

在图表页上显示测量值

如果您有 Visio 标准版,可以通过使用字段,链接到形状的高度和宽度属性来显示形状的尺寸。有关使用域的详细信息,请参阅使用字段来保持当前显示的信息

如果您有 Visio 专业版,您可以使用尺寸形状以显示大小。尺寸形状显示他们正在粘附到,并且原始形状调整文字时自动更新该形状的大小。

尺寸形状包含在一些模板内,并可以在任何模板打开尺寸度量模具。

若要打开尺寸度量模具

  1. 在“形状”窗口中,单击“更多形状”。

  2. 指向其他 Visio 方案,,然后单击尺寸度量-建筑尺寸度量-工程

  3. 将尺寸形状拖动到要测量的形状,然后将尺寸线形状的端点粘附到要测量的点。

注意: 若要更改度量单位,右键单击尺寸形状,然后单击快捷菜单上的精度和单位

带显示测量值的尺寸形状的隔间形状。

示例

如果您有 Visio 专业版,请按下列步骤将指导您如何使用尺寸形状的示例。

使用尺寸形状 (示例)

  1. 单击文件选项卡,单击新建,单击类别,单击地图和平面布置图,然后双击家居规划

  2. 单击庭园附属设施模具的标题栏和混凝土通道形状拖到绘图页。

    您可能需要滚动以找到该模具或其他人的模具下的列表。

  3. 拖动手柄以扩大此混凝土通道形状上。

  4. 单击尺寸度量-建筑模具的标题栏并将水平形状拖到绘图页上通道形状上方。

    如果看不到此列表中的模具,请按照上述过程,以打开尺寸度量模具中的说明进行操作。

  5. 请将形状手柄右侧的水平尺寸形状拖到通道形状的右边缘,直至绿色框中显示指示形状粘附在一起。

  6. 水平形状左侧的形状手柄拖到通道形状的左边缘。

  7. 拖动黄色菱形 ( 控制手柄 ),拖移到通道上方的位置右侧以便尺寸线不会遮住通道形状。


O
转自 Office 6 年前
15,309