14
This commit is contained in:
cansnow
@@ -0,0 +1,41 @@
|
||||
## 1.0.8（2025-06-05）
|
||||
##### 优化内容
|
||||
- 新增按照指定属性和值删除覆盖物
|
||||
- 新增覆盖物带箭头折线覆盖物、带箭头三次曲线覆盖物、不带箭头三次曲线覆盖物
|
||||
## 1.0.7（2025-04-29）
|
||||
##### 优化内容
|
||||
- 修改拖拽结束事件等待惯性结束后触发事件
|
||||
- 修改缩放事件结束后，返回`lon` `lat` `zoom`
|
||||
## 1.0.6（2025-04-29）
|
||||
##### bug修复
|
||||
- 修复方法setOption同时配置 zoom、center时，center不生效问题
|
||||
- 修复覆盖物infowindow设置offsetX、offsetY无效问题
|
||||
## 1.0.5（2025-04-23）
|
||||
##### 新增内容
|
||||
- 支持覆盖物点击事件，详情见文档
|
||||
- 支持启用/禁用地图拖拽、双击缩放、双指缩放、惯性拖拽，详情见文档
|
||||
- 新增文本覆盖物、信息窗口，详情见文档
|
||||
## 1.0.4（2025-04-11）
|
||||
##### 新增内容
|
||||
- 地图新增覆盖物，详情见文档
|
||||
- 标注添加默认图标
|
||||
## 1.0.3（2025-03-30）
|
||||
##### Bug修复
|
||||
- 修复对VUE2的兼容
|
||||
## 1.0.2（2025-03-17）
|
||||
##### Bug修复
|
||||
- 修复H5环境下的兼容性
|
||||
- 修复对VUE3的兼容
|
||||
- 修复控制台错误信息打印
|
||||
## 1.0.1（2025-03-14）
|
||||
##### 新增内容
|
||||
- 新增地图缩放事件
|
||||
- 新增多数属性同时设置接口
|
||||
- 新增可修改中心图标
|
||||
##### 优化内容
|
||||
- 优化地图拖拽事件回调中心位置
|
||||
- 优化标注可设置位置偏移
|
||||
- 优化交互
|
||||
## 1.0.0（2025-03-12）
|
||||
首发
|
||||
|
||||
@@ -0,0 +1,662 @@
|
||||
<template>
|
||||
<view class="ly-map-wrapper">
|
||||
<!-- 地图展示 -->
|
||||
<view :id="mapId" :config="config" :change:config="LyMap.init" :call="option" :change:call="LyMap.call"
|
||||
class="ly-map" />
|
||||
<!-- 中心图标 -->
|
||||
<image v-if="showCenterIcon" :src="centerIcon||defCenterIcon" class="ly-center-icon" />
|
||||
<!-- 定位图标 -->
|
||||
<view v-if="showLocationIcon" class="ly-location-icon" @click="onLocation">
|
||||
<image :src="locationIcon" class="icon" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import centerIcon from '../../static/ly-map/center.png';
|
||||
import locationIcon from '../../static/ly-map/location.png';
|
||||
|
||||
export default {
|
||||
// 接口参数
|
||||
props: {
|
||||
// 地图key
|
||||
mapKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 经纬度
|
||||
lonlat: {
|
||||
type: Array,
|
||||
default: () => ([111.668097, 40.825417]),
|
||||
},
|
||||
// 缩放
|
||||
zoom: {
|
||||
type: Number,
|
||||
default: 16,
|
||||
},
|
||||
// 是否显示中心定位图标
|
||||
showCenterIcon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 中心点图标
|
||||
centerIcon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// 是否显示用户定位图标
|
||||
showLocationIcon: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
// 数据定义
|
||||
data() {
|
||||
return {
|
||||
// 地图容器id
|
||||
mapId: this.genId(),
|
||||
// 调用渲染层
|
||||
option: {},
|
||||
// 地图配置（传递到render中的数据）
|
||||
config: {},
|
||||
// 调用渲染层队列
|
||||
event: [],
|
||||
// 事件处理定时器
|
||||
timer: null,
|
||||
// 中心图标
|
||||
defCenterIcon: centerIcon,
|
||||
// 定位图标
|
||||
locationIcon: locationIcon,
|
||||
}
|
||||
},
|
||||
// 挂载完成后
|
||||
mounted() {
|
||||
// 设置渲染数据
|
||||
this.config = {
|
||||
mapId: this.mapId,
|
||||
mapKey: this.mapKey,
|
||||
lonlat: this.lonlat,
|
||||
zoom: this.zoom,
|
||||
};
|
||||
},
|
||||
// 通用方法
|
||||
methods: {
|
||||
// 生成唯一ID
|
||||
genId() {
|
||||
let result = '';
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const charactersLength = characters.length;
|
||||
for (let i = 0; i < 30; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return Date.now() + result;
|
||||
},
|
||||
// 调用
|
||||
call() {
|
||||
if (this.timer) return;
|
||||
// 消费事件队列（生产者/消费者机制）
|
||||
this.timer = setInterval(() => {
|
||||
if (this.event.length) {
|
||||
this.option = this.event.shift();
|
||||
} else {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}, 10);
|
||||
},
|
||||
// 添加事件队列
|
||||
addEvent(name, data) {
|
||||
// #ifdef APP-PLUS
|
||||
// tips:由于采用监听option改变来调用方法，
|
||||
// 如果连续变化两次option，渲染层只会则监听到最后一次
|
||||
// 导致调用丢失，所以采用事件队列形式解决，稍微延时10ms
|
||||
// 等待渲染进程监听到option变化，在进行更改option
|
||||
// 从性能上，几乎无感可以放心使用
|
||||
const option = {
|
||||
id: this.genId(),
|
||||
name: `_${name}`,
|
||||
data
|
||||
};
|
||||
this.event.push(option);
|
||||
this.call();
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-PLUS
|
||||
this[`_${name}`] && this[`_${name}`](data);
|
||||
// #endif
|
||||
},
|
||||
// 设置
|
||||
setOption(option) {
|
||||
this.addEvent("setOption", option);
|
||||
},
|
||||
// 设置类型 0矢量地图 1卫星地图
|
||||
geoCoder(lng,lat,uuid) {
|
||||
this.addEvent("geoCoder", {
|
||||
lng,lat,uuid
|
||||
});
|
||||
},
|
||||
// 设置位置
|
||||
setCenter(lon, lat, zoom) {
|
||||
this.addEvent("setCenter", {
|
||||
lon,
|
||||
lat,
|
||||
zoom
|
||||
});
|
||||
},
|
||||
// 设置类型 0矢量地图 1卫星地图
|
||||
setType(type) {
|
||||
this.addEvent("setType", {
|
||||
type
|
||||
});
|
||||
},
|
||||
// 设置标注 marks:[{url, width, height, lon, lat}]
|
||||
setMarkers(markers = []) {
|
||||
this.addEvent("setMarkers", {
|
||||
markers
|
||||
});
|
||||
},
|
||||
// 在原有的情况下添加覆盖物
|
||||
addOvers(overs) {
|
||||
this.addEvent("addOvers", overs);
|
||||
},
|
||||
// 清除原有同类型的覆盖物，并重新创建
|
||||
setOvers(overs) {
|
||||
this.addEvent("setOvers", overs);
|
||||
},
|
||||
// 移除指定属性的覆盖物
|
||||
removeOvers(prop, value) {
|
||||
this.addEvent("removeOvers", {
|
||||
prop,
|
||||
value
|
||||
});
|
||||
},
|
||||
// 清除指定类型的覆盖物，不指定则清除所有
|
||||
clearOvers(type = "") {
|
||||
this.addEvent("clearOvers", type);
|
||||
},
|
||||
// 设置缩放
|
||||
setZoom(zoom) {
|
||||
this.addEvent("setZoom", {
|
||||
zoom
|
||||
});
|
||||
},
|
||||
// 设置是使能
|
||||
setEnable(option) {
|
||||
this.addEvent("setEnable", option);
|
||||
},
|
||||
// 重置地图
|
||||
resize() {
|
||||
this.addEvent("resize");
|
||||
},
|
||||
// 开始拖拽地图
|
||||
UserEvent(data) {
|
||||
this.$emit('onUserEvent',data);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<script module="LyMap" lang="renderjs">
|
||||
// 天地图接口
|
||||
const TDT_API = "https://api.tianditu.gov.cn/api?v=4.0&tk=";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 初始化配置数据
|
||||
_config: {},
|
||||
// 地图实例
|
||||
_mapInstance: {},
|
||||
// 注记
|
||||
_markerList: [],
|
||||
// 覆盖物
|
||||
_overs: {},
|
||||
// 地图事件
|
||||
_event: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init(newValue, oldValue, ownerInstance, instance) {
|
||||
// 防止重复渲染
|
||||
if (!Object.keys(newValue).length) {
|
||||
return;
|
||||
}
|
||||
this._config = newValue;
|
||||
// 初始化地图
|
||||
if (typeof window.LyMap === 'function') {
|
||||
this._createMap();
|
||||
} else {
|
||||
const script = document.createElement('script');
|
||||
script.src = TDT_API + newValue.mapKey;
|
||||
script.onload = this._createMap;
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
},
|
||||
// 通过监听call来调用渲染层方法
|
||||
call(newValue, oldValue, ownerInstance, instance) {
|
||||
if (this[newValue.name] && typeof this[newValue.name] === "function") {
|
||||
this[newValue.name](newValue.data);
|
||||
}
|
||||
},
|
||||
// 创建地图
|
||||
_createMap() {
|
||||
// 创建地图实例
|
||||
try {
|
||||
this._mapInstance = new T.Map(this._config.mapId);
|
||||
this._mapInstance.addEventListener('load', () => {
|
||||
this.$ownerInstance.callMethod('UserEvent',{type:'onMapLoad'});
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this._setCenter({
|
||||
lon: this._config.lonlat[0],
|
||||
lat: this._config.lonlat[1],
|
||||
zoom: this._config.zoom
|
||||
});
|
||||
}, 100);
|
||||
this._bindEvent();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
_geoCoder(lng,lat, uuid) {
|
||||
//创建对象
|
||||
const geocode = new T.Geocoder();
|
||||
geocode.getLocation(new T.LngLat(lng,lat), (res)=>{
|
||||
console.log(res.getStatus ());
|
||||
console.log(res.getMsg ());
|
||||
console.log(res.getAddress ());
|
||||
console.log(res.getAddressComponent ());
|
||||
console.log(res.getLocationLevel ());
|
||||
});
|
||||
return geocode;
|
||||
},
|
||||
// 绑定事件
|
||||
_bindEvent() {
|
||||
try {
|
||||
// 绑定开始移动事件
|
||||
this._event = {};
|
||||
var fn = ({type})=>{
|
||||
if(this._mapInstance==null)return;
|
||||
const center = this._mapInstance.getCenter();
|
||||
this.$ownerInstance.callMethod('UserEvent', {
|
||||
type,
|
||||
lng: center.getLng(),
|
||||
lat: center.getLat()
|
||||
});
|
||||
}
|
||||
//this._mapInstance.addEventListener('movestart', fn);
|
||||
this._mapInstance.addEventListener('move', fn);
|
||||
this._mapInstance.addEventListener('moveend', fn);
|
||||
this._mapInstance.addEventListener('zoomstart', fn);
|
||||
this._mapInstance.addEventListener('zoomend', fn);
|
||||
this._mapInstance.addEventListener('dragstart', fn);
|
||||
this._mapInstance.addEventListener('drag', fn);
|
||||
this._mapInstance.addEventListener('dragend', fn);
|
||||
this._mapInstance.addEventListener('touchstart', fn);
|
||||
this._mapInstance.addEventListener('touchmove', fn);
|
||||
this._mapInstance.addEventListener('touchend', fn);
|
||||
this._mapInstance.addEventListener('longpress', fn);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 卸载事件
|
||||
_unbindEvent() {
|
||||
const eventsKey = Object.keys(this._event);
|
||||
eventsKey.forEach(key => this._mapInstance.removeEventListener(key));
|
||||
this._event = null;
|
||||
},
|
||||
// 重置地图尺寸
|
||||
_resize() {
|
||||
try {
|
||||
this._mapInstance.checkResize && this._mapInstance.checkResize();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 设置选项
|
||||
_setOption(data) {
|
||||
data.type && this._setType(data);
|
||||
data.center && this._setCenter({
|
||||
...data.center,
|
||||
zoom: data.zoom
|
||||
});
|
||||
if (!data.center && data.zoom) this._setZoom(data);
|
||||
data.markers && this._setMarkers(data);
|
||||
data.overs && this.setOvers(data.overs);
|
||||
},
|
||||
// 设置中心点
|
||||
_setCenter(data) {
|
||||
try {
|
||||
this._resize();
|
||||
this._mapInstance.panTo(new T.LngLat(Number(data.lon), Number(data.lat)), data.zoom || this._mapInstance.getZoom());
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 设置地图显示类型
|
||||
_setType(data) {
|
||||
try {
|
||||
this._mapInstance.setMapType(data.type === 1 ? TMAP_SATELLITE_MAP : TMAP_NORMAL_MAP);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 设置地图缩放
|
||||
_setZoom(data) {
|
||||
try {
|
||||
this._mapInstance.setZoom(data.zoom);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 设置注记
|
||||
_setMarkers(data) {
|
||||
try {
|
||||
// 清空当前所有注记
|
||||
//if (!this._markerList) this._markerList = [];
|
||||
//this._markerList.forEach(marker => this._mapInstance.removeOverLay(marker));
|
||||
this._markerList = [];
|
||||
this._mapInstance.clearOverLays();
|
||||
// 创建新注记
|
||||
data.markers && data.markers.forEach(item => {
|
||||
console.log(item)
|
||||
const option = {};
|
||||
if (item.icon) {
|
||||
option.icon = new T.Icon({
|
||||
iconUrl: item.icon,
|
||||
iconSize: new T.Point(item.width || 24, item.height || 24),
|
||||
iconAnchor: new T.Point(item.offsetX || item.width / 2, item.offsetY ||
|
||||
item.height)
|
||||
});
|
||||
}
|
||||
const marker = new T.Marker(new T.LngLat(item.lon, item.lat), option);
|
||||
item.click && marker.addEventListener("click", () => this._setEvent('click', item));
|
||||
this._markerList.push(marker);
|
||||
this._mapInstance.addOverLay(marker);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 设置使能
|
||||
_setEnable(data) {
|
||||
// 允许地图拖拽
|
||||
if (data.hasOwnProperty("drag")) {
|
||||
!!data["drag"] ? this._mapInstance.enableDrag() : this._mapInstance.disableDrag();
|
||||
}
|
||||
// 允许双击放大，默认启用。
|
||||
if (data.hasOwnProperty("doubleClickZoom")) {
|
||||
!!data["doubleClickZoom"] ? this._mapInstance.enableDoubleClickZoom() : this._mapInstance
|
||||
.disableDoubleClickZoom();
|
||||
}
|
||||
// 允许地图惯性拖拽
|
||||
if (data.hasOwnProperty("inertia")) {
|
||||
!!data["inertia"] ? this._mapInstance.enableInertia() : this._mapInstance.disableInertia();
|
||||
}
|
||||
// 允许双指操作缩放
|
||||
if (data.hasOwnProperty("pinchToZoom")) {
|
||||
!!data["pinchToZoom"] ? this._mapInstance.enablePinchToZoom() : this._mapInstance.disablePinchToZoom();
|
||||
}
|
||||
},
|
||||
// 添加覆盖物
|
||||
_addOvers(data = []) {
|
||||
if (!this._overs) this._overs = {};
|
||||
data.forEach(item => {
|
||||
switch (item.type) {
|
||||
// 信息窗口
|
||||
case "infowindow":
|
||||
this._createOverInfoWindow(item);
|
||||
break;
|
||||
// 文本
|
||||
case "label":
|
||||
this._createOverLabel(item);
|
||||
break;
|
||||
// 创建圆
|
||||
case "circle":
|
||||
this._createOverCircle(item);
|
||||
break;
|
||||
// 创建折线
|
||||
case "polyline":
|
||||
this._createOverPolyLine(item);
|
||||
break;
|
||||
// 创建多边形
|
||||
case "polygon":
|
||||
this._createOverPolygon(item);
|
||||
break;
|
||||
// 创建矩形
|
||||
case "rect":
|
||||
this._createOverRectangle(item);
|
||||
break;
|
||||
// 创建带箭头的折线
|
||||
case "polylineArrow":
|
||||
// 创建不带箭头的三次样条曲线
|
||||
case "cardinalCurve":
|
||||
// 创建带箭头的三次样条曲线
|
||||
case "cardinalCurveArrow":
|
||||
this._createOverSymbol(item);
|
||||
break;
|
||||
default:
|
||||
console.warn(
|
||||
`'${item.type}'未知的覆盖物类型，有效值为 circle,polyline,polygon,rect,polylineArrow,cardinalCurve,cardinalCurveArrow`
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 设置覆盖物
|
||||
_setOvers(data = []) {
|
||||
if (!this._overs) this._overs = {};
|
||||
// 移除现有同类型（时间复杂度On^2，不影响使用，暂时不优化了）
|
||||
data.forEach(item => this._clearOvers(item.type));
|
||||
// 添加
|
||||
this._addOvers(data);
|
||||
},
|
||||
// 清除覆盖物
|
||||
_clearOvers(type = "") {
|
||||
if (!this._overs) this._overs = {};
|
||||
// 清除
|
||||
for (const id in this._overs) {
|
||||
if (this._overs[id].options.type === type || !type) {
|
||||
this._mapInstance.removeOverLay(this._overs[id]);
|
||||
delete this._overs[id];
|
||||
}
|
||||
}
|
||||
},
|
||||
// 移除指定属性的覆盖物
|
||||
_removeOvers(data = {}) {
|
||||
if (!this._overs) this._overs = {};
|
||||
for (const id in this._overs) {
|
||||
if (this._overs[id].options[data.prop] === data.value) {
|
||||
this._mapInstance.removeOverLay(this._overs[id]);
|
||||
delete this._overs[id];
|
||||
}
|
||||
}
|
||||
},
|
||||
// 创建覆盖物
|
||||
_createOver(over) {
|
||||
// 添加到覆盖物层
|
||||
this._mapInstance.addOverLay(over);
|
||||
this._overs[this._genKey()] = over;
|
||||
// 绑定点击事件
|
||||
if (over.options.click) {
|
||||
over.addEventListener("click", () => this._setEvent('click', over.options));
|
||||
}
|
||||
},
|
||||
// 创建信息窗口
|
||||
_createOverInfoWindow(option) {
|
||||
try {
|
||||
// 格式化参数
|
||||
const param = {
|
||||
...option
|
||||
};
|
||||
// 弹出窗口位置的补偿值。在同一图层中打开弹出窗口时对于控制锚点比较有用。
|
||||
if (option.offsetX !== undefined || option.offsetY !== undefined) {
|
||||
param.offset = new T.Point(option.offsetX || 0, option.offsetY || 0);
|
||||
}
|
||||
// 在地图视图自动平移产生后弹出窗口和地图视图之间的边缘。
|
||||
if (option.autoPanPaddingX !== undefined || option.autoPanPaddingY !== undefined) {
|
||||
param.autoPanPadding = new T.Point(option.autoPanPaddingX || 0, option.autoPanPaddingY || 0);
|
||||
}
|
||||
const infoWin = new T.InfoWindow(option.content, param);
|
||||
// 设置或改变信息浮窗所指向的地理位置坐标
|
||||
if (option.lon && option.lat) {
|
||||
infoWin.setLngLat(new T.LngLat(option.lon, option.lat));
|
||||
}
|
||||
this._createOver(infoWin);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 创建文本覆盖物
|
||||
_createOverLabel(option) {
|
||||
try {
|
||||
// 格式化参数
|
||||
const param = {
|
||||
...option
|
||||
};
|
||||
if (option.lon && option.lat) param.position = new T.LngLat(option.lon, option.lat);
|
||||
param.offset = new T.Point(option.offsetX || 0, option.offsetY || 0);
|
||||
const label = new T.Label(param);
|
||||
this._createOver(label);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 创建圆覆盖物
|
||||
_createOverCircle(option) {
|
||||
try {
|
||||
const circle = new T.Circle(new T.LngLat(option.lon, option.lat), option.rad, option);
|
||||
this._createOver(circle);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 创建折线覆盖物
|
||||
_createOverPolyLine(option) {
|
||||
try {
|
||||
const points = option.points.map(point => new T.LngLat(point[0], point[1]));
|
||||
const line = new T.Polyline(points, option);
|
||||
this._createOver(line);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 创建多边形覆盖物
|
||||
_createOverPolygon(option) {
|
||||
try {
|
||||
const points = option.points.map(point => new T.LngLat(point[0], point[1]));
|
||||
const polygon = new T.Polygon(points, option);
|
||||
this._createOver(polygon);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 创建矩形覆盖物
|
||||
_createOverRectangle(option) {
|
||||
try {
|
||||
const lt = option.leftTop;
|
||||
const rb = option.rightBottom;
|
||||
const bounds = new T.LngLatBounds(new T.LngLat(lt[0], lt[1]), new T.LngLat(rb[0], rb[1]));
|
||||
const rect = new T.Rectangle(bounds, option);
|
||||
this._createOver(rect);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 创建符号覆盖物
|
||||
_createOverSymbol(option) {
|
||||
try {
|
||||
let over = null;
|
||||
const points = option.points.map(point => new T.LngLat(point[0], point[1]));
|
||||
switch (option.type) {
|
||||
case "polylineArrow":
|
||||
over = new T.PolylineArrow(points, option);
|
||||
break;
|
||||
case "cardinalCurve":
|
||||
over = new T.CardinalCurve(points, option);
|
||||
break;
|
||||
case "cardinalCurveArrow":
|
||||
over = new T.CardinalCurveArrow(points, option);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (over) this._createOver(over);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
},
|
||||
// 设置事件
|
||||
_setEvent(type, target) {
|
||||
this.$ownerInstance.callMethod('UserEvent', {
|
||||
type:'onMapListen',
|
||||
type, // 事件类型UserEvent
|
||||
target, // 事件目标
|
||||
});
|
||||
},
|
||||
// 释放地图
|
||||
_dispose() {
|
||||
delete this._mapInstance;
|
||||
this._mapInstance = null;
|
||||
this._unbindEvent();
|
||||
},
|
||||
// 生成唯一ID
|
||||
_genKey() {
|
||||
let result = '';
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const charactersLength = characters.length;
|
||||
for (let i = 0; i < 30; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return Date.now() + result;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ly-map-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
|
||||
.ly-map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ly-center-icon {
|
||||
position: absolute;
|
||||
z-index: 401;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.ly-location-icon {
|
||||
position: absolute;
|
||||
z-index: 401;
|
||||
right: 24rpx;
|
||||
bottom: 24rpx;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 8rpx rgba(0, 0, 0, .15);
|
||||
|
||||
.icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
{
|
||||
"id": "ly-map",
|
||||
"displayName": "天地图（支持安卓、苹果、鸿蒙、支持多地图、覆盖物，平替高德腾讯地图年省5万）",
|
||||
"version": "1.0.8",
|
||||
"description": "支持多地图同时使用，支持卫星地图展示、支持多标注展示，支持自定义事件处理、支持自定义样式，平替高德/百度/腾讯地图展示年省5万",
|
||||
"keywords": [
|
||||
"地图",
|
||||
"天地图",
|
||||
"地图标注",
|
||||
"覆盖物"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^4.01"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n",
|
||||
"app-uvue": "n",
|
||||
"app-harmony": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "n",
|
||||
"阿里": "n",
|
||||
"百度": "n",
|
||||
"字节跳动": "n",
|
||||
"QQ": "n",
|
||||
"钉钉": "n",
|
||||
"快手": "n",
|
||||
"飞书": "n",
|
||||
"京东": "n"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"name": "天地图（支持Android、IOS、Harmony、支持多地图、覆盖物，平替高德腾讯地图年省5万）",
|
||||
"dcloudext": {
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,615 @@
|
||||
### 地图组件 ly-map
|
||||
|
||||
<hr>
|
||||
|
||||
### 1 坐标系说明
|
||||
|
||||
#### 默认坐标系
|
||||
|
||||
```
|
||||
天地图为WGS84坐标系，如果当前使用的是百度坐标（BD09）、火星坐标（GCJ02）
|
||||
则需要转化后使用，推荐使用coord-transform工具转换
|
||||
```
|
||||
|
||||
#### 转换工具安装
|
||||
|
||||
```
|
||||
// npm
|
||||
npm install @isvend/coord-transform
|
||||
|
||||
// pnpm
|
||||
pnpm add @isvend/coord-transform
|
||||
```
|
||||
|
||||
#### 坐标转换
|
||||
|
||||
```javascript
|
||||
import {
|
||||
transformWGS84ToBD09,
|
||||
transformBD09ToGCJ02,
|
||||
transformBD09ToWGS84,
|
||||
transformGCJ02ToWGS84,
|
||||
transformWGS84ToGCJ02,
|
||||
} from "@isvend/coord-transform";
|
||||
|
||||
const lng = 116.404;
|
||||
const lat = 39.915;
|
||||
|
||||
console.log("WGS84 to GCJ02", transformWGS84ToGCJ02(lng, lat));
|
||||
console.log("GCJ02 to WGS84", transformGCJ02ToWGS84(lng, lat));
|
||||
|
||||
console.log("WGS84 to BD09", transformWGS84ToBD09(lng, lat));
|
||||
console.log("BD09 to WGS84", transformBD09ToWGS84(lng, lat));
|
||||
|
||||
console.log("BD09 to GCJ02", transformBD09ToGCJ02(lng, lat));
|
||||
console.log("GCJ02 to BD09", transformBD09ToGCJ02(lng, lat));
|
||||
```
|
||||
|
||||
<hr>
|
||||
|
||||
### 2 初始化
|
||||
|
||||
默认填充父布局
|
||||
|
||||
```vue
|
||||
|
||||
<ly-map ref="map" map-key="天地图key"/>
|
||||
```
|
||||
|
||||
<hr>
|
||||
|
||||
### 3 插件说明
|
||||
|
||||
##### 属性
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
|:-------------------|:---------:|:----------------------------------|
|
||||
| `mapKey` | `String` | 天地图官网申请的key,必填否则地图不能正确出来 |
|
||||
| `lonlat` | `Array` | 地图初始位置,默认值[111.668097, 40.825417] |
|
||||
| `zoom` | `Number` | 地图初始缩放等级,默认值16 |
|
||||
| `showCenterIcon` | `Boolean` | 是否在地图中间显示图标, 默认值 false不显示 |
|
||||
| `centerIcon` | `String` | 修改默认中间显示图标 |
|
||||
| `showLocationIcon` | `Boolean` | 是否在地图右下角显示定位图标, 默认值 false不显示 |
|
||||
|
||||
##### 事件
|
||||
|
||||
| 事件 | 说明 |
|
||||
|:-------------------------------------- |:------------------------------------------------------- |
|
||||
| `onLoaded() ` | 当地图加载完成时 |
|
||||
| `onLocation() ` | 点击右下角定位按钮时 |
|
||||
| `onZoomEnd(lon:number, lat:number, zoom:number) ` | 缩放完成时,并返回中心位置以及当前缩放等级 |
|
||||
| `onStartDrag(lon:number, lat:number)` | 当地图开始拖拽时,并返回中心位置 |
|
||||
| `onEndDrag(lon:number, lat:number) ` | 当地图结束拖拽时,并返回中心位置 |
|
||||
| `onListen(event:object) ` | 覆盖物事件监听，需要覆盖物属性`click`为`true`可被触发，目前支持点击事件 `event`说明如下 |
|
||||
|
||||
##### 覆盖物事件 `Event` 格式说明
|
||||
|
||||
| key | value | 说明 |
|
||||
|:---------|:--------:|:----------------------------------------------|
|
||||
| `type` | `String` | 事件类型 支持 `click` |
|
||||
| `target` | `Object` | 发生事件的覆盖物option，会原样返回覆盖物的配置格式`Over` 或 `Marker` |
|
||||
|
||||
##### 方法
|
||||
|
||||
| 方法 | 说明 |
|
||||
|:------------------------------------------------|:----------------------------------------------------------------------------------------------------------------|
|
||||
| `setCenter(lon:number, lat:number,zoom:Number)` | 将地图的中心点变换到指定的地理坐标，如果同时指定了缩放等级，则同时缩放到指定的等级<br/>参数说明:<br/> `lon`:地图的中心点经度<br/> `lat`:地图的中心点纬度<br/>`zoom`:地图的比例尺级别 |
|
||||
| `setType(type:Number) ` | 设置地图显示类型<br/>参数说明:<br/> `type`:要设置的地图展示类型 0矢量地图 1卫星地图 其它显示矢量地图 |
|
||||
| `setMarkers(Array<Marker>) ` | 将标注添加到地图中，支持多个标注同时添加,标注`Marker`格式见下说明 |
|
||||
| `setZoom(zoom:Number) ` | 将视图缩放到指定的缩放等级，中心点坐标不变 <br/>参数说明:<br/> `zoom`:地图的比例尺级别 |
|
||||
| `resize() ` | 重置地图展示区域尺寸 |
|
||||
| `setOption(option:Object) ` | 同时设置多个属性，支持中心点、缩放、标注、覆盖物<br/>参数说明:<br/> `Object`格式见下说明 |
|
||||
| `addOvers(overs:Array<Over>) ` | 添加覆盖物，同时设置多个（会在现有的基础上添加）<br/>参数说明:<br/> `Over`格式见下说明 |
|
||||
| `setOvers(overs:Array<Over>) ` | 设置覆盖物，同时设置多个（清除现有同类型的，重新添加）<br/>参数说明:<br/> `Over`格式见下说明 |
|
||||
| `clearOvers(type:String) ` | 清除指定的覆盖物类型，不指定则清除所有<br/>参数说明:<br/> type=`circle` 或 `polyline` 或 `polygon` 或 `rect` 或 `label` 或 `infowindow` |
|
||||
| `removeOvers(prop, value) ` | 移除指定属性和值的覆盖物，匹配创建覆盖物时的prop和value <br/>参数说明:<br/> `prop`:覆盖物属性 <br/> `value`:覆盖物属性对应的值 |
|
||||
| `setEnable(option:Object) ` | 设置开启或者禁用的地图操作 支持拖拽、双击缩放、双指缩放、惯性拖拽 <br/> `Option`格式见下说明 |
|
||||
|
||||
|
||||
##### 标注 `Marker` 格式说明
|
||||
|
||||
| key | value | 说明 |
|
||||
|:-----------|:---------:|:------------------------------|
|
||||
| `icon` | `String` | 标注显示图标的路径,支持网络图片 |
|
||||
| `width` | `Number` | 标注图标宽度，注意：不设置icon时无效 |
|
||||
| `height` | `Number` | 标注图标高度，注意：不设置icon时无效 |
|
||||
| `lon ` | `Number` | 标注显示的位置经度 |
|
||||
| `lat ` | `Number` | 标注显示的位置纬度 |
|
||||
| `offsetX` | `Number` | 标注图标相对左上角水平偏移 ，注意：不设置icon时无效 |
|
||||
| `offsetY` | `Number` | 标注图标相对左上角垂直偏移 ，注意：不设置icon时无效 |
|
||||
|
||||
##### 覆盖物 `Over`格式说明
|
||||
|
||||
| key | value | 说明 |
|
||||
|:--------------- |:------------------: |:------------------------------------------------------------------------- |
|
||||
| `type` | `String` | 覆盖物类型 支持 `circle` `polyline` `polygon` `rect` `label` `infowindow` `polylineArrow` `cardinalCurve` `cardinalCurveArrow` |
|
||||
| `color` | `String` | 边线颜色 |
|
||||
| `weight` | `Number` | 边线的宽度，以像素为单位 |
|
||||
| `opacity ` | `Number` | 边线的透明度（范围0-1 之间） |
|
||||
| `fillColor ` | `String` | 填充颜色。当参数为空时，折线覆盖物将没有填充效果 |
|
||||
| `fillOpacity` | `Number` | 填充的透明度（范围0-1 之间）。 |
|
||||
| `lineStyle` | `String` | 边线的样式（`solid`或`dashed`）注意：当`polylineArrow` `cardinalCurve` `cardinalCurveArrow`时，不生效（天地图缺陷） |
|
||||
| `rad` | `Number` | `type=circle`时有效，圆的半径单位`m` |
|
||||
| `lon ` | `Number` | `type=circle`时圆心经纬度坐标；`type=label`文本标注的地理位置；`type=infowindow`弹窗的显示地理位置坐标 |
|
||||
| `lat ` | `Number` | `type=circle`时圆心经纬度坐标；`type=label`文本标注的地理位置；`type=infowindow`弹窗的显示地理位置坐标 |
|
||||
| `points` | `Array<[lon,lat]>` | `type=polygon或polyline`时有效，坐标数组 |
|
||||
| `leftTop` | `Array<[lon,lat]>` | `type=rect`时有效， 矩形左上角坐标 |
|
||||
| `rightBottom` | `Array<[lon,lat]>` | `type=rect`时有效， 矩形右下角坐标 |
|
||||
| `text` | `String` | `type=label`时有效，显示文本内容； |
|
||||
| `offsetX` | `Number` | `type=label`时有效，显示文本水平偏移；`type=infowindow`时有效，显示弹窗水平偏移 |
|
||||
| `offsetY` | `Number` | `type=label`时有效，显示文垂直平偏移；`type=infowindow`时有效，显示弹窗垂直偏移 |
|
||||
| `minWidth` | `Number` | `type=infowindow`时有效，弹出框的最小宽度 |
|
||||
| `maxWidth` | `Number` | `type=infowindow`时有效，弹出框的最大宽度 |
|
||||
| `maxHeight` | `Number` | `type=infowindow`时有效，设置后，如果内容超过弹出窗口的给定高度则产生一个可以滚动的容器 |
|
||||
| `autoPan` | `Boolean` | `type=infowindow`时有效，否开启信息窗口打开时地图自动移动（默认关闭） |
|
||||
| `closeButton` | `Boolean` | `type=infowindow`时有效，控制弹出窗口中出现的关闭按钮 |
|
||||
| `closeOnClick` | `Boolean` | `type=infowindow`时有效，是否开启点击地图关闭信息窗口（默认关闭） |
|
||||
|
||||
##### 地图操作禁用配置 `Option` 格式说明
|
||||
|
||||
| key | value | 说明 |
|
||||
|:------------------|:---------:|:-------------------------------|
|
||||
| `drag` | `Boolean` | 地图拖拽 `true`允许 `fale`禁用，默认启用 |
|
||||
| `doubleClickZoom` | `Boolean` | 地图双击放大`true`允许 `fale`禁用，默认启用 |
|
||||
| `pinchToZoom` | `Boolean` | 双指操作缩放 `true`允许 `fale`禁用，默认启用 |
|
||||
| `inertia ` | `Boolean` | 地图惯性拖拽 `true`允许 `fale`禁用，默认启用 | |
|
||||
|
||||
##### 多属性 `Object` 配置说明
|
||||
|
||||
```javascript
|
||||
const option = {
|
||||
// 中心点
|
||||
center: {lon: 116.391231, lat: 39.907334},
|
||||
// 多标注
|
||||
markers: [{
|
||||
icon: icon,
|
||||
width: 24,
|
||||
height: 27,
|
||||
lon: 116.389231,
|
||||
lat: 39.906034,
|
||||
offsetX: 12,
|
||||
offsetY: 27,
|
||||
click: true, // 开启点击监听
|
||||
}],
|
||||
// 缩放
|
||||
zoom: 16,
|
||||
// 地图类型
|
||||
type: 1,
|
||||
// 覆盖物
|
||||
overs: [
|
||||
// 添加圆
|
||||
{
|
||||
type: "circle",
|
||||
rad: 100,
|
||||
lon: 111.667920,
|
||||
lat: 40.828050,
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: .5,
|
||||
fillColor: "#0000FF",
|
||||
fillOpacity: .2,
|
||||
lineStyle: "solid",
|
||||
},
|
||||
// 添加折线
|
||||
{
|
||||
type: "polyline",
|
||||
points: [[111.665750, 40.822830], [111.668190, 40.821800], [111.670310, 40.822790]],
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: .5,
|
||||
lineStyle: "solid",
|
||||
},
|
||||
// 添加多边形
|
||||
{
|
||||
type: "polygon",
|
||||
points: [[111.668160, 40.824850], [111.666640, 40.823950], [111.669570, 40.823990]],
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: .5,
|
||||
lineStyle: "solid",
|
||||
},
|
||||
// 添加矩形
|
||||
{
|
||||
type: "rect",
|
||||
leftTop: [111.665880, 40.826710],
|
||||
rightBottom: [111.670120, 40.825860],
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: .5,
|
||||
lineStyle: "solid",
|
||||
},
|
||||
// 添加文本
|
||||
{
|
||||
type: "label",
|
||||
lon: 111.668150,
|
||||
lat: 40.825330,
|
||||
text: "点我打开弹窗",
|
||||
offsetX: -60,
|
||||
offsetY: 10,
|
||||
click: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
```text
|
||||
注意：目前所有覆盖物都支持click属性，当click=true时，则开启点击监听，默认不开启
|
||||
```
|
||||
|
||||
<hr>
|
||||
|
||||
### 4 示例代码
|
||||
|
||||
```vue
|
||||
|
||||
<template>
|
||||
<view class="map-page-wrapper">
|
||||
<view class="map-box">
|
||||
<ly-map ref="map" :map-key="mapKey" :lonlat="lonlat" :zoom="zoom" :show-center-icon="showCenterIcon"
|
||||
:center-icon="centerIcon" :show-location-icon="showLocationIcon" :on-location="location"
|
||||
:on-loaded="loaded" :on-start-drag="startDrag" :on-zoom-end="zoomEnd" :on-end-drag="endDrag"
|
||||
:on-listen="listen" />
|
||||
</view>
|
||||
<view class="tool-box">
|
||||
<view class="tool" @tap="setType(0)">矢量地图</view>
|
||||
<view class="tool" @tap="setType(1)">卫星地图</view>
|
||||
<view class="tool" @tap="setMarkers()">设置标注</view>
|
||||
<view class="tool" @tap="clearMarkers()">清除标注</view>
|
||||
<view class="tool" @tap="setZoom(1)">缩放+</view>
|
||||
<view class="tool" @tap="setZoom(-1)">缩放-</view>
|
||||
<view class="tool" @tap="setCenter(116.391231,39.907334)">设置位置1</view>
|
||||
<view class="tool" @tap="setCenter(111.668097, 40.825417)">设置位置2</view>
|
||||
<view class="tool" @tap="setCenterIcon(true)">显示中心图标</view>
|
||||
<view class="tool" @tap="setCenterIcon(false)">隐藏中心图标</view>
|
||||
<view class="tool" @tap="setLocationIcon(true)">显示定位图标</view>
|
||||
<view class="tool" @tap="setLocationIcon(false)">隐藏定位图标</view>
|
||||
<view class="tool" @tap="setIcon()">修改中心图标</view>
|
||||
<view class="tool" @tap="setOption()">同时设置属性</view>
|
||||
<view class="tool" @tap="setOvers()">设置覆盖物</view>
|
||||
<view class="tool" @tap="addOvers()">添加覆盖物</view>
|
||||
<view class="tool" @tap="clearOvers('rect')">清除矩形覆盖物</view>
|
||||
<view class="tool" @tap="clearOvers()">清除所有覆盖物</view>
|
||||
<view class="tool" @tap="enable()">启用拖拽/缩放</view>
|
||||
<view class="tool" @tap="disable()">禁用拖拽/缩放</view>
|
||||
<view class="tool" @tap="openDialog()">打开弹窗</view>
|
||||
<view class="tool" @tap="removeOvers()">移除指定属性覆盖物</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import icon1 from '@/static/icon1.png';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 天地图官网地址 https://oauth.tianditu.gov.cn/
|
||||
// key需要自行申请，以下使用测试key
|
||||
mapKey: "bcd1064810812bdc35d675d1dba3c23f",
|
||||
// 中心位置
|
||||
lonlat: [111.668097, 40.825417],
|
||||
// 缩放
|
||||
zoom: 16,
|
||||
// 地图展示类型
|
||||
type: 0,
|
||||
// 显示中心图标
|
||||
showCenterIcon: true,
|
||||
// 显示定位图标
|
||||
showLocationIcon: true,
|
||||
// 不设置使用默认图标
|
||||
centerIcon: "",
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
// 绑定组件
|
||||
this.map = this.$refs.map;
|
||||
},
|
||||
methods: {
|
||||
location() {
|
||||
console.log("点击定位按钮回调");
|
||||
},
|
||||
loaded() {
|
||||
console.log("地图创建完成");
|
||||
},
|
||||
zoomEnd(lon, lat) {
|
||||
console.log("地图缩放完成", lon, lat);
|
||||
},
|
||||
startDrag(lon, lat) {
|
||||
console.log("开始地图拖拽", lon, lat);
|
||||
},
|
||||
endDrag(lon, lat) {
|
||||
console.log("结束地图拖拽", lon, lat);
|
||||
},
|
||||
listen(e) {
|
||||
console.log("覆盖物点击事件", e);
|
||||
// 只有点击label可以显示弹窗
|
||||
if (e.target.type === "label") {
|
||||
this.map.setOvers([{
|
||||
type: "infowindow",
|
||||
lon: 111.668100,
|
||||
lat: 40.825420,
|
||||
content: "弹窗",
|
||||
}]);
|
||||
}
|
||||
},
|
||||
setZoom(zoom) {
|
||||
this.zoom += zoom;
|
||||
if (this.zoom <= 10) this.zoom = 10;
|
||||
if (this.zoom >= 20) this.zoom = 20;
|
||||
this.map.setZoom(this.zoom);
|
||||
},
|
||||
setType(type) {
|
||||
// type 0矢量地图 1卫星地图 其他矢量地图
|
||||
this.type = type;
|
||||
this.map.setType(this.type);
|
||||
},
|
||||
setCenter(lon, lat) {
|
||||
this.lonlat = [lon, lat];
|
||||
this.map.setCenter(lon, lat);
|
||||
},
|
||||
setMarkers() {
|
||||
this.map.setMarkers([{
|
||||
lon: 111.666020,
|
||||
lat: 40.82740
|
||||
},
|
||||
{
|
||||
lon: 111.667020,
|
||||
lat: 40.82740
|
||||
},
|
||||
{
|
||||
lon: 111.665020,
|
||||
lat: 40.82740
|
||||
},
|
||||
{
|
||||
lon: 111.669020,
|
||||
lat: 40.82740
|
||||
},
|
||||
{
|
||||
lon: 111.670020,
|
||||
lat: 40.82740
|
||||
},
|
||||
]);
|
||||
},
|
||||
removeOvers() {
|
||||
this.map.removeOvers("flag", "my-circle");
|
||||
},
|
||||
clearMarkers() {
|
||||
this.map.setMarkers([]);
|
||||
},
|
||||
setCenterIcon(show) {
|
||||
this.showCenterIcon = show;
|
||||
},
|
||||
setLocationIcon(show) {
|
||||
this.showLocationIcon = show;
|
||||
},
|
||||
setIcon() {
|
||||
// 默认图标和icon切换显示
|
||||
this.centerIcon = this.centerIcon ? "" : icon1;
|
||||
},
|
||||
setOption() {
|
||||
// 同时设置多个属性
|
||||
this.map.setOption({
|
||||
center: {
|
||||
lon: 116.391231,
|
||||
lat: 39.907334
|
||||
},
|
||||
markers: [{
|
||||
lon: 116.389231,
|
||||
lat: 39.906034
|
||||
},
|
||||
{
|
||||
lon: 116.390231,
|
||||
lat: 39.906034
|
||||
},
|
||||
{
|
||||
lon: 116.391231,
|
||||
lat: 39.906034
|
||||
},
|
||||
{
|
||||
lon: 116.392231,
|
||||
lat: 39.906034
|
||||
},
|
||||
{
|
||||
lon: 116.393231,
|
||||
lat: 39.906034
|
||||
},
|
||||
],
|
||||
zoom: 16,
|
||||
type: 1,
|
||||
});
|
||||
},
|
||||
setOvers() {
|
||||
const overs = [{
|
||||
type: "circle",
|
||||
rad: 100,
|
||||
lon: 111.667920,
|
||||
lat: 40.828050,
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: .5,
|
||||
fillColor: "#0000FF",
|
||||
fillOpacity: .2,
|
||||
lineStyle: "solid",
|
||||
click: true,
|
||||
flag: "my-circle",
|
||||
},
|
||||
{
|
||||
type: "polyline",
|
||||
points: [
|
||||
[111.665750, 40.822830],
|
||||
[111.668190, 40.821800],
|
||||
[111.670310, 40.822790]
|
||||
],
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: 1,
|
||||
lineStyle: "dashed",
|
||||
},
|
||||
{
|
||||
type: "polylineArrow",
|
||||
points: [
|
||||
[111.665750, 40.823030],
|
||||
[111.668190, 40.822000],
|
||||
[111.670310, 40.822990]
|
||||
],
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: 1,
|
||||
lineStyle: "dashed",
|
||||
},
|
||||
{
|
||||
type: "cardinalCurve",
|
||||
points: [
|
||||
[111.665750, 40.823430],
|
||||
[111.668190, 40.822400],
|
||||
[111.670310, 40.823390]
|
||||
],
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: 1,
|
||||
lineStyle: "dashed",
|
||||
},
|
||||
{
|
||||
type: "cardinalCurveArrow",
|
||||
points: [
|
||||
[111.665750, 40.823730],
|
||||
[111.668190, 40.822700],
|
||||
[111.670310, 40.823690]
|
||||
],
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: 1,
|
||||
lineStyle: "dashed",
|
||||
},
|
||||
{
|
||||
type: "polygon",
|
||||
points: [
|
||||
[111.668160, 40.824850],
|
||||
[111.666640, 40.823950],
|
||||
[111.669570, 40.823990]
|
||||
],
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: .5,
|
||||
lineStyle: "solid",
|
||||
},
|
||||
{
|
||||
type: "rect",
|
||||
leftTop: [111.665880, 40.826710],
|
||||
rightBottom: [111.670120, 40.825860],
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: .5,
|
||||
lineStyle: "solid",
|
||||
},
|
||||
{
|
||||
type: "label",
|
||||
lon: 111.668150,
|
||||
lat: 40.825330,
|
||||
text: "点我打开弹窗",
|
||||
offsetX: -60,
|
||||
offsetY: 10,
|
||||
click: true,
|
||||
},
|
||||
];
|
||||
this.map.setOvers(overs);
|
||||
},
|
||||
addOvers() {
|
||||
const overs = [{
|
||||
type: "circle",
|
||||
rad: 200,
|
||||
lon: 111.667920,
|
||||
lat: 40.828050,
|
||||
color: "#0000FF",
|
||||
weight: 3,
|
||||
opacity: .5,
|
||||
fillColor: "#0000FF",
|
||||
fillOpacity: .2,
|
||||
lineStyle: "solid",
|
||||
}, ];
|
||||
this.map.addOvers(overs);
|
||||
},
|
||||
clearOvers(type) {
|
||||
this.map.clearOvers(type);
|
||||
},
|
||||
enable() {
|
||||
this.map.setEnable({
|
||||
drag: true,
|
||||
doubleClickZoom: true,
|
||||
inertia: true,
|
||||
pinchToZoom: true,
|
||||
});
|
||||
},
|
||||
disable() {
|
||||
this.map.setEnable({
|
||||
drag: false,
|
||||
doubleClickZoom: false,
|
||||
inertia: false,
|
||||
pinchToZoom: false,
|
||||
});
|
||||
},
|
||||
openDialog() {
|
||||
const content =
|
||||
`
|
||||
<div style="display:flex; flex-direction: column;align-items: center; font-size:16px;z-index:999999999;">
|
||||
<img src='http://lbs.tianditu.gov.cn/images/logo.png' width='100' height='50'/>
|
||||
<div style='margin-top:8px;'>天地图组件</div>
|
||||
<div style='margin-top:8px;'>内蒙古灵越科技</div>
|
||||
</div>
|
||||
`;
|
||||
this.map.setOvers([{
|
||||
type: "infowindow",
|
||||
lon: 111.668100,
|
||||
lat: 40.825420,
|
||||
content: content,
|
||||
}]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-page-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.map-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tool-box {
|
||||
position: absolute;
|
||||
// 天地图默认z-index:400 需要大于400
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.tool {
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 6rpx rgba(0, 0, 0, .15);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
<hr>
|
||||
|
||||
### 5 QA
|
||||
|
||||
#### 为什么自定义标注图标在APP上会失效？
|
||||
```
|
||||
标注图标支持网络图片以及base64格式图标
|
||||
```
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Reference in New Issue
Block a user