https://3gimg.qq.com/lightmap/v1/wxmarker/index.html?marker=coord:30.036977,121.154534;title:余姚市政府;addr:宁波市余姚市北兰江路1号
天地图: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(国家大地坐标系)
版本 | 参考手册 | 示例中心 |
JS API v2 | 参考手册 | 示例中心 |
JS API v1 | 参考手册 | 示例中心 |
更多:坐标获取
坐标系:GCJ-02(火星坐标、国测局坐标系)
控制台: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(火星坐标、国测局坐标系)
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
类参考: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);
百度地图称之为地面叠加层(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);
核心文件路径:/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 | 请求参数 |
|
headers |
自定义请求的头 |
|
map | 数据地图,作用是对返回的数据进行整理和定位 |
|
layout:
属性 | 功能 | 值 |
theme | 主题 | 默认 default |
class | 包裹的 CSS 样式 | |
scroll | 在需要时显示横向或纵向滚动条 | 默认 false |
height | 表格高度 | 默认 null |
minHeight | 表格最小高度 | 默认 null |
footer | 是否显示表格底部 | 默认 false |
header | 是否显示表头 | 默认 true |
customScrollbar | 自定义的滚动条 | 默认 true |
spinner |
Loading 样式 |
|
icons | 表格中的 icon |
|
sortable | 是否支持按列排序 | 默认 true |
resizable |
是否支持鼠标拖动改变列宽 | 默认 false |
filterable | 在列中过滤 | 默认 false |
pagination |
显示分页信息 | 默认 true |
editable |
行内编辑 | 默认 false |
columns |
列 | 见本文下方 |
search |
搜索 |
|
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 行,简体中文示例:
|
extensions |
暂时没有找到对字符串内容进行自动 HTML 编码的属性,这可能带来 XSS 攻击风险,在 remote 方式中必须在服务端预先 HtmlEncode。即使在 layout.columns.template 中进行处理也是无济于事,恶意代码会在 ajax 加载完成后立即执行。
方法和事件:待完善。
更多信息请查询官方文档:https://keenthemes.com/keen/?page=docs§ion=html-components-datatable
// 控制组件
map.addControl(new T.Control.MapType());
// 切换到“地图”视图
map.setMapType(TMAP_NORMAL_MAP);
// 切换到“卫星”视图
map.setMapType(TMAP_SATELLITE_MAP);
// 切换到“卫星混合”视图
map.setMapType(TMAP_HYBRID_MAP);
百度地图 | 天地图 | |
初始化地图 | 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) |
文本标注 |
|
|
设置文本标注样式 | setStyle(styles: Object) | 每个样式使用单独的 set 方法实现 |
图像标注 |
|
|
为图像标注添加文本标注 | Marker.setLabel(label: Label) | 无。 可借用 title(鼠标掠过显示)属性来实现,并通过 Marker.options.title 来获取值 |
从图像标注获取坐标点 | Point = Marker.getPosition(); | LngLat = Marker.getLngLat(); |
绘制折线 |
|
|
绘制多边形 |
|
|
设置多边形的点数组 | Polygon.setPath(points: Array<Point>) | Polyline.setLngLats(lnglats: Array<LngLat>) |
设置地图视野 | Map.setViewport(view: Array<Point> | Viewport, viewportOptions: ViewportOptions) | Map.setViewport(view: Array<LngLat>) |
在图表页上显示测量值
如果您有 Visio 标准版,可以通过使用字段,链接到形状的高度和宽度属性来显示形状的尺寸。有关使用域的详细信息,请参阅使用字段来保持当前显示的信息。
如果您有 Visio 专业版,您可以使用尺寸形状以显示大小。尺寸形状显示他们正在粘附到,并且原始形状调整文字时自动更新该形状的大小。
尺寸形状包含在一些模板内,并可以在任何模板打开尺寸度量模具。
若要打开尺寸度量模具
在“形状”窗口中,单击“更多形状”。
指向其他 Visio 方案,,然后单击尺寸度量-建筑或尺寸度量-工程。
将尺寸形状拖动到要测量的形状,然后将尺寸线形状的端点粘附到要测量的点。
注意: 若要更改度量单位,右键单击尺寸形状,然后单击快捷菜单上的精度和单位。
示例
如果您有 Visio 专业版,请按下列步骤将指导您如何使用尺寸形状的示例。
使用尺寸形状 (示例)
单击文件选项卡,单击新建,单击类别,单击地图和平面布置图,然后双击家居规划。
单击庭园附属设施模具的标题栏和混凝土通道形状拖到绘图页。
您可能需要滚动以找到该模具或其他人的模具下的列表。
拖动手柄以扩大此混凝土通道形状上。
单击尺寸度量-建筑模具的标题栏并将水平形状拖到绘图页上通道形状上方。
如果看不到此列表中的模具,请按照上述过程,以打开尺寸度量模具中的说明进行操作。
请将形状手柄右侧的水平尺寸形状拖到通道形状的右边缘,直至绿色框中显示指示形状粘附在一起。
将水平形状左侧的形状手柄拖到通道形状的左边缘。
拖动黄色菱形 ( ),拖移到通道上方的位置右侧以便尺寸线不会遮住通道形状。