精华内容
下载资源
问答
  • openlayer标注中文本在地图放大到一定级别再显示?
  • OpenLayer标注浅析

    千次阅读 2016-08-18 12:25:11
    图层标注 顾名思义,即是用添加矢量层来进行标注的显示。缺点是需要增加一个图层,在鹰眼上标注也会阻碍视野。 var beijing = ol.proj.fromLonLat([116.28,39.54]); //定义一个坐标点 //创建标注要素 var ...

    图层标注

    顾名思义,即是用添加矢量层来进行标注的显示。缺点是需要增加一个图层,在鹰眼上标注也会阻碍视野。
     var beijing = ol.proj.fromLonLat([116.28,39.54]); //定义一个坐标点
    	//创建标注要素
    	var iconFeature = new ol.Feature({ //创建一个要素,作为标注
    		geometry:new ol.geom.Point(beijing), //必要
    		name:'北京市',   //以下属性随便定义
    		population:2115
    	});
     	iconFeature.setStyle(new ol.style.Style({ //定义样式(必要,否则不会显示)
    <span style="white-space:pre">		</span>image:new ol.style.Icon({ //定义图案
    			anchor:[0.5,1],  //位置
    			src:'./image/dialog.png' //图案
    		}),
    		text:new ol.style.Text({ //文字格式
    			textAlign:'center',
    			textBaseline:'middle',
    			font:'normal 14px 微软雅黑',
    			text:iconFeature.get('name'),
    			fill:new ol.style.Fill({color:'#000000'}),
    			stroke:new ol.style.Stroke({color:'#ffcc33',width:2})
    		})
    	})
    	);  

    然后,再添加到新建的矢量图层中。
    //创建矢量标注图层
    	var vsource = new ol.source.Vector({ //矢量源
    		features:[iconFeature] //将前面的标注放进要素里
    	});
    	var vector = new ol.layer.Vector({ //创建矢量图层
    		source:vsource  //放入矢量源
    	});
    	map.addLayer(vector); //地图添加

    叠加标注

    即是通过Overlay的方式进行添加,抹去了图层标注的缺点。
    <!--先添加好一个div待显示-->
    <div id="label" style="display:none;"><!--设置隐藏--> 
    		<div id="marker" class="marker" title="Marker">
    			<a class="address" id="address" target="blank">.....</a>
    		</div>
    	</div>
    然后再套入标注
    var wuhan = ol.proj.fromLonLat([114.21,30.37]);
    	//添加图形标注
    	var marker = new ol.Overlay({
    		position:wuhan,
    		positioning:'center-center',
    		element:document.getElementById('marker'),
    		stopEvent:false
    	});
    	map.addOverlay(marker); //添加
    
    	//添加文字标注
    	var text = new ol.Overlay({
    		position:wuhan,
    		element:document.getElementById('address')
    	});
    	map.addOverlay(text); //添加
     	text.getElement().innerText = "武汉";  //替换文字
    注意:样式在网页的style中添加(最大的优点是样式可以分给美工去做,自己不用分心做这个)

    弹出标注(popup)

    要借助要素来实现高级功能,我直接把所有的东西放出来,可以直接用。
    <style type="text/css">
    	#map{width:100%;height:100%;position:absolute;background-color:#dddddd;}
    	.ol-popup{position:absolute;background-color:white;-webkit-filter:drop-shadpw(0 1px 4px rgba(0,0,0,0.2));
    			  filter:drop-shadpw(0 1px 4px rgba(0,0,0,0.2));padding:15px;border-radius:10px;border:1px solid #cccccc;\
    			  top:0px;left:-50px;}
    	.ol-popup:after,.ol-popup:before{top:100%;border:solid transparent;content:"";height:0;width:0;position:absolute;
    									 pointer-events:none;}
    	.ol-popup:after{border-top-color:white;border-width:10px;left:48px;margin-left:-10px;}
    	.ol-popup:before{border-top-color:#cccccc;border-width:11px;left:48px;margin-left:-11px;}
    	.ol-popup-closer{text-decoration:none;position:absolute;top:2px;right:8px;}
    	.ol-popup-closer:after{content:"X"}
    	#popup-content{font-size:14px;font-family:"微软雅黑";}
    
    </style>
    
    <!--添加弹出div-->
    	<div id="map"></div>
    	<div id="popup" class="ol-popup">
    			<a href="#" id="popup-closer" class="ol-popup-closer"></a>
    			<div id="popup-content"></div>
    	</div>
    功能函数
    //图层标注形式(内部调用)
    function newFeature(point,cityname){
    	var feature = new ol.Feature({
    		geometry:new ol.geom.Point(point),
    		name:cityname
    	});
    	feature.setStyle(new ol.style.Style({ 
     		image:new ol.style.Icon({
    			anchor:[0.5,1],
    			src:'./image/dialog.png'
    		    }),
    		text:new ol.style.Text({
    			textAlign:'center',
    			textBaseline:'middle',
    			font:'normal 14px 微软雅黑',
    			text:feature.get('name'),
    			fill:new ol.style.Fill({color:'#000000'}),
    			stroke:new ol.style.Stroke({color:'#ffcc33',width:2})
    			})
     		}));
    	return feature;
    }
    //popup信息编写(内部调用)
    function postInfo(point,infotitle,url,txt,img){
    	//自定义JSON格式
    	return info = {
    			geo:point,
    			att:{
    				title:infotitle,
    				titleURL:url,
    				text:txt,
    				imgURL:img
    			}
    	};
    }
    //在容器中添加信息(内部调用)
    function addInfo(info,content){
    	content.innerHTML = '';//清空popup的内容
    	
    	//创建a元素
    	var elementA = document.createElement('a');
    	elementA.href = info.att.titleURL;
    	elementA.innerText = info.att.title;
    	content.appendChild(elementA);
    	
    	//新建div
    	var Div = document.createElement('div');
    	Div.innerText = info.att.text;
    	content.appendChild(Div);
    	
    	//新建img
    	var Img = document.createElement('img');
    	Img.src = info.att.imgURL;
    	content.appendChild(Img);
    }
    //测试函数:在外部调用
    function popuplabel(map){
    	var beijing = ol.proj.fromLonLat([116.28,39.54]);
    	var wuhan = ol.proj.fromLonLat([114.21,30.37]);
    	//创建标注要素
    	iconFeature1 = newFeature(beijing,'北京');
    	iconFeature2 = newFeature(wuhan,'武汉');
     	//创建矢量标注图层
    	var v_source = new ol.source.Vector({
    		features:[iconFeature1,iconFeature2]
    	});
    	var vector = new ol.layer.Vector({
    		source:v_source,
    		name:'矢量标注'
    	});
    	map.addLayer(vector);
    	
    	var info = postInfo(beijing,"北京","www.baidu.com","你好北京",'./image/uu.png');
    	//获取容器
        var container = document.getElementById('popup');//主体
        var content = document.getElementById('popup-content');//正文
        var closer = document.getElementById('popup-closer');//关闭框
        
        //创建弹出标注
        var popup = new ol.Overlay({
        	element:container,
        	autoPan:true,
        	positioning:'top-center',
        	stopEvent:false,
        	autoPanAnimation:{duration:250}
        });
        map.addOverlay(popup);
        
        //关闭事件
        closer.onclick = function(){
        	popup.setPosition(undefined);
        	closer.blur(); //失去焦点
        	return false;
        };
        //点击事件
        map.on('click',function(evt){
        	var xy = evt.coordinate;
        	var feature = map.forEachFeatureAtPixel(evt.pixel,function(feature,layer){ //获取鼠标点上的要素
        		return feature;
        		}
        	);
        	if(feature==iconFeature1){
        		addInfo(info,content,popup);
        		if(popup.getPosition()==undefined){
        			popup.setPosition(xy); //进行坐标设置
        		}
        	}
        }
       );
        //鼠标移动事件:触到要素变鼠标指针
        map.on('pointermove',function(e){
        	var pixel = map.getEventPixel(e.originalEvent); //获取地图上的坐标
        	var hit = map.hasFeatureAtPixel(pixel);//获取地图坐标上的要素
        	map.getTargetElement().style.cursor = hit?'pointer':''; //设置DOM对象的指针
        });
    }










    展开全文
  • 主要为大家详细介绍了openLayer4实现动态改变标注图标,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 一、引入依赖的库文件 import React, { Component } from 'react'; import Map from '../../component/map/map'; // 数据源 import { Vector as VectorSource } from 'ol...import { Vector} from 'ol/layer'; // ...

    一、引入依赖的库文件

    import React, { Component } from 'react';
    import Map from '../../component/map/map';
    // 数据源
    import { Vector as VectorSource } from 'ol/source';
    // 图层
    import { Vector} from 'ol/layer';
    // 要素
    import Feature from 'ol/Feature';
    // 
    import {Point} from 'ol/geom';
    // 坐标系转化
    import {fromLonLat} from 'ol/proj';
    // 样式
    import {Icon,Style} from 'ol/style';
    // mark标注图片
    import markImage from '../../assets/Marker.png'

    二、加载地图组件

      
      render() {
        return (
          <div  >
            {/* <img src={bg}></img> */}
            <button onClick={this.addMarker}>点击开始添加标注</button>
            <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
          </div>
        );
      }

    三、添加标注

     let {map} = this.refs.map
        //创建标注要素
        let markFeature = new Feature({
            geometry: new Point(fromLonLat([116.28, 39.54])),
    
        })
        //设置图标的样式
        markFeature.setStyle(this.setMakerStyle)
        // 创建标注的数据源
        var vectorSource = new VectorSource({
            features: [markFeature]
        });
        // 创建标注图层
        var vectorLayer = new Vector({
            source: vectorSource
        });
        // 将标注图层添加到地图上
        map.addLayer(vectorLayer);
    
        this.setState({
            vectorSource
        })

    四、全部代码

    // 设置地图背景色
    import React, { Component } from 'react';
    import Map from '../../component/map/map';
    // 数据源
    import { Vector as VectorSource } from 'ol/source';
    // 图层
    import { Vector} from 'ol/layer';
    // 要素
    import Feature from 'ol/Feature';
    // 
    import {Point} from 'ol/geom';
    // 坐标系转化
    import {fromLonLat} from 'ol/proj';
    // 样式
    import {Icon,Style} from 'ol/style';
    // mark标注图片
    import markImage from '../../assets/Marker.png'
    class MapOverviewMap extends Component {
        constructor(props){
            super(props)
            this.state={
                
            }
        }
      componentDidMount() {
        let {map} = this.refs.map
        //创建标注要素
        let markFeature = new Feature({
            geometry: new Point(fromLonLat([116.28, 39.54])),
    
        })
        //设置图标的样式
        markFeature.setStyle(this.setMakerStyle)
        // 创建标注的数据源
        var vectorSource = new VectorSource({
            features: [markFeature]
        });
        // 创建标注图层
        var vectorLayer = new Vector({
            source: vectorSource
        });
        // 将标注图层添加到地图上
        map.addLayer(vectorLayer);
    
        this.setState({
            vectorSource
        })
    
      }
    
      addMarker = ()=>{
        let {map} = this.refs.map
        let that = this
       //鼠标单击事件
       map.on('singleclick', function (e) {
            console.log(e)
            // alert("鼠标被单击了"+e.coordinate);
            that.addMakerOn(e.coordinate)
        });
      }
    
      addMakerOn = (coordinate)=>{
        //创建标注要素
        let markFeature = new Feature({
            geometry: new Point(coordinate),
    
        })
        //设置图标的样式
        markFeature.setStyle(this.setMakerStyle)
        // 图标要素添加到数据源上
        this.state.vectorSource.addFeature(markFeature)
      }
    
      setMakerStyle=()=>{
       return new Style({
            /**{olx.style.IconOptions}类型*/
            image: new Icon(
                ({
                    anchor: [0.5, 40],
                    anchorOrigin: 'top-right',
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    offsetOrigin: 'top-right',
                    // offset:[0,10],
                    //图标缩放比例
                    scale:0.6,
                    //透明度
                    opacity: 0.75,
                    //图标的url
                    src: markImage
                })
                )
        })
      }
      
      render() {
        return (
          <div  >
            {/* <img src={bg}></img> */}
            <button onClick={this.addMarker}>点击开始添加标注</button>
            <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
          </div>
        );
      }
    }
    
    export default MapOverviewMap;

    五、效果图

     

     

     

     

     

    展开全文
  • import { Vector } from 'ol/layer'; // 要素 import Feature from 'ol/Feature'; // import { Point } from 'ol/geom'; // 坐标系转化 import { fromLonLat } from 'ol/proj'; // 样式 import {Icon,Style,Text,...

    一、引入所依赖的库文件

    // 设置地图背景色
    import React, { Component } from 'react';
    import Map from '../../component/map/map';
    // 数据源
    import { Vector as VectorSource } from 'ol/source';
    // 图层
    import { Vector } from 'ol/layer';
    // 要素
    import Feature from 'ol/Feature';
    //
    import { Point } from 'ol/geom';
    // 坐标系转化
    import { fromLonLat } from 'ol/proj';
    // 样式
    import {Icon,Style,Text,Fill,Stroke} from 'ol/style';
    // mark标注图片
    import markImage from '../../assets/Marker.png';

    二、加载地图组件

     render() {
        return (
          <div>
            {/* <img src={bg}></img> */}
            <button onClick={this.addMarker}>点击开始添加标注</button>
            <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
          </div>
        );
      }

    三、加载地图个图文标注

    
      componentDidMount() {
        let { map } = this.refs.map;
        //创建标注要素
        let markFeature = new Feature({
          geometry: new Point(fromLonLat([116.28, 39.54])),
          name:"标注"
        });
        //设置图标的样式
        markFeature.setStyle(this.setMakerStyle(markFeature));
        // 创建标注的数据源
        var vectorSource = new VectorSource({
          features: [markFeature],
        });
        // 创建标注图层
        var vectorLayer = new Vector({
          source: vectorSource,
        });
        // 将标注图层添加到地图上
        map.addLayer(vectorLayer);
    
        this.setState({
          vectorSource,
        });
      }
    
     
    
    
    
    
    

    三、全部代码

    // 设置地图背景色
    import React, { Component } from 'react';
    import Map from '../../component/map/map';
    // 数据源
    import { Vector as VectorSource } from 'ol/source';
    // 图层
    import { Vector } from 'ol/layer';
    // 要素
    import Feature from 'ol/Feature';
    //
    import { Point } from 'ol/geom';
    // 坐标系转化
    import { fromLonLat } from 'ol/proj';
    // 样式
    import {Icon,Style,Text,Fill,Stroke} from 'ol/style';
    // mark标注图片
    import markImage from '../../assets/Marker.png';
    class AddMarker extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }
      componentDidMount() {
        let { map } = this.refs.map;
        //创建标注要素
        let markFeature = new Feature({
          geometry: new Point(fromLonLat([116.28, 39.54])),
          name:"标注"
        });
        //设置图标的样式
        markFeature.setStyle(this.setMakerStyle(markFeature));
        // 创建标注的数据源
        var vectorSource = new VectorSource({
          features: [markFeature],
        });
        // 创建标注图层
        var vectorLayer = new Vector({
          source: vectorSource,
        });
        // 将标注图层添加到地图上
        map.addLayer(vectorLayer);
    
        this.setState({
          vectorSource,
        });
      }
    
      addMarker = () => {
        let { map } = this.refs.map;
        let that = this;
        //鼠标单击事件
        map.on('singleclick', function(e) {
          console.log(e);
          // alert("鼠标被单击了"+e.coordinate);
          that.addMakerOn(e.coordinate);
        });
      };
    
      addMakerOn = coordinate => {
        //创建标注要素
        let markFeature = new Feature({
          geometry: new Point(coordinate),
          name:'标注'
        });
        //设置图标的样式
        markFeature.setStyle(this.setMakerStyle(markFeature));
        // 图标要素添加到数据源上
        this.state.vectorSource.addFeature(markFeature);
      };
    
      setMakerStyle = (feature) => {
        return new Style({
          /**{olx.style.IconOptions}类型*/
          image: new Icon({
            anchor: [0.5, 40],
            anchorOrigin: 'top-right',
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            offsetOrigin: 'top-right',
            // offset:[0,10],
            //图标缩放比例
            scale: 0.6,
            //透明度
            opacity: 0.75,
            //图标的url
            src: markImage,
          }),
          text: new Text({
            //位置
            textAlign: 'center',
            //基准线
            textBaseline: 'middle',
            //文字样式
            font: 'normal 14px 微软雅黑',
            //文本内容
            text: feature.get('name'),
            //文本填充样式(即文字颜色)
            fill: new Fill({ color: '#aa3300' }),
            stroke: new Stroke({ color: '#ffcc33', width: 2 })
        })
        });
      };
    
      render() {
        return (
          <div>
            {/* <img src={bg}></img> */}
            <button onClick={this.addMarker}>点击开始添加标注</button>
            <Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
          </div>
        );
      }
    }
    
    export default AddMarker;
    

    五、效果图

     

     

     

     

     

    展开全文
  • import { Vector} from 'ol/layer'; // 要素 import Feature from 'ol/Feature'; // import {Point} from 'ol/geom'; // 坐标系转化 import {fromLonLat} from 'ol/proj'; // 样式 import {Icon,Style,Text,Fill,...

    一、引入依赖的库文件

    // 设置地图背景色
    import React, { Component } from 'react';
    import Map from '../../component/map/map';
    // 数据源
    import { Vector as VectorSource } from 'ol/source';
    // 图层
    import { Vector} from 'ol/layer';
    // 要素
    import Feature from 'ol/Feature';
    // 
    import {Point} from 'ol/geom';
    // 坐标系转化
    import {fromLonLat} from 'ol/proj';
    // 样式
    import {Icon,Style,Text,Fill,Stroke} from 'ol/style';
    // mark标注图片
    import AddMarkerpng from '../../assets/Marker.png'

    二、加载地图组件

    
      render() {
        return (
          <div  >
            {/* <img src={bg}></img> */}
            <button onClick={this.addMarker}>点击开始添加标注</button>
            <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
          </div>
        );
      }

    三、地图的渲染和文字标注的添加

    componentDidMount() {
        let {map} = this.refs.map
        //创建标注要素
        let markFeature = new Feature({
            // 几何信息
            geometry: new Point(fromLonLat([116.28, 39.54])),
            // 名称属性
            name: '标注点'
        })
        //设置图标的样式
        markFeature.setStyle(this.setMakerStyle(markFeature))
        // 创建标注的数据源
        var vectorSource = new VectorSource({
            features: [markFeature]
        });
        // 创建标注图层
        var vectorLayer = new Vector({
            source: vectorSource
        });
        // 将标注图层添加到地图上
        map.addLayer(vectorLayer);
    
        this.setState({
            vectorSource
        })
    
      }
    

    四、全部代码

    // 设置地图背景色
    import React, { Component } from 'react';
    import Map from '../../component/map/map';
    // 数据源
    import { Vector as VectorSource } from 'ol/source';
    // 图层
    import { Vector} from 'ol/layer';
    // 要素
    import Feature from 'ol/Feature';
    // 
    import {Point} from 'ol/geom';
    // 坐标系转化
    import {fromLonLat} from 'ol/proj';
    // 样式
    import {Icon,Style,Text,Fill,Stroke} from 'ol/style';
    // mark标注图片
    import AddMarkerpng from '../../assets/Marker.png'
    class AddMarkerLable extends Component {
        constructor(props){
            super(props)
            this.state={
                
            }
        }
      componentDidMount() {
        let {map} = this.refs.map
        //创建标注要素
        let markFeature = new Feature({
            // 几何信息
            geometry: new Point(fromLonLat([116.28, 39.54])),
            // 名称属性
            name: '标注点'
        })
        //设置图标的样式
        markFeature.setStyle(this.setMakerStyle(markFeature))
        // 创建标注的数据源
        var vectorSource = new VectorSource({
            features: [markFeature]
        });
        // 创建标注图层
        var vectorLayer = new Vector({
            source: vectorSource
        });
        // 将标注图层添加到地图上
        map.addLayer(vectorLayer);
    
        this.setState({
            vectorSource
        })
    
      }
    
      addMarker = ()=>{
        let {map} = this.refs.map
        let that = this
       //鼠标单击事件
       map.on('singleclick', function (e) {
            console.log(e)
            // alert("鼠标被单击了"+e.coordinate);
            that.addMakerOn(e.coordinate)
        });
      }
    
      addMakerOn = (coordinate)=>{
        //创建标注要素
        let markFeature = new Feature({
            // 几何信息
            geometry: new Point(coordinate),
            // 名称属性
            name: '标注点'
        })
        //设置图标的样式
        markFeature.setStyle(this.setMakerStyle(markFeature))
        // 图标要素添加到数据源上
        this.state.vectorSource.addFeature(markFeature)
      }
    
      setMakerStyle=(feature)=>{
       return new Style({
            text: new Text({
                //位置
                textAlign: 'center',
                //基准线
                textBaseline: 'middle',
                //文字样式
                font: 'normal 14px 微软雅黑',
                //文本内容
                text: feature.get('name'),
                //文本填充样式(即文字颜色)
                fill: new Fill({ color: '#aa3300' }),
                stroke: new Stroke({ color: '#ffcc33', width: 2 })
            })
        })
      }
      
      render() {
        return (
          <div  >
            {/* <img src={bg}></img> */}
            <button onClick={this.addMarker}>点击开始添加标注</button>
            <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
          </div>
        );
      }
    }
    
    export default AddMarkerLable;

    五、效果题

     

     

     

     

    展开全文
  • openLayer4动态改变标注图标

    千次阅读 2017-08-14 16:27:02
    地图上经常需要标出...此实例即在地图上添加图片标注,点击标注,更换标注图片,再点击其他标注,上一个标注恢复原来的标注图片。 /*初始化地图*/ var map; function initmap(){ map= new ol.Map({ layers: lay
  • 前言:OL可以让我们实现自定义的标注样式,用过CAD的同学应该都知道CAD中有上下文字中间用横线隔开的样式,这样标注让人一目了然的了解信息。给人以直观的的信息表达,本文实现就是分式的标注。 先来张图: 一、...
  • 自定义图层样式加载矢量图层,设置图层文字标注... } 文字标注重复显示解决办法,设置declutter=true属性 new ol.layer.VectorTile({ // 通过地图信息获取瓦片参数对象 source: source, declutter:true, })
  • OpenLayer学习之图文标注

    千次阅读 2018-06-22 11:41:58
    一、图文标注分为两类,一类是通过ol.3中Overlayer,结合HTML的一个div或者img标签元素实现。另一类是通过矢量图层作为表现层,本文介绍的就是矢量图层,总体思路,创建矢量数据源,创建矢量图层,然后创建要素,将...
  • ** openlayer加载下载的离线高德地图数据 ** 1、将离线高德地图发布成服务,url 2、使用openlayer api加载
  • 首先看实现效果: 实现要点: 1)树形标注实现 2)复杂标注样式定义 3)效率优化 ...1.树形标注实现 ...树形标注采用字体符号来实现,包括以下几...2)将每个部分的标注内容带入,测量标注内容所占大小,动态调整格...
  • Openlayer 面图层加载文字标注(踩坑)

    千次阅读 2020-04-09 10:46:31
    ** 最近使用openlayer添加网格,需要加载文字标注,在这里遇见一个问题:当你添加面坐标是字符串时,则文字标注加载不上去。** 图层样式: style: function (feat) { var style = new ol.style.Style({ fill: new...
  • 一、准备工作 ... 二、下载瓦片地图 这边使用迈高图下载的高德街道地图,仅下载了某个...引入openLayer包 <link rel="stylesheet" type="text/css" href="cs/ol.css" /> <script src="js/ol.js"></sc
  • OpenLayer学习之聚合标注和信息框弹出

    千次阅读 热门讨论 2018-07-01 16:16:45
    var layerVetor = new ol.layer.Vector({ source: clusterSource,//注意一定不要搞错了 style: function (feature, resolution) { var size = feature.get('features').length; var style = styleCache[size]; ...
  • var layer = new ol.layer.Vector({ source: olkit.searSource, style: function(feature,resolution){ var geo = feature.getGeometry(); if(geo instanceof ol.geom.Point){ var style; if(feature....
  • OpenLayer加载常见在线地图案例

    千次阅读 2018-01-26 10:44:22
    最近在学习OpenLayer,测试了几种国内在线地图服务并作出分享与大家讨论 参考资料: OpenLayers 3 之 加载天地图 高德,百度,Google地图定位偏移以及坐标系转换 OpenLayer基础教程 OpenLayer基础教程 ...
  • 2、openlayer 怎么连接 互联网地图? 互联网地图是不是可以看出服务器是别人的而已,把原本的ip改成别人的ip就可以了。其他的不变? 3、 参考:天地图API及服务接口调用418错误 天地图官网 :...
  • 1、导入openlayercss包、js包 2、在APP首页index.html中... index.html引入openlayer包 <...--引入openlayer css-->...link rel="stylesheet" href="lib/openlayer/css/ol.css"> <!--引...
  • openlayer 简单实用

    2017-12-13 17:12:32
    做web地图的一个功能,之前用的arcgis,今天同事推荐了openlayer v4.x。简单记录一下。 用法大致跟arcgis差不多,感觉api没有arcgis的方便好用。 代码: 引入css js <script src="js/jquery-1.9.1.min.js" typ

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,982
精华内容 1,992
关键字:

openlayer标注