ionic webApp 通过openlayer集成 arcgis 地图服务

1、导入openlayer css包、js包

  

2、在APP 首页index.html中引入

index.html引入openlayer包

<!--引入openlayer css--> <link rel="stylesheet" href="lib/openlayer/css/ol.css">     <!--引入openlayer js--> <script src="lib/openlayer/js/ol.js"></script>

 

3、在controller中初始化openlayer map实例

实例化openlayer map 对象

//创建地图 var GISServiceUrl = GlobalVariable.GISServiceUrl; var map = new ol.Map({       target: 'mapPage',       layers: [         new ol.layer.Tile({               source: new ol.source.TileArcGISRest({                     url: GISServiceUrl               })             }),             //featureOverlay8   ],   view: new ol.View({         center: [         112.3543, 37.5043],             zoom: 7,            minZoom: 6,             maxZoom: 20,             projection: 'EPSG:4326'           })         });     //Map 图层click事件绑定 弹框 var object = '';  map.on('click',function (evt) {   //如果模态框已经打开，则不弹出，防止openlayer 多点触发问题（后面可看下openlayer是否有其他点击监听事件）        var pixel = map.getEventPixel(evt.originalEvent);       var feature = map.forEachFeatureAtPixel(pixel, function (feature) {                 object = feature.values_.type;             $scope.openDetail(object);   }); });

//遗留问题： openlayer 初始化监听事件后，在页面点击标点会触发多个点的事件，需要在打开弹出层的方法里做判断处理

4、构建矢量图层

openlayer 构建矢量图层

for (var j = 0; j < mapDatas1.length; j++) {       var x1 = mapDatas1[j].lnglat[0], y1 = mapDatas1[j].lnglat[1],   obj1 = mapDatas1[j];    var createLabelStyle = function (feature) {             return new ol.style.Style({                   image: new ol.style.Icon(                     ({                           anchor: [0.5, 60],                           anchorOrigin: 'top-right',                           anchorXUnits: 'fraction',                           anchorYUnits: 'pixels',                           offsetOrigin: 'top-right',                           opacity: 0.75,                           src: styleObjectArr[obj1.style].url                     })                   )            });       } //实例化Vector要素，通过矢量图层添加到地图容器中   iconFeature1[j] = new ol.Feature({         geometry: new ol.geom.Point([x1, y1]),     type:obj1   });       iconFeature1[j].setStyle(createLabelStyle(iconFeature1[j]     )); } //矢量标注的数据源 vectorSource1 = new ol.source.Vector({   features: iconFeature1 }); //矢量标注图层 vectorLayer1 = new ol.layer.Vector({   source: vectorSource1 }); //地图添加图层 map.addLayer(vectorLayer1);

 

注：mapDatas1 是要添加标注的数据集合