# 图层拾取
mapgis-3d-popup-mixin
# 行为
卡片 | 图文关联 |
---|---|
![]() | ![]() |
# 属性
# enablePopup
- 类型:
Boolean
- 非侦听属性
- 描述: 是否开启 popup 弹窗
# popupOptions
- 类型:
Object
- 非侦听属性
- 描述: popup 弹窗时的配置参数,popupOptions 对象中 title 指弹窗的标题,展示 geojson 数据中的某一个字段属性,fields 展示列表,由传参者决定展示哪些字段值
- 格式:
eg: popupOptions: { popupType: 'table', // table, card, rich-text title: "name", fields: ["acroutes", "adcode"] }
属性表格 (table) | 卡片 (card) | 图文关联 (rich-text) |
---|---|---|
![]() | ![]() | ![]() |
图文关联
要素格式 当需要使用图文关联的能力的时候,中间交换格式如下
- 标准的GeoJSON-Feature { geometry: {},
properties
: {} } 格式参考 (opens new window) - 包含属性的对象 {
properties
: {}}
属性约定
properties
必须针对一下类型的字段约定
- 文本
description
文字或者富文本格式- 文字 String 类型字符串
- 富文本类型 字符串
{ "description": "这是一段文字(富文本)说明" }
- 图片
images
- 单张图片用字符串
String
表示, 如: "http://develop.smaryun.com/static/assets/gallery/m3d.png" - 多张图片用数组
Array<String>
表示, 如: ['m3d.png', 'm3d.png']
{ "images" : "http://develop.smaryun.com/static/assets/gallery/m3d.png" }
- 单张图片用字符串
- 媒体
media
- media.type 媒体类型
mp4
flv
m3u8
- media.uri
http://develop.smaryun.com/static/data/client-analysis/媒体2.mp4
{ "media" : { "type" :"mp4", "uri": "http://develop.smaryun.com/static/data/client-analysis/媒体2.mp4" } }
- media.type 媒体类型
- 表格
chart
待实现
# enableTips
- 类型:
Boolean
- 非侦听属性
- 描述: 是否开启 tooltip 弹窗
# tipsOptions
类型:
Object
非侦听属性
描述: tooltip 弹窗时的配置参数,tipsOptions 对象中 title 指弹窗的标题,展示 geojson 数据中的某一个字段属性,fields 展示列表,由传参者决定展示哪些字段值
格式:
eg: tipsOptions: { title: "name", fields: ["acroutes", "adcode"] }
# customPopup
- 类型:
Function
- 描述: JSX 风格的自定义 popup 样式内容, (features) => {}, features 为选中或者点击的样式
- 详情请看下面的示例
- 示例
<template>
<mapgis-web-scene>
<mapgis-geojson-layer v-bind="{ ...geojson }" />
</mapgis-web-map>
</template>
<script>
export default {
name: "custom-popup",
props: {
msg: String
},
watch: {
center: function(next) {
this.rightmap && this.rightmap.setCenter(next);
}
},
data() {
return {
geojson: {
baseUrl: `http://develop.smaryun.com/static/data/geojson/省会城市.geojson`,
enablePopup: true,
enableTips: true,
layerStyle: new PointStyle({
radius: 25000,
color: "#ffff00",
outlineColor: "#ff0000",
outlineWidth: 2.5,
}),
highlightStyle: {
point: new PointStyle({
radius: 45000,
color: "#ff0000",
outlineColor: "#ffffff",
outlineWidth: 2.5,
}),
line: new LineStyle({
width: 6,
color: "#000000",
shadow: new Shadow({ blur: 6, color: "#ff0000" }),
outlineColor: "#ff0000",
outlineWidth: 8,
}),
polygon: new FillStyle({ color: "#ff0000", opacity: 0.7 }),
},
customPopup: (features) => (
<mapgis-ui-list class="jsx-custom-popup" item-layout="horizontal">
{features.map((feature) => {
return (
<mapgis-ui-list-item>
<mapgis-ui-div
title={feature.title}
style={{ width: "100%" }}
>
{Object.keys(feature.properties).map((p) => {
return (
<mapgis-ui-row>
<mapgis-ui-col span={8}>{p}</mapgis-ui-col>
<mapgis-ui-col span={16}>
{feature.properties[p]}
</mapgis-ui-col>
</mapgis-ui-row>
);
})}
</mapgis-ui-div>
</mapgis-ui-list-item>
);
})}
</mapgis-ui-list>
),
customTips: features => {
if (features.length <= 0) {
return <div class="custom-tips">未选中</div>;
} else {
return (
<mapgis-ui-div class="custom-tips" title={features[0]}>
{Object.keys(features[0].properties).map(p => {
return (
<mapgis-ui-row>
<mapgis-ui-col span={8}>{p}</mapgis-ui-col>
<mapgis-ui-col span={16}>
{features[0].properties[p]}
</mapgis-ui-col>
</mapgis-ui-row>
);
})}
</mapgis-ui-div>
);
}
}
}
};
},
methods: {
handleRightMap(e) {
console.log("e", e);
this.rightmap = e.map;
}
}
};
</script>
<style>
.map {
height: 100vh;
width: 100vw;
}
.custom-popup {
position: absolute;
z-index: 2000;
height: 240px;
overflow-y: scroll;
}
</style>
# customTips
- 类型:
Function
- 描述: JSX 风格的自定义 tips 样式内容, (features) => {}, features 为选中或者点击的样式
- 详情请看下面的示例
- 示例
<template>
<mapgis-web-scene>
<mapgis-geojson-layer v-bind="{ ...geojson }" />
</mapgis-web-map>
</template>
<script>
export default {
name: "custom-popup",
props: {
msg: String
},
watch: {
center: function(next) {
this.rightmap && this.rightmap.setCenter(next);
}
},
data() {
return {
geojson: {
baseUrl: `http://develop.smaryun.com/static/data/geojson/省会城市.geojson`,
enablePopup: true,
enableTips: true,
layerStyle: new PointStyle({
radius: 25000,
color: "#ffff00",
outlineColor: "#ff0000",
outlineWidth: 2.5,
}),
highlightStyle: {
point: new PointStyle({
radius: 45000,
color: "#ff0000",
outlineColor: "#ffffff",
outlineWidth: 2.5,
}),
line: new LineStyle({
width: 6,
color: "#000000",
shadow: new Shadow({ blur: 6, color: "#ff0000" }),
outlineColor: "#ff0000",
outlineWidth: 8,
}),
polygon: new FillStyle({ color: "#ff0000", opacity: 0.7 }),
},
customPopup: (features) => (
<mapgis-ui-list class="jsx-custom-popup" item-layout="horizontal">
{features.map((feature) => {
return (
<mapgis-ui-list-item>
<mapgis-ui-div
title={feature.title}
style={{ width: "100%" }}
>
{Object.keys(feature.properties).map((p) => {
return (
<mapgis-ui-row>
<mapgis-ui-col span={8}>{p}</mapgis-ui-col>
<mapgis-ui-col span={16}>
{feature.properties[p]}
</mapgis-ui-col>
</mapgis-ui-row>
);
})}
</mapgis-ui-div>
</mapgis-ui-list-item>
);
})}
</mapgis-ui-list>
),
customTips: features => {
if (features.length <= 0) {
return <div class="custom-tips">未选中</div>;
} else {
return (
<mapgis-ui-div class="custom-tips" title={features[0]}>
{Object.keys(features[0].properties).map(p => {
return (
<mapgis-ui-row>
<mapgis-ui-col span={8}>{p}</mapgis-ui-col>
<mapgis-ui-col span={16}>
{features[0].properties[p]}
</mapgis-ui-col>
</mapgis-ui-row>
);
})}
</mapgis-ui-div>
);
}
}
}
};
},
methods: {
handleRightMap(e) {
console.log("e", e);
this.rightmap = e.map;
}
}
};
</script>
<style>
.map {
height: 100vh;
width: 100vw;
}
.custom-popup {
position: absolute;
z-index: 2000;
height: 240px;
overflow-y: scroll;
}
</style>