Browse Source

👈 编写高德地图组件

master
wangxiang 3 years ago
parent
commit
e795e587d7
  1. 99
      kicc-ui/src/components/AMap/src/Amap.vue
  2. 8
      kicc-ui/src/components/AMap/src/data.ts

99
kicc-ui/src/components/AMap/src/Amap.vue

@ -13,7 +13,13 @@
<span title="展开"></span> <span title="展开"></span>
<p title="隐藏"></p> <p title="隐藏"></p>
</div> </div>
<div>
<AForm>
<AFormItem>
<a-input/>
</AFormItem>
</AForm>
</div>
</div> </div>
</PageWrapper> </PageWrapper>
</template> </template>
@ -26,15 +32,19 @@
import hospitalTwinkle from '/@/assets/images/hospital-twinkle.gif'; import hospitalTwinkle from '/@/assets/images/hospital-twinkle.gif';
import redFlag from '/@/assets/images/redFlag.svg'; import redFlag from '/@/assets/images/redFlag.svg';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { Form } from 'ant-design-vue';
let map; let map;
let largeHospitalMarkerCluster; let largeHospitalMarkerCluster;
let smallHospitalMarkerCluster; let smallHospitalMarkerCluster;
let specimenMarkerCluster; let specimenMarkerCluster;
const AForm = Form;
const AFormItem = Form.Item;
const instance = getCurrentInstance(); const instance = getCurrentInstance();
const mapState = reactive({ const mapState = reactive({
loading: true, loading: false,
toggleOperatePanelClass: { toggleOperatePanelClass: {
span: 'none', span: 'none',
p: 'block', p: 'block',
@ -42,14 +52,6 @@
}, },
toggleStatus: true toggleStatus: true
}); });
/** 地图创建完成(动画关闭) */
const complete = (): void => {
if (map) {
map.on('complete', () => {
mapState.loading = false;
});
}
};
onBeforeMount(() => { onBeforeMount(() => {
if (!instance) return; if (!instance) return;
@ -64,7 +66,7 @@
keyboardEnable: true keyboardEnable: true
} }
}; };
mapState.loading = true;
AMapLoader.load({ AMapLoader.load({
key: mapConfig.amapKey, key: mapConfig.amapKey,
version: '2.0', version: '2.0',
@ -142,11 +144,8 @@
renderMarker(ctx) { renderMarker(ctx) {
const { marker, data } = ctx; const { marker, data } = ctx;
if (Array.isArray(data) && data[0]) { if (Array.isArray(data) && data[0]) {
const { title, orientation, southWest, northEast, notify } = data[0]; const { title, orientation, notify } = data[0];
let content = `<img width="30px" let content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospital}'/>`;
height="30px"
style="transform: scale(1) rotate(${360 - Number(orientation)}deg);"
src='${hospital}'/>`;
marker.setLabel({ marker.setLabel({
direction: 'bottom', direction: 'bottom',
// //
@ -155,38 +154,8 @@
content: `<div>${title}</div>` content: `<div>${title}</div>`
}); });
marker.setOffset(new AMap.Pixel(-18, -10)); marker.setOffset(new AMap.Pixel(-18, -10));
if (notify && southWest?.length>0 && northEast?.length>0) { if (notify) {
// content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospitalTwinkle}'/>`;
const canvas = document.createElement('canvas');
canvas.width = canvas.height = 200;
const context = canvas.getContext('2d');
context.fillStyle = 'rgb(0,100,255)';
context.strokeStyle = 'white';
context.globalAlpha = 1;
context.lineWidth = 1;
let radious = 0;
const draw = function () {
context.clearRect(0, 0, 200, 200);
context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1;
radious = (radious + 1) % 100;
context.beginPath();
context.arc(100, 100, radious, 0, 2 * Math.PI);
context.fill();
context.stroke();
//
canvasLayer.reFresh();
AMap.Util.requestAnimFrame(draw);
};
const canvasLayer = new AMap.CanvasLayer({
canvas: canvas,
bounds: new AMap.Bounds(southWest, northEast)
});
map.addLayer(canvasLayer);
draw();
content = `<img width="30px"
height="30px"
style="transform: scale(1) rotate(${360 - Number(orientation)}deg);"
src='${hospitalTwinkle}'/>`;
} }
marker.setContent(content); marker.setContent(content);
} }
@ -194,7 +163,7 @@
renderClusterMarker(ctx) { renderClusterMarker(ctx) {
const { clusterData, marker, count } = ctx; const { clusterData, marker, count } = ctx;
let content = `<img width="30px" height="30px" src='${hospital}'/>`; let content = `<img width="30px" height="30px" src='${hospital}'/>`;
if(clusterData.some(item => item.notify && item.southWest?.length>0 && item.northEast?.length>0)){ if(clusterData.some(item => item.notify)){
content = `<img width="30px" height="30px" src='${hospitalTwinkle}'/>`; content = `<img width="30px" height="30px" src='${hospitalTwinkle}'/>`;
} }
marker.setContent(content); marker.setContent(content);
@ -264,27 +233,6 @@
})); }));
specimenMarkerCluster?.setData(specimenPoints); specimenMarkerCluster?.setData(specimenPoints);
//
/*const southWest = new AMap.LngLat(112.916931,28.283041);
const northEast = new AMap.LngLat(112.919049,28.284781);
const bounds = new AMap.Bounds(southWest, northEast);
const rectangle = new AMap.Rectangle({
bounds: bounds,
strokeColor:'red',
strokeWeight: 6,
strokeOpacity:0.5,
strokeDasharray: [30,10],
strokeStyle: 'dashed',
fillColor:'blue',
fillOpacity:0.5,
cursor:'pointer',
zIndex:50
});
rectangle.setMap(map);
map.setFitView([rectangle]);
const rectangleEditor = new AMap.RectangleEditor(map, rectangle);
rectangleEditor.open();*/
// 线 // 线
const driving = new AMap.Driving({ const driving = new AMap.Driving({
map: map, map: map,
@ -313,10 +261,19 @@
onUnmounted(() => { onUnmounted(() => {
if (map) { if (map) {
// //
map.destroy() && map.clearEvents('click'); map.destroy() && map.clearEvents();
} }
}); });
/** 地图创建完成(动画关闭) */
function complete () {
if (map) {
map.on('complete', () => {
mapState.loading = false;
});
}
}
/** 处理切换操作面板 */ /** 处理切换操作面板 */
function toggleOperatePanel() { function toggleOperatePanel() {
mapState.toggleStatus = !mapState.toggleStatus; mapState.toggleStatus = !mapState.toggleStatus;

8
kicc-ui/src/components/AMap/src/data.ts

@ -10,8 +10,6 @@ type mapType = {
orientation: number; orientation: number;
lng: number; lng: number;
lat: number; lat: number;
southWest: number[];
northEast: number[];
notify: boolean; notify: boolean;
}; };
@ -22,9 +20,9 @@ export const largeHospitalMapList: mapType[] = [
]; ];
export const smallHospitalMapList: mapType[] = [ export const smallHospitalMapList: mapType[] = [
{title: '下级医院:湘雅医院', orientation: 0, lng: 112.918119, lat: 28.282891, southWest: [112.916931,28.283041], northEast: [112.919049,28.284781], notify: true}, {title: '下级医院:湘雅医院', orientation: 0, lng: 112.918119, lat: 28.282891, notify: true},
{title: '下级医院:神经病医院', orientation: 0, lng: 112.918919, lat: 28.282991, southWest: [112.917838,28.282044], northEast: [112.919956,28.283784], notify: true}, {title: '下级医院:神经病医院', orientation: 0, lng: 112.918919, lat: 28.282991, notify: true},
{title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, southWest: [112.917033,28.281883], northEast: [112.919151,28.283623], notify: true} {title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, notify: true}
]; ];
export const specimenMapList: mapType[] = [ export const specimenMapList: mapType[] = [

Loading…
Cancel
Save