vue实现天地图行政区（新疆为例）轮廓描边（一）

引入天地图文件

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src * http://api.tianditu.com/img/map/mapctrls.png data: http://api.tianditu.com;style-src 'self' 'unsafe-inline' http://api.tianditu.gov.cn/v4.0/css/tianditu4.0.css; script-src * 'unsafe-inline' 'unsafe-eval'">
<meta http-equiv="P3P" content='CP="IDC DSP COR CURa ADMa  OUR IND PHY ONL COM STA"'>
<link rel="icon" href="<%= BASE_URL %>logo.ico">
<script src="config.js"></script>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>

页面加载天地图

loadMap () {let location = this.defaultLocation // 设置地图中心点let lnglat = new T.LngLat(location.lng, location.lat) // 创建经纬度坐标let imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' +'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +'&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的密钥' // 影像图层let imageURL2 = 'http://t0.tianditu.gov.cn/cia_w/wmts?' +'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +'&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的密钥' // 影像注记const lay = new T.TileLayer(imageURL, { opacity: this.opacity })const lay2 = new T.TileLayer(imageURL2, { opacity: this.opacity })const config = { layers: [lay,lay2], name: 'TMAP_SATELLITE_MAP' } // 卫星视图if (this.map === null) {this.map = new T.Map('mapContainer', config) // 创建地图实例this.map.centerAndZoom(lnglat, this.mapZoom) // 地图初始化this.map.disableScrollWheelZoom() // 禁止地图缩放this.map.disableDrag() // 禁止地图拖拽this.map.disableDoubleClickZoom() // 禁用双击变大// this.map.disableKeyboard() // 禁止键盘操作// this.map.disableInertia() // 禁用地图惯性拖拽} else {this.map.panTo(lnglat) // 地图定位}}

实现效果如下：

绘制新疆轮廓

drawLine () {let style = {color: 'blue',weight: 3,opacity: 1,lineStyle : 'dashed', // 虚线fillColor : 'transprent',fillOpacity : 0 // 透明度}let points = []lines.forEach(line => { // lines是边界经纬度组成的数组var point = new T.LngLat(line[0], line[1])points.push(point)})var poly = new T.Polygon(points, style)this.map.addOverLay(poly)}

实现效果

vue实现天地图行政区（新疆为例）轮廓描边（一）相关推荐

百度地图按行政区、县划分轮廓界限
背景在物联网行业,用户.决策者通常需要直观地看到不同区域.地点处的设备部署情况,便于了解整体分布.通过在数字地图上动态划分各区.县的边界,同时显示每个区域的设备数量,可实现这一需求.其实,这种技术已 ...
UE4轮廓描边【非后处理】
轮廓是在 3D 环境中突出显示对象的绝佳工具.到目前为止,我尝试过的大多数 Unreal 解决方案都是基于后处理 (PP) 技术来实现对象轮廓的.对我来说,PP 解决方案在行为和外观方面一直是最有效的 ...
实现游戏中的轮廓描边
Unity3D教程:实现游戏中的轮廓描边.Unity3D游戏中常用到轮廓描边,效果就是对轮廓描边后再进行模糊处理.有两种思路可以实现: 一.在RTT中绘制单一像素,对1绘制后的RTT进行blur处理惩 ...
Web中树形数据(层级关系数据)的实现—以行政区树为例
在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...
Vue结合天地图(天地图API)Gis开发
(此代码结合vue.element-ui) 1.首先在index.html中引入需要的文件当前引入的是在线的gis文件,如需离线也可以换成离线文件 <scri ...
Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）
最近项目需要用到天地图,要引入到Vue项目中,鉴于官网没有相关的说明文档,在这里我记录一下我所使用的引入方法,可能不是很好,希望有更好的方法大佬能教一下我. 第一步,在Vue项目文件夹public下的 ...
Vue — 第七天（vue-cli-案例）
资料获取地址: github: https://gitee.com/wang_yu5201314/VUE_vuecli SSH: git@gitee.com:wang_yu5201314/VUE_vu ...
Vue关于天地图的使用自定义标注、自定义折线工具、自定义多边形工具
一.天地图的引用其实天地图的使用与其他地图(百度等),个人觉得大同小异,个人的方法是在项目里面的public目录下的index.html文件下导入然后在你想要使用的页面上把地图显示出来就好了注意 ...
vue使用天地图、openlayers实现多个底图叠加显示
实现效果: 需求:根据返回的经纬度列表通过天地图.openlayers实现底图添加(航道图层.线图层.水深图层) tk:自己申请的密钥安装opelayers cnpm i -S ol #或者 npm ...

vue实现天地图行政区（新疆为例）轮廓描边（一）

引入天地图文件

页面加载天地图

绘制新疆轮廓

vue实现天地图行政区（新疆为例）轮廓描边（一）相关推荐

最新文章

热门文章