|
@@ -13,10 +13,12 @@ export function useAMap(options) {
|
|
|
AMapLoader.load({
|
|
|
key: options.key, // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
|
- plugins: options.plugins ? options.plugins : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster']
|
|
|
+ plugins: options.plugins
|
|
|
+ ? options.plugins
|
|
|
+ : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation']
|
|
|
}).then((res) => {
|
|
|
AMap = res;
|
|
|
- map = new AMap.Map('aMap', {
|
|
|
+ map = new AMap.Map(options.el ? options.el : 'aMap', {
|
|
|
WebGLParams: {
|
|
|
preserveDrawingBuffer: true
|
|
|
},
|
|
@@ -74,8 +76,6 @@ export function useAMap(options) {
|
|
|
addPoints = points;
|
|
|
const count = points.length;
|
|
|
const _renderClusterMarker = function (context) {
|
|
|
- console.log(context);
|
|
|
- console.log('21312', context.clusterData);
|
|
|
// 聚合中点个数
|
|
|
const clusterCount = context.count;
|
|
|
const div = document.createElement('div');
|
|
@@ -92,20 +92,22 @@ export function useAMap(options) {
|
|
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
|
|
context.marker.setContent(div);
|
|
|
context.marker.on('click', (e) => {
|
|
|
+ const bounds = e.target.getBounds();
|
|
|
+ map.setZoomAndCenter(map.getZoom() + 1, bounds.getCenter());
|
|
|
});
|
|
|
};
|
|
|
const _renderMarker = function (context) {
|
|
|
const content =
|
|
|
- '<div style="display: flex;flex-direction: column;align-items: center;justify-content: center">' +
|
|
|
- '<div style="background: url(' +
|
|
|
- context.data[0].icon +
|
|
|
- ') no-repeat; width: ' +
|
|
|
- context.data[0].size[0] +
|
|
|
- 'px;height: ' +
|
|
|
- context.data[0].size[1] +
|
|
|
- 'px;cursor: pointer; background-size: cover"></div>' +
|
|
|
- // '<div style="font-size: 36px;white-space: nowrap">'+ context.data[0].name +'</div>' +
|
|
|
- '</div>';
|
|
|
+ '<div style="display: flex;flex-direction: column;align-items: center;justify-content: center">' +
|
|
|
+ '<div style="background: url(' +
|
|
|
+ context.data[0].icon +
|
|
|
+ ') no-repeat; width: ' +
|
|
|
+ context.data[0].size[0] +
|
|
|
+ 'px;height: ' +
|
|
|
+ context.data[0].size[1] +
|
|
|
+ 'px;cursor: pointer; background-size: cover"></div>' +
|
|
|
+ // '<div style="font-size: 36px;white-space: nowrap">'+ context.data[0].name +'</div>' +
|
|
|
+ '</div>';
|
|
|
const offset = new AMap.Pixel(-9, -9);
|
|
|
context.marker.setContent(content);
|
|
|
context.marker.setOffset(offset);
|
|
@@ -137,13 +139,13 @@ export function useAMap(options) {
|
|
|
});
|
|
|
};
|
|
|
cluster = new AMap.MarkerCluster(
|
|
|
- map, //地图实例
|
|
|
- points, //海量点数据,数据中需包含经纬度信息字段 lnglat
|
|
|
- {
|
|
|
- gridSize: 30, //数据聚合计算时网格的像素大小
|
|
|
- renderClusterMarker: _renderClusterMarker, //上述步骤的自定义聚合点样式
|
|
|
- renderMarker: _renderMarker //上述步骤的自定义非聚合点样式
|
|
|
- }
|
|
|
+ map, //地图实例
|
|
|
+ points, //海量点数据,数据中需包含经纬度信息字段 lnglat
|
|
|
+ {
|
|
|
+ gridSize: 30, //数据聚合计算时网格的像素大小
|
|
|
+ renderClusterMarker: _renderClusterMarker, //上述步骤的自定义聚合点样式
|
|
|
+ renderMarker: _renderMarker //上述步骤的自定义非聚合点样式
|
|
|
+ }
|
|
|
);
|
|
|
points.forEach((item) => {
|
|
|
markers['point'].push(item);
|
|
@@ -205,9 +207,13 @@ export function useAMap(options) {
|
|
|
// 打开InfoWindow,并设置其内容和位置
|
|
|
infoWindow.setContent(content);
|
|
|
infoWindow.open(map, lnglat);
|
|
|
+ // 解决2.0版本无法滚动问题
|
|
|
+ infoWindow.on('mouseover', () => map.setStatus({ zoomEnable: false }));
|
|
|
+ infoWindow.on('mouseout', () => map.setStatus({ zoomEnable: true }));
|
|
|
};
|
|
|
|
|
|
const hideInfo = (e) => {
|
|
|
+ map.setStatus({ zoomEnable: true });
|
|
|
if (!!infoWindow) {
|
|
|
infoWindow.close();
|
|
|
if (!!clickMarker && e) {
|
|
@@ -224,8 +230,95 @@ export function useAMap(options) {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+ const creatMask = (options, name = '茂名市') => {
|
|
|
+ new AMap.DistrictSearch({
|
|
|
+ extensions: 'all',
|
|
|
+ subdistrict: 0
|
|
|
+ }).search(name, function (status, result) {
|
|
|
+ // 外多边形坐标数组和内多边形坐标数组
|
|
|
+ const outer = [
|
|
|
+ new AMap.LngLat(-360, 90, true),
|
|
|
+ new AMap.LngLat(-360, -90, true),
|
|
|
+ new AMap.LngLat(360, -90, true),
|
|
|
+ new AMap.LngLat(360, 90, true)
|
|
|
+ ];
|
|
|
+ options.forEach((option) => {
|
|
|
+ const holes = result.districtList[0].boundaries;
|
|
|
+ // if (option.offset) {
|
|
|
+ //
|
|
|
+ // holes.forEach((items) => {
|
|
|
+ //
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ let pathArray = [outer];
|
|
|
+ pathArray.push.apply(pathArray, holes);
|
|
|
+ const polygon = new AMap.Polygon({
|
|
|
+ pathL: pathArray,
|
|
|
+ strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
|
|
|
+ strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
|
|
|
+ strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
|
|
|
+ fillColor: option.fillColor ? option.fillColor : '#10243b',
|
|
|
+ fillOpacity: option.fillOpacity ? option.fillOpacity : 0.65
|
|
|
+ });
|
|
|
+ polygon.setPath(pathArray);
|
|
|
+ map.add(polygon);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ let moveMarker, movePolyline, movePassedPolyline, timerId;
|
|
|
+ const trackPlayback = (lineArr) => {
|
|
|
+ if (timerId) {
|
|
|
+ clearTimeout(timerId);
|
|
|
+ }
|
|
|
+ movePolyline?.remove();
|
|
|
+ movePassedPolyline?.remove();
|
|
|
+ moveMarker?.remove();
|
|
|
+ moveMarker = new AMap.Marker({
|
|
|
+ map: map,
|
|
|
+ position: [116.478935, 39.997761],
|
|
|
+ icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
|
|
|
+ offset: new AMap.Pixel(-13, -26)
|
|
|
+ });
|
|
|
+ // 绘制轨迹
|
|
|
+ movePolyline = new AMap.Polyline({
|
|
|
+ map: map,
|
|
|
+ path: lineArr,
|
|
|
+ showDir: true,
|
|
|
+ strokeColor: '#28F', //线颜色
|
|
|
+ // strokeOpacity: 1, //线透明度
|
|
|
+ strokeWeight: 6 //线宽
|
|
|
+ // strokeStyle: "solid" //线样式
|
|
|
+ });
|
|
|
+
|
|
|
+ movePassedPolyline = new AMap.Polyline({
|
|
|
+ map: map,
|
|
|
+ strokeColor: '#AF5', //线颜色
|
|
|
+ strokeWeight: 6 //线宽
|
|
|
+ });
|
|
|
+
|
|
|
+ moveMarker.on('moving', function (e) {
|
|
|
+ movePassedPolyline.setPath(e.passedPath);
|
|
|
+ map.setCenter(e.target.getPosition(), true);
|
|
|
+ });
|
|
|
|
|
|
- initMap(options);
|
|
|
+ moveMarker.on('moveend', function (e) {
|
|
|
+ timerId = setTimeout(() => {
|
|
|
+ movePolyline.remove();
|
|
|
+ movePassedPolyline.remove();
|
|
|
+ moveMarker.remove();
|
|
|
+ }, 2000);
|
|
|
+ });
|
|
|
+ moveMarker.moveAlong(lineArr, {
|
|
|
+ // 每一段的时长
|
|
|
+ duration: 1000, //可根据实际采集时间间隔设置
|
|
|
+ // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
|
|
|
+ autoRotation: true
|
|
|
+ });
|
|
|
+ };
|
|
|
+ onMounted(() => {
|
|
|
+ initMap(options);
|
|
|
+ });
|
|
|
return {
|
|
|
getAMap,
|
|
|
getMap,
|
|
@@ -237,6 +330,8 @@ export function useAMap(options) {
|
|
|
getScale,
|
|
|
showInfo,
|
|
|
hideInfo,
|
|
|
- handleHover
|
|
|
+ handleHover,
|
|
|
+ creatMask,
|
|
|
+ trackPlayback
|
|
|
};
|
|
|
}
|