vue 中 canvas 和svg合用制作地图

<template><div class="contents"><div class="lefttop1-title">区域</div><img id="police" src="../assets/police.svg" style="display:none;"  width="395px" height="343px"><div id="contentMap" style="width: 100%;height: 95%;"><canvas id="areaCanvas" width="395px" height="343px" style="width:90%;height:90%;margin-left:20px;"></canvas></div></div>
</template><script>//vue中点在不规则图形中的判断var inside = require( 'point-in-polygon' );import {generatePolygon} from '../api/index.js'export default {data () {return {collectionArr: [],}},mounted () {// 地图坐标generatePolygon().then(response => {this.collectionArr = response.data;this.drawPolygons();});},methods: {
//          地图drawPolygons: function () {var canvas = document.getElementById( 'areaCanvas' );if ( null == canvas || !canvas.getContext ) return;var ctx = canvas.getContext( "2d" );var  img=document.getElementById("police");if(img.complete){ctx.drawImage(img, 0, 0);}else{img.onload = function() {ctx.drawImage(img, 0, 0);}}//鼠标移动事件this.canvasMousemoveEvent( canvas, ctx );//click事件this.canvasClickEvent( canvas );},canvasMousemoveEvent: function ( canvas, ctx ) {var _this = this;canvas.onmousemove = function ( e ) {//清除绘制图形_this.clearPolygon(ctx,canvas);//  ctx.clearRect( 0, 0, canvas.width, canvas.height );var location = _this.getLocation( canvas, e.clientX, e.clientY );_this.drawPolygonByPoint( ctx, location, e ,canvas);};},canvasClickEvent: function ( canvas ) {var _this = this;canvas.onclick = function ( e ) {var location = _this.getLocation( canvas, e.clientX, e.clientY );var count = 0;_this.collectionArr.map( obj => {var pointsArr = obj.polygon;count++;if ( location != null && inside( location, pointsArr ) == true ) {alert(obj.name);}} );};},drawPolygonByPoint: function ( ctx, location, e ,canvas) {//清除titlethis.clearTitle();this.collectionArr.map( obj => {var pointsArr = obj.polygon;if ( location != null && inside( location, pointsArr ) == true ) {//绘制高亮图形this.drawHighLightPolygon( ctx, pointsArr,canvas );this.displayTitle(e,obj.name);}} );},clearTitle: function () {var div = document.getElementById( 'title' );if ( div != null ) {document.body.removeChild(div);}},displayTitle: function ( e ,name) {var div = document.createElement( "div" );div.setAttribute( "id", "title" );div.style.position = "absolute";div.style.left = e.clientX + 10 + "px";div.style.top = e.clientY + "px"div.innerText = name;div.style.backgroundColor = "gray";div.style.zIndex = "9999";document.body.appendChild( div );},drawHighLightPolygon: function ( ctx, pointsArr ,canvas) {ctx.beginPath();for ( let i = 0; i < pointsArr.length; i++ ) {var pointX = Math.round(canvas.width * pointsArr[ i ][ 0 ])+1;var pointY = Math.round(canvas.height * pointsArr[ i ][ 1 ])+1;ctx.lineWidth=2;if ( i == 0 ) {ctx.moveTo( pointX, pointY );} else if ( i < pointsArr.length - 1 ) {ctx.lineTo( pointX, pointY );} else {ctx.lineTo( pointX, pointY );ctx.strokeStyle = "#FF7F00";ctx.closePath();ctx.stroke();}}},clearPolygon: function(ctx,canvas){ctx.clearRect( 0, 0, canvas.width, canvas.height );var  img=document.getElementById("police");ctx.drawImage(img, 0, 0);},getLocation: function ( canvas, x, y ) {var bbox = canvas.getBoundingClientRect();return [ ( x - bbox.left ) * ( canvas.width / bbox.width )/canvas.width, ( y - bbox.top ) * ( canvas.height / bbox.height )/canvas.height ];/** 此处不用下面两行是为了防止使用CSS和JS改变了canvas的高宽之后是表面积拉大而实际* 显示像素不变而造成的坐标获取不准的情况x: (x - bbox.left),y: (y - bbox.top)*/},}}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>.contents {float: left;height: 98.5%;width: 41.3%;border: 1px solid rgba(15, 208, 198, 0.50);box-shadow: inset 0 2px 19px 0 rgba(15, 208, 198, 0.80);margin-left: 1.4%;margin-right: 1.4%;}.lefttop1-title{text-align: center;color: #0FD0C6;font-size: 12px;background: url(../assets/Group.png) no-repeat;width: 170px;line-height: 25px;display: inline-block;}
</style>其中police.svg做地图，鼠标移动到某一区域，高亮显示该区域（在底图上只画出该区域）。
所有区域的坐标点使用svg导出的相对坐标，在画图时要根据canvas画布转换成绝对坐标。
collectionArr数据结构：
collectionArr: [{name:'区域一',polygon:[[0.0123,0.1723],...]},{name:'区域二',polygon:[[0.0123,0.1723],...]},...]

vue 中 canvas 和svg合用制作地图相关推荐

vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
Vue中如何根据svg内容显示图片
概述在写前端项目中,我们免不了需要在页面上显示图片,有的是静态图片,需要直接访问项目内的文件:有的需要从后端接口动态获取图片信息,再在页面上显示. 因为svg图片有:矢量图形,不受像素影响:SVG的 ...
H5中canvas和svg绘图方式介绍
在HTML5中包括了两种绘图方式,canvas和svg(矢量呈现),而与canvas不同的是,svg是一种XML标记语言,它既可以单独保存以".svg"为后缀的文件在浏览器中打开显 ...
vue中canvas签名
vue用canvas横屏签名最近遇到一个签名需求由于canvas一些特性,横屏签名不好控制,也是多方借鉴才解决,写真就是为了记录下,方便有需要的同学. js代码如下: import Draw fro ...
Vue中实现电子围栏/围栏（高德地图）功能：
1.思路(大部分与车辆轨迹相同): [1]先获取key=>官网:https://lbs.amap.com/?ref=https://console.amap.com [2]下载并导入依赖=> ...
vue中使用eCharts插件显示中国地图
一.前言由于项目需求,需要一个中国地图,上面根据从服务器获取到的数据,显示各省份的数据.在eEcharts官网,发现没有地图相关的案列(搜索了一下,都下架了),只有社区有. 二.查找资料 eChar ...
实训项目 ---- vue中小说首页页面的制作
小说首页页面的制作 1.先引入外部样式 2.建div的盒子 3.建script文本 4.建style样式 5.建img文件夹 <title>Document</title>& ...
在vue中使用echarts,echarts-map:echarts画地图
1.首先安装:cnpm install echarts --save 2.然后main.js引入(也可以组件内引入) // 引入ECharts图表公共组件 import echarts from 'e ...
vue 中canvas 根据点画出圆滑的曲线
文件BezierMaker.js var BezierMaker = function(canvas, bezierCtrlNodesArr, color) {// this.canvas = can ...

vue 中 canvas 和svg合用制作地图

vue 中 canvas 和svg合用制作地图相关推荐

最新文章

热门文章